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.

Comments

Popular posts from this blog

Time Picker User Control

A simple Multiselect ComboBox using expression Blend

A Simple Radial Panel for WPF and SilverLight