Intorduction
This is the second of my NikeClone Series. In the first part we designed and implemented some functionality behind a UserControl named SoccerItemList. Which is intended to be used as expandable Menu and also Inclused a Login Button. Here’s the screen shot of UI:
In this part we’ll create a LoginWindow.
Adding ChildWindow In Blend
To do this go to the project menu in Blend and select Add New Item or press Ctrl+N in your Keyboard. This will bring up the following dialog box:
Select child window and name it LoginWindow.
Styling The Login Window
When this window is opened in Blend, you’ll notice there’s a breadcrumb at the top left corner of the workspace:
You can modify the existing Template and Style of this window but just navigate to EditTemplate>Edit a Copy. Here’s how I styled this Window:
<Style x:Key="LoginWindowStyle" TargetType="controls:ChildWindow">
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="TabNavigation" Value="Cycle"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:ChildWindow">
<Grid x:Name="Root">
<Grid.Resources>
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="Background" Value="#FF1F3B53"/>
<Setter Property="Foreground" Value="#FF000000"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="grid" Height="14" HorizontalAlignment="Center"
VerticalAlignment="Center" Width="15" Background="#02FFFFFF">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz2"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz1"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz0"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" Storyboard.TargetName="X"
Storyboard.TargetProperty="Opacity" To="0.95"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="X"
Storyboard.TargetProperty="Opacity" To="0.85"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz2"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz1"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz0"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="X"
Storyboard.TargetProperty="Opacity" To="0.5"/>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Path x:Name="X_Fuzz2" Fill="#14C51900" Stretch="Fill" Stroke="#14C51900"
Height="8" HorizontalAlignment="Center" Margin="0,-1,0,0"
VerticalAlignment="Center" Width="9" Opacity="1"
RenderTransformOrigin="0.5,0.5" Visibility="Collapsed"
Data="F1 M 6.742676,3.852539 L 9.110840,1.559570 L 8.910645,
0.500000 L 6.838379,0.500000 L 4.902832,
2.435547 L 2.967285,0.500000 L 0.895020,
0.500000 L 0.694824,1.559570 L 3.062988,
3.852539 L 0.527832,6.351563 L 0.689941,
7.600586 L 2.967285,7.600586 L 4.897949,
5.575195 L 6.854004,7.600586 L 9.115723,
7.600586 L 9.277832,6.351563 L 6.742676,3.852539 Z">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1.3" ScaleY="1.3"/>
</TransformGroup>
</Path.RenderTransform>
</Path>
<Path x:Name="X_Fuzz1" Fill="#1EC51900" Stretch="Fill"
Stroke="#1EC51900" Height="8" HorizontalAlignment="Center"
Margin="0,-1,0,0" VerticalAlignment="Center" Width="9"
Opacity="1" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed"
Data="F1 M 6.742676,3.852539 L 9.110840,1.559570 L 8.910645,
0.500000 L 6.838379,0.500000 L 4.902832,2.435547 L 2.967285,
0.500000 L 0.895020,0.500000 L 0.694824,
1.559570 L 3.062988,3.852539 L 0.527832,
6.351563 L 0.689941,7.600586 L 2.967285,
7.600586 L 4.897949,5.575195 L 6.854004,
7.600586 L 9.115723,7.600586 L 9.277832,6.351563 L 6.742676,3.852539 Z">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1.1" ScaleY="1.1"/>
</TransformGroup>
</Path.RenderTransform>
</Path>
<Path x:Name="X_Fuzz0" Fill="#FFC51900" Stretch="Fill" Stroke="#FFC51900"
Height="8" HorizontalAlignment="Center" Margin="0,-1,0,0"
VerticalAlignment="Center" Width="9" Opacity="1" Visibility="Collapsed"
Data="F1 M 6.742676,3.852539 L 9.110840,1.559570 L 8.910645,
0.500000 L 6.838379,0.500000 L 4.902832,2.435547 L 2.967285,
0.500000 L 0.895020,0.500000 L 0.694824,1.559570 L 3.062988,
3.852539 L 0.527832,6.351563 L 0.689941,7.600586 L 2.967285,
7.600586 L 4.897949,5.575195 L 6.854004,7.600586 L 9.115723,
7.600586 L 9.277832,6.351563 L 6.742676,3.852539 Z"/>
<Path x:Name="X" Fill="#FFFFFFFF" Stretch="Fill" Height="8"
HorizontalAlignment="Center" Margin="0,-1,0,0"
VerticalAlignment="Center" Width="9" Opacity="0.7"
Data="F1 M 6.742676,3.852539 L 9.110840,1.559570 L 8.910645,
0.500000 L 6.838379,0.500000 L 4.902832,2.435547 L 2.967285,
0.500000 L 0.895020,0.500000 L 0.694824,1.559570 L 3.062988,
3.852539 L 0.527832,6.351563 L 0.689941,7.600586 L 2.967285,
7.600586 L 4.897949,5.575195 L 6.854004,7.600586 L 9.115723,
7.600586 L 9.277832,6.351563 L 6.742676,3.852539 Z">
<Path.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF313131" Offset="1"/>
<GradientStop Color="#FF8E9092" Offset="0"/>
</LinearGradientBrush>
</Path.Stroke>
</Path>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="WindowStates">
<vsm:VisualState x:Name="Open">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="Overlay"
Storyboard.TargetProperty="(Background).Color">
<SplineColorKeyFrame KeyTime="0" Value="#7F000000"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Opening">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="Overlay"
Storyboard.TargetProperty="(Background).Color">
<SplineColorKeyFrame KeyTime="0" Value="#7F000000"/>
<SplineColorKeyFrame KeyTime="00:00:00.2" Value="#7F000000"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="ContentRoot"
Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleX">
<SplineDoubleKeyFrame KeyTime="0" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.4" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="1.05" KeySpline="0,0,0.5,1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.55" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="ContentRoot"
Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleY">
<SplineDoubleKeyFrame KeyTime="0" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.4" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="1.05" KeySpline="0,0,0.5,1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.55" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Closing">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="Overlay"
Storyboard.TargetProperty="(Background).Color">
<SplineColorKeyFrame KeyTime="0" Value="#7F000000"/>
<SplineColorKeyFrame KeyTime="00:00:00.45" Value="#7F000000" KeySpline="0,0,0.5,1"/>
<SplineColorKeyFrame KeyTime="00:00:00.5" Value="#00000000"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="ContentRoot"
Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleX">
<SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1.05"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="ContentRoot"
Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleY">
<SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1.05"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Grid x:Name="Overlay" HorizontalAlignment="Stretch" Margin="0" VerticalAlignment="Top">
<Grid.Background>
<SolidColorBrush/>
</Grid.Background>
</Grid>
<Grid x:Name="ContentRoot" Height="{TemplateBinding Height}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Width="{TemplateBinding Width}" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<Border HorizontalAlignment="Stretch" Margin="-1" VerticalAlignment="Stretch"
Background="#14000000" BorderBrush="#FF000000" BorderThickness="1" CornerRadius="2"/>
<Border HorizontalAlignment="Stretch" Margin="-2" VerticalAlignment="Stretch"
Background="#0F000000" BorderBrush="#FF000000" BorderThickness="1" CornerRadius="2.25"/>
<Border HorizontalAlignment="Stretch" Margin="-3" VerticalAlignment="Stretch"
Background="#0C000000" BorderBrush="#FF000000" BorderThickness="1" CornerRadius="2.5"/>
<Border HorizontalAlignment="Stretch" Margin="-4" VerticalAlignment="Stretch"
Background="#0A000000" BorderBrush="#FF000000" BorderThickness="1" CornerRadius="2.75"/>
<Border Background="#FF101010" BorderThickness="1" CornerRadius="2">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Border Margin="1" CornerRadius="1.5" Background="#FF000000">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border x:Name="Chrome" Height="24" Width="Auto" BorderThickness="0,0,0,1">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF000000"/>
<GradientStop Color="#FF4E4E4E" Offset="1"/>
<GradientStop Color="#FFB4B4B4" Offset="0.466"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush EndPoint="0.5,0.528" StartPoint="0.5,0">
<GradientStop Color="#FF2E343A" Offset="1"/>
<GradientStop Color="#FF1C2025" Offset="0.004"/>
</LinearGradientBrush>
</Border.Background>
<Grid Height="Auto" Width="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<ContentPresenter HorizontalAlignment="Stretch" Margin="6,0,6,0" VerticalAlignment="Center"
Content="{TemplateBinding Title}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
<Button x:Name="CloseButton" Height="14" HorizontalAlignment="Center"
Style="{StaticResource ButtonStyle}" VerticalAlignment="Center" Width="15"
IsTabStop="False" Grid.Column="1"/>
</Grid>
</Border>
<Border Margin="6" Grid.Row="1">
<ContentPresenter HorizontalAlignment="{TemplateBinding
HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
</Border>
</Grid>
</Border>
</Border>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Now all you need to do is apply this style to your Login window. The easiest way to do this is going again into the breadcrumb section of LoginWindow at the top left oft the work space and navigate to Apply Resource:
Designing The Layout
After applying the style for the LoginWindow, select LayoutRoot(Which is a Grid) in the Objects and Timeline panel. Add some Rows and Columns. Value Shout be exactly like the following:
<Grid.RowDefinitions>
<RowDefinition Height="0.527*"/>
<RowDefinition Height="0.048*"/>
<RowDefinition Height="0.044*"/>
<RowDefinition Height="0.04*"/>
<RowDefinition Height="0.033*"/>
<RowDefinition Height="0.032*"/>
<RowDefinition Height="0.033*"/>
<RowDefinition Height="0.04*"/>
<RowDefinition Height="0.04*"/>
<RowDefinition Height="0.164*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.528*"/>
<ColumnDefinition Width="0.472*"/>
</Grid.ColumnDefinitions>
Now add an Image at Row 0 and set the RowSpan to 10 and ColumnSpan to 2. Here’s the Xaml:
<Image Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto"
Source="Images/bg_page.jpg" Stretch="Fill" Grid.ColumnSpan="2" Grid.RowSpan="10"/>
You can find the Image I’ve used at Nike’s Soccer site.
Select the LayoutRoot in the Objects and Timeline panel again and insert another Grid as its child and name it grdInner. Set the Grid.Row to 0, Grid.Column to 0, Width and Height of the Grid to Auto, Horizontal and VerticalAlignment to Stretch and margin to 0,0,0,-5. Add couple of rows inside this Grid. Value should be exactly like the following:
<Grid.RowDefinitions>
<RowDefinition Height="0.38*"/>
<RowDefinition Height="0.091*"/>
<RowDefinition Height="0.121*"/>
<RowDefinition Height="0.053*"/>
<RowDefinition Height="0.115*"/>
<RowDefinition Height="0.064*"/>
<RowDefinition Height="0.051*"/>
<RowDefinition Height="0.126*"/>
</Grid.RowDefinitions>
Adding Controls Inside Inner Grids
Add a TextBlock at the first row of this Grid. Name the TextBlock tblLogin. Add another TextBlock at the second row and name it tblEmail. Add a Textbox in the third row and name it txtEmail. In the fourth row add another TextBlock and name it tblPassword. In the fifth row add a PasswordBox and name it pwdPassword. Add a HyperlinkButton in the sixth row and name it btn Forgot. Add a checkBox in the seventh row and name it chkRemember and at last add a Button in the row eighth row and name it btnLogin. Template for this button will the same as the SoccerItemList’s LoginButton we created in the first part of this series. the Here’s the completed Xaml for all the controls added inside grdInner:
<TextBlock x:Name="tblLogin" HorizontalAlignment="Left" Margin="54,0,0,0"
VerticalAlignment="Bottom" Width="50" FontFamily="Trebuchet MS" FontSize="16"
FontWeight="Normal" Foreground="#FF0BADE8" Text="LOGIN" TextWrapping="Wrap"/>
<TextBlock x:Name="tblEmail" HorizontalAlignment="Left" Margin="55,7,0,8" Width="50"
FontFamily="Trebuchet MS" FontSize="12" FontWeight="Normal" Foreground="#FFDEDEDE" Text="Email"
TextWrapping="Wrap" Grid.Row="1" d:LayoutOverrides="Height"/>
<TextBox x:Name="txtEmail" Margin="52,8,54,10" Grid.Row="2" Text="" TextWrapping="Wrap"/>
<TextBlock x:Name="tblPassword" HorizontalAlignment="Left" Margin="52,0,0,6" Width="50"
FontFamily="Trebuchet MS" FontSize="12" FontWeight="Normal" Foreground="#FFDEDEDE"
Text="Password" TextWrapping="Wrap" Grid.Row="3"/>
<PasswordBox x:Name="pwdPassword" Margin="52,8,54,7" Grid.Row="4"/>
<HyperlinkButton x:Name="btnForgot" HorizontalAlignment="Left" Content="Forgot your password?"
Grid.Row="5" Margin="52,1,0,5" Foreground="#FFDEDEDE" d:LayoutOverrides="Height"/>
<CheckBox x:Name="chkRemember" HorizontalAlignment="Left" Margin="52,-1,0,6"
Width="112" Content="CheckBox" Grid.Row="6"/>
<Button x:Name="btnLogin" HorizontalAlignment="Left" Margin="52,4,0,19" Width="93" Content="LOGIN"
Grid.Row="7" Template="{StaticResource LoginButtonTemplate}" Foreground="#FFFFFFFF" FontWeight="Bold"/>
Adding Controls Inside LayoutRoot
Select the LayourRoot in the Objects and Timeline panel and place a Rectangle in the second row of the LayoutRoot. Name this Rectangle recLine. Properties for this rectangle should be like the following:
<Rectangle x:Name="recLine" Fill="#FF686868" Stroke="{x:Null}"
Height="0.85" Margin="51,0,51,12" VerticalAlignment="Bottom"
Grid.Row="1"/>
Add a TextBlock in the third row of the LayoutRoot and name this tblRegister. Add another TextBlock in the fourth row of the LayoutRoot and name it tblBenifits. Add a StackPanel in the the fifth row of the LayoutRoot and name it stpFreeShipping. Set the Orientation of this StackPanel to Horizontal. Set the margin of this StackPanel to 43,8,1,2 and HorizontalAlignment and VerticalAlignment to Stretch. Select the stpFreeShipping in the objects and Timeline panel to add some controls as its child. Add an ellipse inside the stpFreeShipping. name it elp1. Set the Width and Height property of ellipse to 4. Set the HorizontalAlignment to Left and VerticalAlignment to Center and Margin to 8,0,0,0. Add a TextBlock and name it tblFreeShipping. Set the Width to 196 and Height to Auto, Horizontalalignment to Stretch, VerticalAlignment to Center and Margin to 13,0,0,0.
Add another StackPanel in the sixth of the LayoutRoot and name it stpOrders. Set the Orientation to Horizontal, HorizontalAlignment and VerticalAlignment to Stretch and Margin to 51,101,3,8. Select the stpOrder in the Objects and TimeLine panel and add an Ellipse inside stpOrders and name it elp2. Again width and Height will be 4 like the previous ellipse we add inside stpFreeShipping. Add a TextBlock and name it tblFreeshipping. set the Width of the TextBlock to 158, Hegiht to Auto, Margin to 12,0,0,0 and HorizontalAlignment and VeritalAlignment to Center. Add three more Stack Panel in the seventh, eighth and ninth row and add an Ellipse and a TextBlock like you did previous two StackPanel(stpFreeShipping and stpOrders). Here’s the completed Xaml for all the StackPanels:
<StackPanel x:Name="stpFreeShipping" Margin="43,1,8,2" Grid.Row="4"
Orientation="Horizontal" d:LayoutOverrides="Height">
<Ellipse x:Name="elp1" Fill="#FF929292" Stroke="{x:Null}"
Height="4" HorizontalAlignment="Left" Margin="8,0,0,0" Width="4"
VerticalAlignment="Center"/>
<TextBlock x:Name="tblFreeShipping" Text="Free shipping on your next order."
TextWrapping="Wrap" Foreground="#FF929292" Margin="13,0,0,0"
HorizontalAlignment="Stretch" VerticalAlignment="Center" Width="196"/>
</StackPanel>
<StackPanel x:Name="stpOrders" Margin="51,3,101,8" Grid.Row="5" Orientation="Horizontal">
<Ellipse x:Name="elp2" Fill="#FF929292" Stroke="{x:Null}" Height="4" Margin="0,0,0,0"
VerticalAlignment="Center"
Width="4" HorizontalAlignment="Center"/>
<TextBlock x:Name="tblReturnAllOrders" Text="Free returns on all orders."
TextWrapping="Wrap" Margin="12,0,0,0" Foreground="#FF929292" HorizontalAlignment="Center"
VerticalAlignment="Center" Width="158"/>
</StackPanel>
<StackPanel x:Name="stpExpressCheckout" Margin="51,3,51,9" Grid.Row="6"
Orientation="Horizontal"
d:LayoutOverrides="Height">
<Ellipse x:Name="elp3" Fill="#FF929292" Stroke="{x:Null}" Height="4"
HorizontalAlignment="Left" Width="4"
VerticalAlignment="Center"/>
<TextBlock x:Name="tblExpressCheckOut" Text="Express checkout next time you shop."
TextWrapping="Wrap"
Margin="11,0,0,0" Foreground="#FF929292" HorizontalAlignment="Center"
VerticalAlignment="Center" Width="224"/>
</StackPanel>
<StackPanel x:Name="stpPersonalLocker" Margin="51,1,37,8" Grid.Row="7" Orientation="Horizontal">
<Ellipse x:Name="elp4" Fill="#FF929292" Stroke="{x:Null}" Height="4"
HorizontalAlignment="Center" Width="4"
VerticalAlignment="Center"/>
<TextBlock x:Name="tblPersonalLocker" Text="Save items to your personal locker."
TextWrapping="Wrap" Margin="10,0,0,0" Foreground="#FF929292" HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</StackPanel>
<StackPanel x:Name="stpEasyOrderTracking" Margin="52,0,66,3" Grid.Row="8" Orientation="Horizontal"
d:LayoutOverrides="VerticalAlignment">
<Ellipse x:Name="elp5" Fill="#FF929292" Stroke="{x:Null}" Margin="0,0,0,0" Width="4"
HorizontalAlignment="Center"
VerticalAlignment="Center" Height="4"/>
<TextBlock x:Name="tblEasyorderTracking" Text="Easy order tracking." TextWrapping="Wrap"
Margin="9,0,2,0" Foreground="#FF929292" HorizontalAlignment="Center" VerticalAlignment="Center" Width="113"/>
</StackPanel>
At last add a Button at the 10th row of the LayoutRoot to finish the design of the LoginWindow. Name the Button btnRegister. Set the Forground of the Button to white, Width to 116, Height to 33, HorizontalAlignment to Left, VerticalAlignment to Top and Margin to 49,0,8,0 . Apply the template below for this Button:
<ControlTemplate x:Key="ButtonControlTemplate1" TargetType="Button">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="00:00:00.3000000"/>
<vsm:VisualTransition From="MouseOver" GeneratedDuration="00:00:00.3000000" 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)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="00:00:00" Value="#FF0E5EAF"/>
</ColorAnimationUsingKeyFrames>
<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>
</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="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 " UseLayoutRounding="False"
Width="Auto" Grid.Column="1">
<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 Margin="0,0,0,0">
<ContentPresenter Margin="22,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center"/>
</Grid>
</Grid>
</ControlTemplate>
At this point you have finished designing the LoginWindow of NikeClone. This is what you’ll get after finishing the design.
In the next part we’ll add some code in the btnLogin event handler of the SoccerItemList and Create StyledSrearchTextBox and TemplatedSearch buttons. Hope you’ve enjoyed this part.
