Introduction
Welcome to the sixth part of my NikeClone series. In the last part I showed you how to create ExpandableMenu and Background control. In this part I’ll show you how I created UITemplates Control where I placed all the styled and templated Controls. Let’s start creating the Control.
Adding UserControl To The Project
Right click over the project template in blend and select Add New Item. In the Add New Item dialog box, select UserControl. Name the UserControl UITemplates. After adding the the UITemplates control in the project you’ll see LayoutRoot(Grid) as the parent element in the Objects and Timeline panel. Select it set the Width and Height to Auto and Background to Black. Add two rows and two columns to the LayoutRoot. Height of the rows and width of the columns should be exactly like the following:
<Grid.RowDefinitions>
<RowDefinition Height="0.533*"/>
<RowDefinition Height="0.467*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.21*"/>
<ColumnDefinition Width="0.79*"/>
</Grid.ColumnDefinitions>
Adding Some Controls Inside LayoutRoot
Add a Button in the first column and set it’s HorizontalAlignment to Right and VerticalAlignment to top. Name the Button btnItemExpander. Define a template for this button by pasting the following xaml inside the <App.Resources> section of the App.xaml page:
<ControlTemplate x:Key="NikeButtonTemplate" 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="btnNikebg" 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">
<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" VerticalAlignment="Bottom">
<Path x:Name="NikeIcon" Width="64.652" Height="26"
Canvas.Left="-0.00341128" Canvas.Top="-0.0187414"
Stretch="Fill" Fill="#FFB42929"
Data="F1 M 29.4047,30.8608C 24.2633,45.083 24.2633,
55.7497 41.9883,61.555C 59.7134,67.3602 95.1634,
68.3041 172.449,50.082C 249.735,31.8597 368.856,
-5.52863 359.084,0.666077C 349.311,6.86084 210.645,
56.6386 131.489,80.1823C 52.3338,103.726 32.6898,
101.035 18.4676,93.4798C 4.24535,85.9243 -4.55505,
73.5037 2.45594,53.96C 9.46692,34.4164 32.2893,
7.74969 38.5591,3.30524C 44.8289,
-1.13916 34.5461,16.6386 29.4047,30.8608 Z "
UseLayoutRounding="False"
HorizontalAlignment="Center"
Margin="0,-1,0,7" VerticalAlignment="Center"/>
</Grid>
</Grid>
</ControlTemplate>
Apply the above template to the btnItemExpander by clicking the breadcrumb at the topleft corner of your workspace or right clicking over the btnItemExpander and navigate to EditTemplate->ApplyResource->NikeButtonTemplate :
After applying the template you’ll see your button with NIKE logo over it. Here’s a closer shot of the button:
You can also see in that there’s couple of other buttons just beneath the btnItemExpander. You’ll know soon what the really are. Now add a HyperlinkButton in the first column or column 1 of LayoutRoot(Grid which is a root element of UITemplate UserControl). Set the width of the btnMenuHeader(HyperlinkButton) to 0 and Height to 22, HorizontalAlignment to Left, VerticalAlignment to Top.
Adding Storyboards For The Controls Added So Far
Now add a Storyboard by clicking over the plus icon in the Objects and Timeline panel:
This will bring up the following dialog box:
Name the Storyboard sbMenuTop and then click OK. This will add storyboard to your project. In the Objects and Timeline panel, select btnMenuHeader. Move the playhead position to 2 seconds and change the Width of the btnMenuHeader to 174. The idea behind creating this Storyboard is when btnItemExpander will be clicked the size of btnMenuHeader will be increased and we will be able to see the header of the Menu.
Now go to the Assets in the Blend toolbox and find the ExpandableMenu you created in the previous part of this series:
Add EpandableMenu in the first column of the LayoutRoot. Set the Width to 175 and Height to 0, HorizontalAlignment to Left and VerticalAlignment to Top and margin to 0,0,22,0. Create another Storyboard and name the Storyboard anything you want. In this case it’s Storyboard1. Select ExpandableMenu in the Objects and Timeline panel and move the playhead position to 5 seconds. Change the Height of the ExpandableMenu to 270.
Create another Storyboard and select the ExpandableMenu in the Objects and Timeline. Move the playhead position to 5 seconds and set the Height of the ExpandableMenu to 0. Move back the playhead position to 0 second and set the Height of the ExpandableMenu to 270. This will help us collapsing this control with animation when it is in expand state.
Adding Search Buttons And SearchTextBox
Add a Button in the first column of the LayoutRoot. Name Button btnFrontSearch. Set the Width to 91 and Height to 30, HorizontalAlignment to Stretch,VerticalAlignment to Top and Margin to 76,1,76,0. Apply the SearchButtonTemplate which I defined in the third part of this series. Here the btnFronSearch after applying the template:
Now set the Content of btnFrontSearch to Search.
Add another Button just right over the btnfrontSerach and name this btnBacksearch. Set the property for this button exactly like the btnFrontSearch and apply the template named ButtonControlTemplate1 which I created in the third part of this series. Now set the Foregrounf of this Button to White so that the content of the btnBackSerach can be clearly visible. Also don’t forget to set the Content to Search. Here’s the btnBackSearch:
Go to the Asset in the toolbox and find StyledSearchTextBox to add it in the second column of the LayoutRoot. Set the Width of the StyledSearchTextBox to 0, Height to 48, HorizontalizontalAlignment to Left, VerticalAlignment to Top and Margin to 0,0,76,0.
Adding More Storyboards
Create another Storyboard and name it anything you like. In this case it’s storyboard3. Move the playhead position to 7 seconds and set the Width property of the StyledSeachTextBox to 291. Create another Storyboard and do the reverse. Name it anything you like. In this case it is Storyboard4. Select the StyledSearchTextBox in the Objects andTimeline panel and move back the playhead position to 7 seconds and set the Width property to 0. Move back the playhead position to 0 and set the Width of the StyledSearchTextBox to 291. Again defining the second Storyboard here to serves the same purpose of collapsing back from the expand state.
Adding UserControl As Menu
Go to the Assets again to find and Add SoccerItemList I created in the first part of this series. Here’s a screen shot of the some imprtant SoccerItemList properties that needs to be set:
Now add a Grid in the second Row and second Column of the LayoutRoot. Set the Width of this Grid to 632, Height to 354, HorizontalAlignment and VerticalAlignment to Center, and Margin to 0,0,-27,8. Click over the Grid in the Objects and TimelinePanel and add CardsUI as its child which we created in the fourth part of this series. At last add a StackPanel and some buttons as it’s child by pasting the following Xaml:
<StackPanel x:Name="stpTimeline" Height="27" Margin="232,0,219,24"
VerticalAlignment="Bottom" Grid.Column="1" Orientation="Horizontal"
Loaded="stpTimeline_Loaded">
<Button x:Name="btnTimeline1" Content="1" Width="30" Height="30"
HorizontalAlignment="Left"
Template="{StaticResource TimelineButtonTemplate}" Click="btnTimeline1_Click" GotFocus="btnTimeline1_GotFocus"
Foreground="#FF000000"/>
<Button x:Name="btnTimeline2" Content="2"
Template="{StaticResource TimelineButtonTemplate}" Width="30" Height="30" Foreground="#FF000000" />
<Button x:Name="btnTimeline3" Content="3"
Template="{StaticResource TimelineButtonTemplate}" Foreground="#FF000000" Width="30" Height="30"/>
<Button x:Name="btnTimeline4" Height="30" Width="30"
Foreground="#FF000000"
Template="{StaticResource TimelineButtonTemplate}" Content="4"/>
<Button x:Name="btnTimeline5" Content="5"
Template="{StaticResource TimelineButtonTemplate}" Width="30" Height="30" Foreground="#FF000000"/>
<Button x:Name="btnTimeline6" Content="6"
Template="{StaticResource TimelineButtonTemplate}" Foreground="#FF000000" Width="30" Height="30"/>
</StackPanel>
By now you should have UI like the following:
That’s it for now. In the next part I’ll explain and show you other functionalities which needed to be implemented in order to complete the creation of this UserControl. Hope you’ve enjoyed the stuff I showed you so far.
