Get Microsoft Silverlight

Saturday, November 15, 2008

Concave cornered Rectangle - Expression Blend Tip


An expression blend tip to create a Path looks like a concave cornered rectangle.  Put a Grid with 5*5 rows and columns. and add 4 ellipse and a rectangle as in the following XAML.

<Grid x:Name="grid" >
    <Grid.ColumnDefinitions>
     <ColumnDefinition Width="0.1*"/>
     <ColumnDefinition Width="0.1*"/>
     <ColumnDefinition Width="0.6*"/>
     <ColumnDefinition Width="0.1*"/>
     <ColumnDefinition Width="0.1*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
     <RowDefinition Height="0.1*"/>
     <RowDefinition Height="0.1*"/>
     <RowDefinition Height="0.6*"/>
     <RowDefinition Height="0.1*"/>
     <RowDefinition Height="0.1*"/>
    </Grid.RowDefinitions>
    <Rectangle Fill="#FF000000" Grid.Column="1" Grid.Row="1" Grid.RowSpan="3" Grid.ColumnSpan="3" StrokeThickness="0"/>
    <Ellipse Fill="#FFEA0000" VerticalAlignment="Stretch" StrokeThickness="0" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2"/>
    <Ellipse Fill="#FFEA0000" StrokeThickness="0" VerticalAlignment="Stretch" Grid.ColumnSpan="2" Grid.RowSpan="2" Grid.Row="3"/>
    <Ellipse Fill="#FFEA0000" StrokeThickness="0" VerticalAlignment="Stretch" Grid.ColumnSpan="2" Grid.Row="3" Grid.RowSpan="2" Grid.Column="3"/>
    <Ellipse Fill="#FFEA0000" StrokeThickness="0" VerticalAlignment="Stretch" Grid.Column="3" Grid.ColumnSpan="2" Grid.Row="0" Grid.RowSpan="2"/>
   </Grid>

Do the Subtract Path operation by selecting menu option Object -> Combine -> Subtract
Now you will get a Path object as bellow XAML.

<Path Fill="#FFA1A1A1" Stretch="Fill" Stroke="#FF000000" StrokeThickness="1" 
Width="50" Height="50" Data="M17.200002,0L120.4,0 120.4,2.3066998E-06C120.4,6.7378696,128.10079,12.200001,137.60001,12.200001L137.60001,85.400003C128.10077,85.400003,120.4,90.862138,120.4,97.6L17.200002,97.6C17.200002,90.862151,9.4993697,85.400003,0,85.400003L0,12.199999C9.4993663,12.200015,17.200002,6.7378725,17.200002,0z"/>

The above can be achieved in many different ways. You can use Expression Design or Adobe illustrator to generate a Path like this.
And if you are looking for a custom shape like this, you can create that by deriving a class from System.Windows.Shapes.Shape by doing some similar Geometry operations. Then we can define some dependency Properties for controlling the Concave radius too.

1 comment:

婷婷 said...

Your blog is wonderful, I like it very much, thank you!
By the way, do you like Burberry Polos, which are very chic, especially the Ralph Lauren Polo Shirts, I love them very much. I also like playing sports, it can keep healthy, what do you like to do?
We are the outlet of Wholesale Polo Shirt, Polo Ralph Lauren shirts on sale,these products are best-seller in our store cheap polo shirts Cheap Polo ShirtsToday is Christmas, and our products also have a corresponding discount activitiesWholesale Polo Shirts -50% OFF,cheap polo shirts Cheap Polo ShirtsSo if you love these, you should not miss our store, we can meet what you want, and you can find many surprise in our store