Introduction
This is the fourth part of my NikeClone series. In the previous part we addes some code in the btnLogin’s Click event and created a StyledSearchTextBox and template for the search buttons. In this part I’ll show you how create CardsUI.
Adding UserControl In The Project
Go to the project menu and select Add New Item to add a new UserControl to your project. Name It CardsUI. Select the LayoutRoot in the Objects and Timeline panel. Here’s the Xaml for adding three Columns and three Rows:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.342*"/>
<ColumnDefinition Width="0.334*"/>
<ColumnDefinition Width="0.323*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.315*"/>
<RowDefinition Height="0.333*"/>
<RowDefinition Height="0.352*"/>
</Grid.RowDefinitions>
You should have three columns and three Rows added to your LayoutRoot of CardsUI. Add nine paths to the LayoutRoot. Since you create three Columns and three Rows, It will be possible for you to add three Items on each row. Paste the following Xaml to add Paths to your LayoutRoot:
<Path x:Name="card1" Stretch="Fill"
Data="F1 M 991.463,367.509L 1374.47,367.509C 1379.99,367.509 1384.47,
371.986 1384.47,377.509L 1384.47,503.001C 1384.47,508.524 1379.99,
513.001 1374.47,513.001L 991.463,
513.001C 985.94,513.001 981.462,508.524 981.462,
503.001L 981.462,377.509C 981.462,371.986 985.94,367.509 991.463,367.509 Z "
UseLayoutRounding="False" Margin="0,0,0,0">
<Path.Fill>
<LinearGradientBrush StartPoint="-1.96885e-006,0.500025"
EndPoint="0.999998,0.500025">
<GradientStop Color="#FFABACAC" Offset="0"/>
<GradientStop Color="#FF4F5050" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
<Path x:Name="card2" Stretch="Fill"
Data="F1 M 596.996,367.499L 969.107,367.499C 974.629,367.499 979.107,371.977 979.107,
377.5L 979.107,503.001C 979.107,508.524 974.629,513.001 969.107,
513.001L 596.996,513.001C 591.473,513.001 586.996,508.524 586.996,503.001L 586.996,
377.5C 586.996,371.977 591.473,367.499 596.996,367.499 Z "
Grid.Column="1" UseLayoutRounding="False" Margin="0,0,0,0">
<Path.Fill>
<LinearGradientBrush StartPoint="-4.20277e-006,0.500038"
EndPoint="0.999994,0.500038">
<GradientStop Color="#FFABACAC" Offset="0"/>
<GradientStop Color="#FF4F5050" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
<Path x:Name="card3" Stretch="Fill"
Data="F1 M 234.055,368.003L 574.956,368.003C 580.478,368.003 584.956,
372.48 584.956,378.003L 584.956,503.001C 584.956,508.524 580.478,
513.001 574.956,513.001L 234.055,513.001C 228.532,513.001 224.055,
508.524 224.055,503.001L 224.055,378.003C 224.055,372.48 228.532,368.003 234.055,368.003 Z "
Grid.Column="2" Margin="0,0,0,0" UseLayoutRounding="False" d:LayoutOverrides="Height">
<Path.Fill>
<LinearGradientBrush StartPoint="-4.73533e-006,0.50003"
EndPoint="0.999995,0.50003">
<GradientStop Color="#FFABACAC" Offset="0"/>
<GradientStop Color="#FF4F5050" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
<Path x:Name="card4" 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,3,0,0" UseLayoutRounding="False" VerticalAlignment="Stretch" Grid.Row="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>
<Path x:Name="cards5" 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,3,0,0" UseLayoutRounding="False" VerticalAlignment="Stretch"
Grid.Column="1" Grid.Row="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>
<Path x:Name="cards6" 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,3,0,0"
UseLayoutRounding="False" Grid.Column="2" Grid.Row="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>
<Path x:Name="cards7" 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,3,0,0" UseLayoutRounding="False" Grid.Row="2">
<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>
<Path x:Name="cards8" 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,3,0,0" UseLayoutRounding="False" Grid.Column="1" Grid.Row="2">
<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>
<Path x:Name="cards9" 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,3,0,0" UseLayoutRounding="False" Grid.Column="2" Grid.Row="2">
<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>
Now add 9 Images to exactly like the 9 paths. Three Images per row. Here’s the Xaml:
<Image x:Name="img1" Margin="0,0,0,0" Source="Images/Mercurial Vapor.jpg" Stretch="Fill"
d:LayoutOverrides="HorizontalAlignment" OpacityMask="#16000000"
MouseLeftButtonDown="img1_MouseLeftButtonDown"/>
<Image x:Name="img2" Margin="0,0,0,0" Grid.Column="1"
Source="Images/w48_1024.jpg" Stretch="Fill"
OpacityMask="#28000000" Grid.ColumnSpan="1" Grid.RowSpan="1"
VerticalAlignment="Bottom" MouseLeftButtonDown="img2_MouseLeftButtonDown"/>
<Image x:Name="img3" Margin="0,0,0,0" Grid.Column="2"
Source="Images/nike5_06.jpg" Stretch="Fill"
OpacityMask="#14000000"
MouseLeftButtonDown="img3_MouseLeftButtonDown"/>
<Image x:Name="img4" Margin="0,0,0,0" Grid.Row="1"
Source="Images/odo12.jpg" Stretch="Fill"
VerticalAlignment="Stretch" Height="Auto" Width="Auto"
OpacityMask="#08000000"
MouseLeftButtonDown="img4_MouseLeftButtonDown"/>
<Image x:Name="img5" Margin="0,0,0,0" Grid.Column="1" Grid.Row="1"
Source="Images/eng2.jpg"
Stretch="Fill" Width="Auto" Height="Auto"
VerticalAlignment="Top" HorizontalAlignment="Stretch"
OpacityMask="#08000000"
MouseLeftButtonDown="img5_MouseLeftButtonDown"/>
<Image x:Name="img6" Margin="0,0,0,0" Grid.Column="2" Grid.Row="1"
Source="Images/mb1.jpg"
Stretch="Fill" Width="Auto" Height="Auto" VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
OpacityMask="#06000000"
MouseLeftButtonDown="img6_MouseLeftButtonDown"/>
<Image x:Name="img7" Margin="0,0,0,0" Grid.Row="2"
Source="Images/nike5_01.jpg" Stretch="Fill"
Height="Auto" VerticalAlignment="Stretch" Width="Auto" OpacityMask="#08000000"
MouseLeftButtonDown="img7_MouseLeftButtonDown"/>
<Image x:Name="img8" Margin="0,0,0,0" Grid.Column="1" Grid.Row="2"
Source="Images/nike5_04.jpg"
Stretch="Fill" Width="Auto" Height="Auto" VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
OpacityMask="#08000000"
MouseLeftButtonDown="img8_MouseLeftButtonDown"/>
<Image x:Name="img9" Margin="0,0,0,0" Grid.Column="2" Grid.Row="2"
Source="Images/eng1.jpg"
Stretch="Fill" VerticalAlignment="Stretch" Width="Auto" Height="Auto"
HorizontalAlignment="Stretch"
OpacityMask="#06000000"
MouseLeftButtonDown="img9_MouseLeftButtonDown"/>
If you look carefully at the above Xaml you’ll see that I’ve set the Opacitymask for every Image. To do this select the Images one by one set the brush of the OpacityMask to SolidColorBrush and reduce the Alpha value to 9%. you’ll soon know the reason behind this.
There’s also MouseEnter and MouseLeftButtonDown event for each Image. You need to add some code behind for these events. We will come to this topic after adding some VSM.
Note : There’s two ways of adding event methods in code behind. One is from Blend by switching to the Events view in the Properties panel and the other way is from Visual Studio. You need to just right click over the event name you assinged and select Navigate to Event Handler.
Adding VisualState To The UserControl
VisualState represents visual appearance of the control when it is in a specific state. This class has a Storyboard property which changes the appearance of the control.
To add VisualState to the CardsUI Switch to the States pane and Add state group:
This will add something like the screen shot below in the States pane:
Set the Default transitiion to 0.4 s. Click over the Add + sign just after the VisualStateGroup:
This will add a State in the States pane. Name the State Normal and then create another State by following the same process and name it Mouse Over. Click over the + sign just next to the MouseOver state:
Select MouseOver –>Normal and set the transition duration. Also create 9 More States and name those Pressed,Pressed2,Pressed3,Pressed4 etc.
You can see in above screen shot that I’ve set the Default transitions and MouseOver transition to 4. Now with img1(first image in the first row and first column) selected in the Objects and Timeline panel change the Alpha value of the Opacity Mask to 100.
Do the same for all the Images by selecting them in the Objects and Timeline panel one by one. The Idea is, this MouseOver effect will be applied to all Images when mouse is over them.
Now Select the Pressed State in the States panel and in the Objects and Timeline panel select img1. In the properties panel set the RowSpan to 4 and ColumnSpan to 4 to see the Image in the entire area of the LayoutRoot(Grid which we are using as a root element).
Select Pressed2 in the States pane and img2 in Objects and Timeline. Set the RowSpan to 3 and column span to 3.
Select Pressed3 in the States pane and img3 in the Objects and Timeline. Set the RowSpan to 3 and ColumnSpan to 3.
Select Pressed4 in States pane and Iimg4 in the Objects and Timeline. Set the Grid.RowSpan to 3 and Grid.ColumnSpan to 3.
Select Pressed5 In the States Pane and img5 in the Objects and Timeline. Set the Grid.RowSpan to 3 and Grid.ColumnSpan to 3.
Select Pressed6, Pressed7, Pressed8 and Pressed9 for img6,img7,img8 and img 9 and set the Grid.RowSpan to 3 and Grid.ColumnSpan to 3 of each image for each state. I mean you have to do it one by one. For example selecting a State in the States pane and element in the Objects and Timeline and then set the Grid.RowSpan and Grid.ColumnSpan.
At this point we’ve finished adding VSM from Blend.
Adding Procedural Code For The Events
Now we need to add some C# code for the events we defined for our Images. In Blend Switch to the Events view in the Properties panel and double click over the img1_MouseLeftButtonDown:
This will add the MouseLeftButtonDown Event in the Code Behind.
private void img1_MouseLeftButtonDown(object sender,
System.Windows.Input.MouseButtonEventArgs e)
{
}
We need to add a code to move between states. When mouse button will be down Image will be shown in the entire area of LayoutRoot(Grid). VisualStateManger Class manages states and the logic for transitioning between states of controls. There’s a GoToState() method of VisualStateManager Class, which is a static method. We will call this inside the event handler for moving between states. Let’s call this method.
private void img1_MouseLeftButtonDown(object sender,
System.Windows.Input.MouseButtonEventArgs e)
{
VisualStateManager.GoToState(this,"Pressed",false);
}
This method takes three parameter the first one is the control to transition between states, the second one takes type of string to add state name and third one takes boolean, true to use a visual transition to transition between states. Otherwise, false. In this case it is false cause I’m not using any transition on MouseLeftButtonDown.
Here’s the rest of the code for all the Images MuseLeftButtonDown event:
private void img2_MouseLeftButtonDown(object sender,
System.Windows.Input.MouseButtonEventArgs e)
{
VisualStateManager.GoToState(this,"Pressed2",false);
}
private void img3_MouseLeftButtonDown(object sender,
System.Windows.Input.MouseButtonEventArgs e)
{
VisualStateManager.GoToState(this,"Pressed3",false);
}
private void img4_MouseLeftButtonDown(object sender,
System.Windows.Input.MouseButtonEventArgs e)
{
VisualStateManager.GoToState(this,"Pressed4",false);
}
private void img5_MouseLeftButtonDown(object sender,
System.Windows.Input.MouseButtonEventArgs e)
{
VisualStateManager.GoToState(this,"Pressed5",false);
}
private void img6_MouseLeftButtonDown(object sender,
System.Windows.Input.MouseButtonEventArgs e)
{
VisualStateManager.GoToState(this,"Pressed6",false);
}
private void img7_MouseLeftButtonDown(object sender,
System.Windows.Input.MouseButtonEventArgs e)
{
VisualStateManager.GoToState(this,"Pressed7",false);
}
private void img8_MouseLeftButtonDown(object sender,
System.Windows.Input.MouseButtonEventArgs e)
{
VisualStateManager.GoToState(this,"Pressed8",false);
}
private void img9_MouseLeftButtonDown(object sender,
System.Windows.Input.MouseButtonEventArgs e)
{
VisualStateManager.GoToState(this,"Pressed9",false);
}
Now switch to the design view again and add this define these events for LayoutRoot:
You can see in the above screen shot that I’ve defined two events for LayoutRoot. MouseEnter and MouseLeave. Double click them one by one to switch to the code behind add some logic in the code behind. Call the Static GoToState() method again.
private void LayoutRoot_MouseEnter(object sender,
System.Windows.Input.MouseEventArgs e)
{
VisualStateManager.GoToState(this,"MouseOver",true);
}
In the above code I’ve again called static GoToState() method but this time our state is MouseOver and we’re using transition that’s why the third parameter is true.
Here’s the MouseLeave event :
private void LayoutRoot_MouseLeave(object sender,
System.Windows.Input.MouseEventArgs e)
{
VisualStateManager.GoToState(this,"Normal",true);
}
For MouseLeave event I’ve passed the Normal in the second parameter of the GoToState method and also the third parameter is true to add a little transition when control’s state will change from MouseOver to Normal.
That’s all for now. In the next part of the NikeClone series we’ll create an ExpandableMenu and fix the Background of the maine page of NikeClone. Hope you’ve enjoyed this part of NikeClone series.
