June 2009 - Posts
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.
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.
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.
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.
Microsoft Day @ Dhaka will be held 20th of this month. This event is specially dedicated to Microsoft technology professionals and students.
Check out http://msdnbangladesh.net/content/msday.aspx for more information . I'll be speaking on the basics of Silverlight development.
My presentation will be mixture of the basics and features of Silverlight 2 and 3. I'll upload demo and slides of my presentation in my future post.