Introduction
NikeClone, this is the app I showed at MS Tech Day Dhaka. I’ve decided to explain this to the people who are interested to know how I created clone of the original Nike site. The reason is, I really liked the design of the Nike web site and amazed seeing how they did this with Flash. So I gave it a thought and realized same design can be applied with Silverlight and at the end it proved that it is quite easier to implement the design like this with Silverlight and it’s looking more flexible with Silverlight.
Starting The Project In Blend
I have used Expression Blend 3 Beta and Silverlight 3 Beta for this design. Open ExpressionBlend 3 if you have already installed it in your machine and Select New Project. This will bring up the following dialog box:
Name the application NikeClone. Now add a UserControl to your project and name it UITemplates. All the templated controls will be inside this UserControl. Select the LayoutRoot of this UserControl (Which is a Grid) and add two rows and to columns. Values of the properties of rows and columns will be exactly like the following :
<Grid x:Name="LayoutRoot" Height="Auto" Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="0.533*"/>
<RowDefinition Height="0.467*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.21*"/>
<ColumnDefinition Width="0.79*"/>
</Grid.ColumnDefinitions>
</Grid>
With 2 rows and 2 colums added in the UITemplates control leave it for now. We’ll get back into this UI later.
Designing a UserControl For ExpandableMenu
Right click over the project and select Add New Item. This will bring up New Item dialog box like the screen shot below:
Select UserControl and name the UserControl SoccerItemList. This will be the Menu list for Menu wish we will add later inside the UITemplates UserControl. Select the LayoutRoot(Which is a Grid) in the Objects and Timeline panel of the SoccerItemList UserControl to select other elements as its child. Add a StackPanel inside the LayoutRoot. Name the StackPanel ItemStack. Select the ItemStack to add some other UI elements as its child. Add a Button inside the ItemStack. Name it btnProducts and set its content to PRODUCTS. Set Button’s Width to 98, Height to 23, HorizontalAlignment to Right,VerticalAlignment to Top and Margin to 0,0,2,0. Here’s the Xaml:
<Button x:Name="btnProducts" Height="23" HorizontalAlignment="Right" Margin="0,2,0,0" VerticalAlignment="Top" Width="98" Template="{StaticResource ItemExpanderButton}" Content="PRODUCTS" Grid.Row="2" Foreground="#FFFFFFFF"/>
Following is the screen shot of the Button’s properties set in Blend:
You can see in Xaml for the btnProducts that there’s a Template property which has been set to Template="{StaticResource ItemExpanderButton}" This is the Template we will use for all the buttons inside this UserControl. Here’s the Xaml for the Template :
<ControlTemplate x:Key="ItemExpanderButton" TargetType="Button">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="00:00:00.4000000"/>
<vsm:VisualTransition From="MouseOver"
GeneratedDuration="00:00:00.4000000" To="Normal"/>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00"
Duration="00:00:00.0010000" Storyboard.TargetName="background"
Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="00:00:00" Value="#FF2C4D76"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000"
Storyboard.TargetName="background"
Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="00:00:00" Value="#FF0E5EAF"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<EasingDoubleKeyFrame KeyTime="00:00:00.4000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="1.1"/>
<EasingDoubleKeyFrame KeyTime="00:00:00.4000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Duration="00:00:00.0010000" Storyboard.TargetName="background"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="1.1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000"
Storyboard.TargetName="background"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="1.1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="1.1"/>
<EasingDoubleKeyFrame KeyTime="00:00:00.4000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled"/>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="00:00:00.1000000"/>
<vsm:VisualTransition From="Unfocused" GeneratedDuration="00:00:00.1000000" To="Focused">
<Storyboard d:ShouldSerialize="False"/>
</vsm:VisualTransition>
<vsm:VisualTransition From="Focused" GeneratedDuration="00:00:00.1000000" To="Unfocused">
<Storyboard d:ShouldSerialize="False"/>
</vsm:VisualTransition>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Unfocused">
<Storyboard d:ShouldSerialize="False"/>
</vsm:VisualState>
<vsm:VisualState x:Name="Focused">
<Storyboard d:ShouldSerialize="False"/>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Path x:Name="background" Height="Auto" Stretch="Fill"
Data="F1 M 3.00003,364.744L 139.257,364.744C 140.913,364.744 142.257,
366.088 142.257,367.744L 142.257,404.744C 142.257,
406.401 140.913,407.744 139.257,407.744L 3.00003,407.744C 1.34319,
407.744 4.18673e-005,406.401 4.18673e-005,
404.744L 4.18673e-005,367.744C 4.18673e-005,366.088 1.34319,364.744 3.00003,364.744 Z "
Margin="0,0,0,0" UseLayoutRounding="False" Width="Auto"
RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
<Path.Fill>
<LinearGradientBrush StartPoint="7.82502e-008,0.499998" EndPoint="1,0.499998">
<GradientStop Color="#FF1C2025" Offset="0.401826"/>
<GradientStop Color="#FF2E343A" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
<Grid x:Name="grid" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.771*"/>
<ColumnDefinition Width="0.229*"/>
</Grid.ColumnDefinitions>
<ContentPresenter Margin="0,0,0,0" HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
</Grid>
</ControlTemplate>
Template for the buttons is really simple. I have used two Grid a Path and ContentPresenter to define the Template. You can tweak the VSM any way you like by switching the States pane in Blend and set the desired property on Mouse over or pressed.
I have just changed the Background on Mouse Over and scaled a little the Path and Grid I used for the buttons on Pressed.
Designing The Layouts For First Menu Items
After defining and applying template for the buttons select ItemStack again to activate it and add a Grid as it’s child. Name the Grid Root. Set it’s Width to 109, Height to 0, HorizontalAlignment to Right and VerticalAlignment to Stretch. Setect the Root in the Objects and Timeline panel and add a Border inside it. Name the Border brdProducts. Here’s the properties of the Border set in Blend:
Add a Path inside this Border which will help us to show the content of the Menu by placing the following Xaml inside <Border> </Border> Tag:
<Path x:Name="Root1bg" Stretch="Fill" Data="F1 M5.8677592,10.7528 L143.54453,
10.7528 C146.30652,10.7528 145.009,
12.9914 145.009,15.7528 L145.009,
46.2458 C145.009,49.007198 146.30618,
51.2458 143.54419,51.2458 L5.0091901,
51.2458 C2.2477601,51.2458 0.0091879796,
49.007198 0.0091879796,46.2458 L0.0091879796,
15.7528 C0.0091879796,12.9914 3.1063297,10.7528 5.8677592,10.7528 z"
Margin="0,1,-0.2,1" UseLayoutRounding="False" Height="Auto">
<Path.Fill>
<LinearGradientBrush StartPoint="0.371647,1.29247" EndPoint="1.95669,1.29247">
<LinearGradientBrush.RelativeTransform>
<TransformGroup>
<SkewTransform CenterX="0.371647"
CenterY="1.29247" AngleX="0.954052" AngleY="0"/>
<RotateTransform CenterX="0.371647" CenterY="1.29247" Angle="269.369"/>
</TransformGroup>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#FFD5D5D5" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
Add another Border inside Grid named Root and another one inside this Border then select this border and add a Grid inside it and then select this Grid and add a StackPanel inside this Grid at last add Six HyperlinkButtons inside this StackPanel. It’s little complex design. I did this to get the desired look. If you’re confused, just paste the following Xaml Inside the Grid named Root and just after the closing tag of the brdProducts:
<Border x:Name="brdProductsInner1" Margin="8,8,0,8" BorderThickness="2,4,2,2">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#06000000"/>
<GradientStop Color="#39D5D5D5" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Border x:Name="brdProductsInner2" BorderBrush="#76FCFCFC"
BorderThickness="1,1,1,1" Margin="0,4,-2,6">
<Grid x:Name="grdProducts" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Margin="0,0,-1,0">
<StackPanel x:Name="stpProductsLink" Orientation="Vertical">
<HyperlinkButton x:Name="btnMercurial" Content="Mercurial"
Margin="0,0,8,0" Foreground="#FF434445" FontSize="9" FontWeight="Bold" />
<HyperlinkButton x:Name="btnMercurialSuperfly" Content="Mercurial Superfly"
Margin="0,6,0,0" Foreground="#FF434445" Height="Auto" FontSize="9" FontWeight="Bold"/>
<HyperlinkButton x:Name="btnTeamKits" Content="Team Kits" Margin="0,6,8,0"
Foreground="#FF434445" FontSize="9" FontWeight="Bold"/>
<HyperlinkButton x:Name="btnNike5Zoom" Content="Nike 5 Zoom T7" Margin="0,6,8,0"
Foreground="#FF434445" FontSize="9" FontWeight="Bold" Height="17"/>
<HyperlinkButton x:Name="btnT90" Content="T90" Margin="0,6,0,0"
Foreground="#FF434445" FontSize="9" FontWeight="Bold" Height="17"/>
<HyperlinkButton x:Name="btnMore" Content="More" Margin="0,6,0,0" Foreground="#FF434445"
FontSize="9" FontWeight="Bold" Height="22"/>
</StackPanel>
</Grid>
</Border>
</Border>
Adding Storyboard For The First Menu Items
Now Add a Storyboard and name it sbProducts. Select the Root in the Objects and Timeline panel and drag the Playhead position to 5 seconds. Now select the Root and set its Height to 181.
If you look carefully at the screen shot above you can you that when Playhead position reaches to 5 seconds the Height of the Root increases to 181 from 0. This will allow you to see the content inside the Products menu when btnProducts will be clicked. At this point we’ve defined animation for Products menu. When this menu will be clicked it will expand its Items within 5 seconds. Close the Storyboards now in the Objects and Timeline Panel.
Designing The Layout For Second Menu Items
Get back to the ItemStack by selecting it again and add another Button as its child. Properties for this Button should be something like this:
<Button x:Name="btnAthletes" VerticalAlignment="Stretch"
Template="{StaticResource ItemExpanderButton}" Content="ATHLETES"
Margin="0,3,0,0" Height="23" Foreground="#FFFFFFFF" Width="98"
HorizontalAlignment="Right" />
Add another Grid inside the ItemStack and name it Root2. Set it’s width to 109, Height to 0, HorizontalAlignment to 0 and VerticalAlignment to Stretch. Select the Root2 and add a Border as its child name the Border brdAthletes. Properties should be like the following:
Add a Path inside the brdAthletes by pasting the following Xaml:
<Path x:Name="Root2Bg" Stretch="Fill" Data="F1 M5.8677592,10.7528 L143.54453,
10.7528 C146.30652,10.7528 145.009,12.9914 145.009,15.7528 L145.009,
46.2458 C145.009,49.007198 146.30618,51.2458 143.54419,
51.2458 L5.0091901,51.2458 C2.2477601,51.2458 0.0091879796,
49.007198 0.0091879796,46.2458 L0.0091879796,15.7528 C0.0091879796,12.9914 3.1063297,
10.7528 5.8677592,10.7528 z" Margin="0,2,-1.208,1" UseLayoutRounding="False" Height="Auto">
<Path.Fill>
<LinearGradientBrush StartPoint="0.371647,1.29247" EndPoint="1.95669,1.29247">
<LinearGradientBrush.RelativeTransform>
<TransformGroup>
<SkewTransform CenterX="0.371647" CenterY="1.29247"
AngleX="0.954052" AngleY="0"/>
<RotateTransform CenterX="0.371647" CenterY="1.29247" Angle="269.369"/>
</TransformGroup>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#FFD5D5D5" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
Follow the same Process like you did for the Root(Grid for the Products menu). If you’re confused here’s what you need to do. Add another Border inside root 2 and add name it brdAthletesInner1 and then add another border as its child and name it brdAthletesInner2 and then add a Grid inside brdAthletesInnser2 and at last add a StackPanel to add some HyperlinkButtons as its child.
Adding Storyboard For Second Menu Item
Create another Storyboard in Blend and name it sbAthletes. Select Root2 in the Objects and Timeline panel move the Playhead position to 5 seconds and set the Height of the Root2 to 86.
Close the Storyboard sbAthletes and Select ItemStack again to add another Button. Name this buttons btnTraining. Add another Grid and name it Root3 Follow the same design approach as you did for the Root1 and Root2. After finishing the design of Root3 define another Storyboard and name it sbTraining.
Select Root3 in the Objects and Timeline Panel and move the Playhead position to 5 seconds. Set the Height of the Root3 to 86.
Note: By default all the height Grids(Root1,Root2,Root3 and Root4) will be 0 and setting the Height of the Grids(Root1,root2,Root3,Root4) depends on how many items you have to show. For example Root 1 has 6 links to show that’s why it’s Height has been set to 181. Root2 and Root3 has 3 items to show that’s why it’s Height has been set to 86 when Playhead position reaches 5 seconds in the Storyboards.
Switch back to the ItemStack Add another Button as its child and name it btnGallery. Add another Grid inside ItemStack and name it Root4. Follow the same design approach for Root 4 like the previous Grids(Root1,Root2,Root3). Define another Stoyboard and name it sbGallery. Select the Root4 in the Objects and Timeline panel and move the Playhead position to 5 seconds set the Height of the Root4 to 73.
Creating Storyboards for Collapsing The Menus
Define another four Storyboards and name those sbCollapseProducts, sbCollapseAthletes, sbCollapseTraining and sbCollapseGallery.
Do the opposite for these four Storyboards. The means you need to animate the Root,Root2,Root3 and Root4’s Height to 0 from it’s Height you’ll get after calling the other four storyboards for the buttons. For example, Previously we animate buttons Height from it’s default value to 181 for Root, 0 to 86 for Root2 and Root3 and 0 to 73 for Root4. Now we need to animate from 181 to 0 for Root1, from 86 to 0 for Root2 and 3 and from 73 to 0 for Root4. To do this, Open the sbCollapseProducts in the Objects and Timeline panel. Select Root in the Object and timeline Panel and set the set the Height of the Root to 181 when Playhead position is at 0 seconds. Move the PlayheadPosition to 5 seconds and set the height to 0. That’s it you have defined a storyboard for collapsing you Products Menu Items. Do the same for sbCollapseAthletes,
sbCollapseTraining and sbCollapseGallery. Here’s the Xaml for all the Storyboards we’ll use for collapsing the menu:
<Storyboard x:Name="sbCollapseProducts">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Root"
Storyboard.TargetProperty="(FrameworkElement.Height)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="181"/>
<EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="sbCollapseAthletes">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Root2"
Storyboard.TargetProperty="(FrameworkElement.Height)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="86"/>
<EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="sbCollapseTraining">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Root3"
Storyboard.TargetProperty="(FrameworkElement.Height)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="86"/>
<EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="sbCollapseGallery">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Root4"
Storyboard.TargetProperty="(FrameworkElement.Height)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="75"/>
<EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
Adding Code Inside The Button Click Event
Now add some procedural code. Select the btnProducts in the Objects and timeline panel. In the properties panel switch to the Events view. Go to the Click Event for the button and add the name of your event handler and double click it to go to the code behind in Blend.
Here’s the code for the click event of the btnProducts:
private void btnProducts_Click(object sender,
System.Windows.RoutedEventArgs e)
{
// TODO: Add event handler implementation here.
if(Root.Height==0)
{
sbProducts.Begin();
Root2.Height=0;
Root3.Height=0;
Root4.Height=0;
}
else
{
sbCollapseProducts.Begin();
}
}
In the above event handlers I have set a condition. If Root’s Height is 0 by default then I’m calling the Storyboards begin method. In this case it’s sbProducts.Begin().I’m also setting the Height of Root2,Root3 and Root4 to 0 when after calling the Begin() method of the Storyboard. Cause I want Other Menu’s to be in Collapsed state when this Menu is in ExpandState. Otherwise I’m calling another storyboard’s Begin() method. In this case, its sbCollapseProducts.Begin().
Select btnAthletes, btnTraining, btnGallery respectively and follow the same approach to go to the Code behind to add some code in the event handler.
Here’s the code for the event of these three buttons:
private void btnAthletes_Click(object sender,
System.Windows.RoutedEventArgs e)
{
// TODO: Add event handler implementation here.
if(Root2.Height==0)
{
sbAthletes.Begin();
Root.Height=0;
Root3.Height=0;
Root4.Height=0;
}
else
{
sbCollapseAthletes.Begin();
}
}
private void btnTraining_Click(object sender,
System.Windows.RoutedEventArgs e)
{
// TODO: Add event handler implementation here.
if(Root3.Height==0)
{
sbTraining.Begin();
Root.Height=0;
Root2.Height=0;
Root4.Height=0;
}
else
{
sbCollapseTraining.Begin();
}
}
private void btnGallery_Click(object sender,
System.Windows.RoutedEventArgs e)
{
// TODO: Add event handler implementation here.
if(Root4.Height==0)
{
sbGallery.Begin();
Root.Height=0;
Root2.Height=0;
Root3.Height=0;
}
else
{
sbCollapseGallery.Begin();
}
}
Adding and Templating The Login Button
Switch to the Xaml view of SoccerItemList and select ItemStack In the Objects and Timeline panel. Add One more button as a child of ItemStack. Name the button btnLogin.
This is our Login button. Clicking over this button will bring up the login Window.
Here’s the properties for this button:
And Here’s the Template :
<ControlTemplate x:Key="LoginButtonTemplate" TargetType="Button">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="00:00:00.4000000"/>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000"
Storyboard.TargetName="Path_20"
Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="00:00:00" Value="#FF0E5EAF"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000"
Storyboard.TargetName="Path_20"
Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="00:00:00" Value="#FF0E5EAF"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="Pressed"/>
<vsm:VisualState x:Name="Disabled"/>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Unfocused"/>
<vsm:VisualState x:Name="Focused"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Path x:Name="Path_20" Stretch="Fill" Data="F1 M 3.00003,364.744L 139.257,
364.744C 140.913,364.744 142.257,366.088 142.257,367.744L 142.257,
404.744C 142.257,406.401 140.913,407.744 139.257,407.744L 3.00003,407.744C 1.34319,
407.744 4.18673e-005,
406.401 4.18673e-005,404.744L 4.18673e-005,367.744C 4.18673e-005,366.088 1.34319,364.744 3.00003,364.744 Z"
UseLayoutRounding="False" Height="Auto" Margin="0,0,-0.200000002980232,0" Width="Auto">
<Path.Fill>
<LinearGradientBrush StartPoint="7.82502e-008,0.499998" EndPoint="1,0.499998">
<GradientStop Color="#FF1C2025" Offset="0.401826"/>
<GradientStop Color="#FF2E343A" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
<Border Margin="0,0,0,0" BorderBrush="{x:Null}"
BorderThickness="1,1,1,1" CornerRadius="3,3,3,3">
<Grid Height="Auto" HorizontalAlignment="Stretch" Margin="0,0,0,0" Width="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.795*"/>
<ColumnDefinition Width="0.205*"/>
</Grid.ColumnDefinitions>
<ContentPresenter HorizontalAlignment="Center" Margin="0,0,0,0"
VerticalAlignment="Center" Content="{TemplateBinding Content}"/>
<Path x:Name="loginIcon" Width="10" Height="10" Stretch="Fill"
Fill="#FFE5E5E5" Data="F1 M 124.995,377.031C 124.312,
377.995 123.044,379.923 122.166,381.155C 121.288,382.387 120.801,382.923 120.215,
383.995C 119.63,385.066 118.947,386.673 118.606,388.387C 118.265,
390.101 118.265,391.923 118.313,
392.833C 118.362,
393.744 118.46,393.744 121.727,393.744C 124.995,393.744 131.432,
393.744 134.65,393.69C 137.869,393.637 137.869,393.53 137.723,
391.923C 137.576,390.316 137.284,387.209 136.162,384.53C 135.04,
381.852 133.09,379.602 132.066,378.477C 131.042,377.352 130.944,
377.352 130.749,377.191C 130.554,377.031 130.261,376.709 130.31,
376.441C 130.359,376.173 130.749,375.959 131.237,375.209C 131.724,
374.459 132.31,373.174 131.871,371.674C 131.432,370.174 129.969,368.46 128.457,
368.245C 126.945,368.031 125.385,369.317 124.647,370.633C 123.909,
371.95 123.995,373.298 124.238,374.316C 124.482,
375.333 124.885,376.021 125.183,376.258C 125.482,
376.495 125.677,376.281 125.726,376.174C 125.775,376.066 125.677,376.066 124.995,377.031 Z "
UseLayoutRounding="False" HorizontalAlignment="Left" Margin="0,0,0,0" Grid.Column="1"/>
</Grid>
</Border>
</Grid>
</ControlTemplate>
At this point we’ve completed the design and implanted some functionality for this UserControl. One more thing is left adding some code for the btnLogin. We’ll get back into this after creating a LoginWindow.
