Introduction
This is the third part of my NikeClone series. In the second part I showed you how to create LoginWindow. In this part of the NikeClone series I will add some code in the btnLogin click event handler In SoccerItemList which we created in the first part of this series and how to create a StylesSearchText UI and Templated search buttons which will be used for searching.
Adding Code Inside btnLogin’s Click Event
Open SoccerItemList.Xaml in Blend and select btnLogin in the Objects and timeline panel. Now switch to the Events view in Properties panel. Write btnLogin_Click in the Click section and double Click it to switch to the code behind in Blend.
You can see in the above screen shot the Events view of the Properties panel. In the code behind create an instance of LoginWindow inside the btnLogin_Click event handler and then call its Show method. This will help us to bring up the LoginWindow when Login button will be clicked. Here’s the completed code for the btnLogin’s Click event:
private void btnLogin_click(object sender,
System.Windows.RoutedEventArgs e)
{
// TODO: Add event handler implementation here.
LoginWindow loginWindow=new LoginWindow();
loginWindow.Show();
}
That’s it. At this point we’ve completed implementing all the functionality required for SoccerItemList. Now we’ll delve into creating the StyledSearchTextBox control.
Adding UserControl In The Project
Go to the Project menu in blend and select Add New Item or press Ctrl+N. This will bring up New Item dialog box:
Select UserControl name the UserControl StyleSearchTextBox. Set the height of this UserControl to 77 and Width to 503.
Designing The UserControl
Select LayoutRoot of this UserControl and add a path by pasting the following Xaml:
<Path x:Name="styledBg" 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">
<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>
Add a Border inside the LayoutRoot. Set the CornerRadius to 4, BroderThicknes to 1,1,1,1 and Horizontal and VerticalAlignment to Stretch. Now Select the Border in the Objects and Timeline panel to add a controls as it’s child. Add a TextBox as Border’s child. Name it txtSearch.
Styling The Search TextBox
Now define a Style for the txtSearch to give users the look and feel of a search TextBox. Here’s Style for the txtSearch:
<Style x:Key="TextBoxStyle1" TargetType="TextBox">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Background" Value="#FFFFFFFF"/>
<Setter Property="Foreground" Value="#FF000000"/>
<Setter Property="Padding" Value="2"/>
<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="TextBox">
<Grid x:Name="RootElement">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="MouseOverBorder"
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#FF99C1E2"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement"
Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="ReadOnly">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ReadOnlyVisualElement"
Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement"
Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Unfocused">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement"
Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="ValidationStates">
<vsm:VisualState x:Name="Valid"/>
<vsm:VisualState x:Name="InvalidUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="InvalidFocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="validationTooltip"
Storyboard.TargetProperty="IsOpen">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>True</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Border x:Name="Border" Opacity="1" CornerRadius="4,4,4,4">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFFFF"/>
<GradientStop Color="#FFD5D5D5" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9"/>
<GradientStop Color="#06000000" Offset="0"/>
<GradientStop Color="#1DD5D5D5" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border x:Name="ReadOnlyVisualElement" Opacity="0" Grid.ColumnSpan="2"
Background="#72F7F7F7"/>
<Border x:Name="MouseOverBorder" Grid.ColumnSpan="2" BorderBrush="Transparent" BorderThickness="1">
<ScrollViewer x:Name="ContentElement" BorderThickness="0" IsTabStop="False"
Padding="{TemplateBinding Padding}" Margin="0,0,21,0"/>
</Border>
<Path x:Name="searchIcon" Stretch="Fill" Stroke="#FF525967" StrokeLineJoin="Round"
StrokeThickness="2" Height="18" HorizontalAlignment="Right" Margin="0,0,7.3,0" Width="9.7"
RenderTransformOrigin="0.5,0.260899226074288" UseLayoutRounding="False" Grid.Column="1"
Data="M24.1,11 C24.1,16.522848 18.928888,21 12.55,21 C6.1711111,21 1,
16.522848 1,11 C1,5.4771523 6.1711111,1 12.55,
1 C18.928888,1 24.1,5.4771523 24.1,11 z M13.347657,
19.998957 L15.092877,41.161873" d:LayoutRounding="Auto"
VerticalAlignment="Center" Cursor="Hand">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-40.448"/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</Border>
<Border x:Name="DisabledVisualElement" IsHitTestVisible="False" Opacity="0"
Background="#A5F7F7F7" BorderBrush="#A5F7F7F7"
BorderThickness="{TemplateBinding BorderThickness}"/>
<Border x:Name="FocusVisualElement" Margin="1" IsHitTestVisible="False" Opacity="0"
BorderThickness="{TemplateBinding BorderThickness}">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA1A1A1"/>
<GradientStop Color="#FFD5D5D5" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
<Border x:Name="ValidationErrorElement" Visibility="Collapsed" BorderBrush="#FFDB000C"
BorderThickness="1" CornerRadius="1">
<ToolTipService.ToolTip>
<ToolTip x:Name="validationTooltip"
DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}"
Template="{StaticResource ValidationToolTipTemplate}" Placement="Right"
PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}">
<ToolTip.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="validationTooltip"
Storyboard.TargetProperty="IsHitTestVisible">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>true</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToolTip.Triggers>
</ToolTip>
</ToolTipService.ToolTip>
<Grid Height="12" HorizontalAlignment="Right" Margin="1,-4,-4,0"
VerticalAlignment="Top" Width="12" Background="Transparent">
<Path Fill="#FFDC000C" Margin="1,3,0,0" Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 z"/>
<Path Fill="#ffffff" Margin="1,3,0,0" Data="M 0,0 L2,0 L 8,6 L8,8"/>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Now you should have UI like the screen shot below:
We’ve completed the design of StyledSearchTextBox.
Creating Templated Search Buttons
We’re going to create two SearchButtons. The Idea behind this is, we’ll place two buttons at the same place. Thjat means we’ll a Button over another Button and set the Visibility property of the Button in the back to Collapsed. When we click the Button on the top It’s visiblity property will be turned in to Collapse and the Visibility property will be turned Visible for the Button in the back. I’ll explain more when I’ll show you the designing of UITemplates.
Let’s define the Templates for the SearchButtons. Here’s the Template for the top Button:
<ControlTemplate x:Key="SearchButtonTemplate" TargetType="Button">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="MouseOver"/>
<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_14" Height="Auto" Stretch="Fill"
Data="F1 M 5.00919,10.7528L 140.009,10.7528C 142.771,
10.7528 145.009,12.9914 145.009,15.7528L 145.009,
46.2458C 145.009,49.0072 142.771,51.2458 140.009,51.2458L 5.00919,
51.2458C 2.24776,51.2458 0.00918798,49.0072 0.00918798,46.2458L 0.00918798,
15.7528C 0.00918798,12.9914 2.24776,10.7528 5.00919,10.7528 Z "
Margin="0,0,0,0" UseLayoutRounding="False" Width="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>
<Border Margin="0,0,0,0" BorderThickness="2,3,2,2">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#06000000"/>
<GradientStop Color="#1DD5D5D5" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Border BorderBrush="#76FCFCFC" BorderThickness="1,1,1,1">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.766*"/>
<ColumnDefinition Width="0.234*"/>
</Grid.ColumnDefinitions>
<ContentPresenter HorizontalAlignment="Center" Margin="0,0,0,0" VerticalAlignment="Center"/>
<Path x:Name="searchIcon" Stretch="Fill" Stroke="#FF525967" StrokeLineJoin="Round"
StrokeThickness="1" Height="17" HorizontalAlignment="Left" Margin="0,0,0,-2"
Width="9.7" RenderTransformOrigin="0.5,0.260899226074288" UseLayoutRounding="False"
Grid.Column="1"
Data="M24.1,11 C24.1,16.522848 18.928888,21 12.55,21 C6.1711111,
21 1,16.522848 1,11 C1,5.4771523 6.1711111,1 12.55,1 C18.928888,1 24.1,
5.4771523 24.1,11 z M13.347657,19.998957 L15.092877,41.161873"
d:LayoutRounding="Auto" VerticalAlignment="Center">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-40.448"/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</Border>
</Border>
</Grid>
</ControlTemplate>
Try applying the template abover over any Button. You should have Button look like the following:
This will be the the Template for the Button in front. For the Button in the back we’ll use the Template ButtonControlTemplate1. Which we defined in the second Part of this series. For your convenience here’s that template again:
<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>
That’s all for now. In the next part I’ll show you how to create CardsUI. Hope you’ve enjoyed this part of the NikeClone series.
