July 2009 - Posts
With the invention of Silverlight 3 Microsoft introduces the RIA Services which have given a new dimension to the traditional n-tier application pattern. With this pattern you can write application logic that runs on the mid-tier and controls access to data for queries, changes and custom operations. You can also provide end to end support for common tasks such as data validation, authentication and roles by integrating with Silverlight components on the client and ASP.NET on the mid-tier. There’s a great walkthrough video on RIA Services by Tim Heuer. This article is based on Tim’s walkthrough with just a little bit of improvisation. More
Introduction
Welcome to the part seven of NikeClone series. In the last part I showed you how to design the UItemplates UserControl. In this part I’ll explain the rest of the functionality of UITemplates and how they are implemented.
Starting The Implementation
So far our UI is looking something like the screen shot below:
You can see in the above screen shot you can see that there’s a Menu at the left in the first column of the Grid and a TimelineUI(Which consists six buttons inside a StackPanel) which will change it’s state to pressed with the animated slide show of Images. Hare’s a screen shot of the TimelineUI when app is running:
Here’s the two templates for these Buttons. One for Normal and the other for Pressed State.
Here’s the template form Normal State:
<ControlTemplate x:Key="TimelineButtonTemplate"
TargetType="Button">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="00:00:00.3000000"/>
<vsm:VisualTransition From="Normal" GeneratedDuration="00:00:00.3000000" To="MouseOver"/>
<vsm:VisualTransition From="MouseOver" GeneratedDuration="00:00:00.3000000" To="Normal"/>
<vsm:VisualTransition From="Pressed" GeneratedDuration="00:00:00.3000000" To="Normal"/>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="MouseOver">
<Storyboard d:ShouldSerialize="False"/>
</vsm:VisualState>
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00"
Duration="00:00:00.0010000" Storyboard.TargetName="TimelineBG"
Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="00:00:00" Value="#FFFFFFFF"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Duration="00:00:00.0010000" Storyboard.TargetName="TimelineBG"
Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Offset)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.728"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00"
Duration="00:00:00.0010000" Storyboard.TargetName="TimelineBG"
Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="00:00:00" Value="#FF3F3F3F"/>
</ColorAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000"
Storyboard.TargetName="TimelineBG"
Storyboard.TargetProperty="(Shape.Fill).(LinearGradientBrush.StartPoint)">
<EasingPointKeyFrame KeyTime="00:00:00" Value="0.532,-1.133"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000"
Storyboard.TargetName="TimelineBG" Storyboard.TargetProperty="(Shape.Fill).(LinearGradientBrush.EndPoint)">
<EasingPointKeyFrame KeyTime="00:00:00" Value="0.529,1.778"/>
</PointAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Duration="00:00:00.0010000" Storyboard.TargetName="TimelineBG"
Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.531"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled"/>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Unfocused"/>
<vsm:VisualState x:Name="Focused">
<Storyboard d:ShouldSerialize="False"/>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Path x:Name="TimelineBG" Height="43" 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="144.2">
<Path.Fill>
<LinearGradientBrush StartPoint="7.82502e-008,0.499998"
EndPoint="1,0.499998">
<GradientStop Color="#FF2E343A" Offset="1"/>
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#FFAFAFAF" Offset="0.517"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
<Border Margin="0,0,0,0" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF000000"/>
<GradientStop Color="#FF000000" Offset="1"/>
<GradientStop Color="#FFFFFFFF" Offset="0.53"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Grid>
<ContentPresenter Margin="0,0,0,0" HorizontalAlignment="Center"
VerticalAlignment="Center" Content="{TemplateBinding Content}"/>
</Grid>
</Border>
</Grid>
</ControlTemplate>
Here the template for the Pressed State:
<ControlTemplate x:Key="TimelineSelectedButtonTemplate" TargetType="Button">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="00:00:00.3000000"/>
<vsm:VisualTransition From="Normal" GeneratedDuration="00:00:00.3000000"
To="MouseOver"/>
<vsm:VisualTransition From="MouseOver" GeneratedDuration="00:00:00.3000000"
To="Normal"/>
<vsm:VisualTransition From="Pressed" 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="TimelineBG"
Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="00:00:00" Value="#FF0E5EAF"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000"
Storyboard.TargetName="TimelineBG"
Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.513"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000"
Storyboard.TargetName="TimelineBG"
Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="00:00:00" Value="#FF000000"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000"
Storyboard.TargetName="TimelineBG"
Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="00:00:00" Value="#FFFFFFFF"/>
</ColorAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000"
Storyboard.TargetName="TimelineBG"
Storyboard.TargetProperty="(Shape.Fill).(LinearGradientBrush.EndPoint)">
<EasingPointKeyFrame KeyTime="00:00:00" Value="0.076,1.394"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000"
Storyboard.TargetName="TimelineBG"
Storyboard.TargetProperty="(Shape.Fill).(LinearGradientBrush.StartPoint)">
<EasingPointKeyFrame KeyTime="00:00:00" Value="0.071,-0.54"/>
</PointAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00"
Duration="00:00:00.0010000" Storyboard.TargetName="TimelineBG"
Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="00:00:00" Value="#FF4B4E51"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled"/>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Unfocused"/>
<vsm:VisualState x:Name="Focused">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000"
Storyboard.TargetName="TimelineBG"
Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="00:00:00" Value="#FF103963"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Path x:Name="TimelineBG" Height="43" 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="144.2">
<Path.Fill>
<LinearGradientBrush StartPoint="0.506,-1.247" EndPoint="0.501,2.177">
<GradientStop Color="#FF454545" Offset="0.636"/>
<GradientStop Color="#FF3F3F3F" Offset="0.351"/>
<GradientStop Color="#FFFFFFFF" Offset="0.497"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
<Border Margin="0,0,0,0" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF000000"/>
<GradientStop Color="#FF000000" Offset="1"/>
<GradientStop Color="#FFFFFFFF" Offset="0.53"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Grid>
<ContentPresenter Margin="0,0,0,0" HorizontalAlignment="Center"
VerticalAlignment="Center" Content="{TemplateBinding Content}"/>
</Grid>
</Border>
</Grid>
</ControlTemplate>
We need to add an Image just behind the TimeLineUI. Source of this Image will be changed at a specified interval. Select the LayoutRoot in the Objects and Timeline panel and add an Image. Name the Image imgMain. RightClick over the Image and change the Order by selecting Order->Send to Back.
Switching To The Code Behind
Switch to the UITemplates.xaml.cs to add some procedural code. Add these three namspaces:
using System.Windows.Media.Imaging;
using System.Windows.Threading;
using System.Collections.ObjectModel;
Declare some private member variables. At first create a new instance of DispatcherTimer by declaring something like the code below:
private DispatcherTimer timer = newDispatcherTimer();
Now declare an ObservableCollection of string somehing like this:
private ObservableCollection<string> _images=
new ObservableCollection<string>();
Declare another variable to set the default value of index:
private int _currentIndex = 0;
Now create a Method named SetImageSource which takes a parameter of string to pass the name of the image:
private void SetImageSource(string imageName)
{
string name = "Images/" + imageName;
BitmapImage bmi = new BitmapImage(new Uri(name, UriKind.Relative));
imgMain.Source = bmi;
}
Write another method to initialize images for the slide show and call the SetImageSource method from this method:
private void InitializeImages()
{
_images.Add("1.jpg");
_images.Add("2.jpg");
_images.Add("3.jpg");
_images.Add("4.jpg");
_images.Add("5.jpg");
_images.Add("6.jpg");
SetImageSource(_images[_currentIndex]);
}
You can see in the method above that SetImageSource method has been called from this method and the _images which is a ObservableCollection of string has been passed as its argument. Also the index has been set by passing the _currentIndex .
Creating SetStates Method For State Switching
We now need to write a method where the logic for changing the states of the buttons which has been placed inside TimelineUI(StackPanel with six Buttons). Here it is:
private void SetStates()
{
switch(_currentIndex)
{
case 0:
VisualStateManager.GoToState(this.btnTimeline1,"Pressed",true);
VisualStateManager.GoToState(this.btnTimeline2,"Normal",true);
VisualStateManager.GoToState(this.btnTimeline3,"Normal",true);
VisualStateManager.GoToState(this.btnTimeline4,"Normal",true);
VisualStateManager.GoToState(this.btnTimeline5,"Normal",true);
VisualStateManager.GoToState(this.btnTimeline6,"Normal",true);
break;
case 1 :
VisualStateManager.GoToState(this.btnTimeline2,"Pressed",true);
VisualStateManager.GoToState(this.btnTimeline1,"Normal",true);
VisualStateManager.GoToState(this.btnTimeline3,"Normal",true);
VisualStateManager.GoToState(this.btnTimeline4,"Normal",true);
VisualStateManager.GoToState(this.btnTimeline5,"Normal",true);
VisualStateManager.GoToState(this.btnTimeline6,"Normal",true);
break;
case 2 :
VisualStateManager.GoToState(this.btnTimeline3,"Pressed",true);
VisualStateManager.GoToState(this.btnTimeline1,"Normal",true);
VisualStateManager.GoToState(this.btnTimeline2,"Normal",true);
VisualStateManager.GoToState(this.btnTimeline4,"Normal",true);
VisualStateManager.GoToState(this.btnTimeline5,"Normal",true);
VisualStateManager.GoToState(this.btnTimeline6,"Normal",true);
break;
case 3 :
VisualStateManager.GoToState(this.btnTimeline4,"Pressed",true);
VisualStateManager.GoToState(this.btnTimeline1,"Normal",true);
VisualStateManager.GoToState(this.btnTimeline2,"Normal",true);
VisualStateManager.GoToState(this.btnTimeline3,"Normal",true);
VisualStateManager.GoToState(this.btnTimeline5,"Normal",true);
VisualStateManager.GoToState(this.btnTimeline6,"Normal",true);
break;
case 4:
VisualStateManager.GoToState(this.btnTimeline5,"Pressed",true);
VisualStateManager.GoToState(this.btnTimeline1,"Normal",true);
VisualStateManager.GoToState(this.btnTimeline1,"Normal",true);
VisualStateManager.GoToState(this.btnTimeline3,"Normal",true);
VisualStateManager.GoToState(this.btnTimeline4,"Normal",true);
VisualStateManager.GoToState(this.btnTimeline6,"Normal",true);
break;
case 5 :
VisualStateManager.GoToState(this.btnTimeline6,"Pressed",true);
VisualStateManager.GoToState(this.btnTimeline1,"Normal",true);
VisualStateManager.GoToState(this.btnTimeline2,"Normal",true);
VisualStateManager.GoToState(this.btnTimeline3,"Normal",true);
VisualStateManager.GoToState(this.btnTimeline4,"Normal",true);
VisualStateManager.GoToState(this.btnTimeline5,"Normal",true);
break;
default :
VisualStateManager.GoToState(this.btnTimeline1,"Normal",true);
VisualStateManager.GoToState(this.btnTimeline2,"Normal",true);
VisualStateManager.GoToState(this.btnTimeline3,"Normal",true);
VisualStateManager.GoToState(this.btnTimeline4,"Normal",true);
VisualStateManager.GoToState(this.btnTimeline5,"Normal",true);
VisualStateManager.GoToState(this.btnTimeline6,"Normal",true);
break;
}
}
Define The Animation for SlideShow
Switch to the Xaml View in Blend and Add these two animation inside the <UserControl.Resources></UserControl.Resources> section by pasting the following Xaml:
<Storyboard x:Name="FadeOutAnimation"
Completed="FadeOutAnimation_Completed">
<DoubleAnimation Duration="00:00:00.50" From="5" To="0"
Storyboard.TargetProperty="Opacity" Storyboard.TargetName="imgMain" />
</Storyboard>
<Storyboard x:Name="FadeInAnimation">
<DoubleAnimation Duration="00:00:00.50" From="0" To="5"
Storyboard.TargetProperty="Opacity" Storyboard.TargetName="imgMain" />
</Storyboard>
The Above two Storyboards are for fade in and out of images. Note that the above two animations has different From and To value. For the Completed event of the FadeOutAnimation add the code below:
void FadeOutAnimation_Completed(object sender, EventArgs e)
{
SetImageSource(_images[_currentIndex]);
FadeInAnimation.Begin();
}
Adding Tick EventHandler
Switch to the code behind and add a Tick event for the Dispatcher by pasting the following code:
private void dispatcher_Tick(object sender,EventArgs e)
{
_currentIndex++;
if (_currentIndex == _images.Count)
{
_currentIndex= 0;
}
SetStates();
FadeOutAnimation.Begin();
}
SetStates() method and the Begin method of FadeOutAnimation has been called inside this event. Switch to the Xaml View in Blend and select the UITemplates and then in the Properties panel switch to the events view and write StartTimer in the Loaded textbox.
Double click over the StartTimer text. This will take you to the code behind in blend and also add a StartTimer Routed event. Here’s that event:
public void StartTimer(object sender, RoutedEventArgs e)
{
InitializeImages();
timer.Interval = TimeSpan.FromSeconds(4);
timer.Tick+=new EventHandler(dispatcher_Tick);
timer.Start();
}
Inside this Routed event I’ve called the IntializeImages() method and then set the interval of DispatcherTimer, Attach the Tick event of DispatcherTimer and at last called the Start() method to start the animation. Now run the app to test the Animation. You should see something like the screen shots below :
Adding Animation For The ExpandableMenu
Create a new Storyboard by clicking over the + sign in the Objects and Timeline panel:
Name the Storyboard sbExpMenu. Select ExpandableMenu in the Objects and Timeline panel. Drag the playhead position to 5 seconds. In the properties panel set the Height of the ExpandableMenu to 270. Create another Storyboard by following the same process. Name the Storyboard sbExpMenuCollapsed. Select Expandablemenu in the Objects and Timeline panel and drag the playhead position to 5 seconds. Set the Height of the ExpandableMenu to 0. Drag back the playhead position to 0 secons and set the Height to 270 in the properties panel. Close the Storyboard and select btnItemExpander. Switch to the Events view in the properties panel and just after the Click textbox write the name of your button’s click method. Name it btnItemExpander_Click and double click over it to switch to the code behind.
Here’s the code for the btnItemExpander Click event:
private void btnItemExpander_Click(object sender, System.Windows.RoutedEventArgs e)
{
if(expandableMenu.Height==0)
{
expandableMenu.Height=270;
sbExpMenu.Begin();
sbMenuTop.Begin();
}
else
{
sbExpMenuCollapsed.Begin();
sbCloseMenuTop.Begin();
}
}
Here I have set a condition with if statement to expand and collapse the ExpandableMenu. First I checked out whether the Height of the ExpandableMenu. if it is 0 then I set a condition to set it to 270 and then called the Begin() method of sbExpMenu and sbMenuTop Storyboard(ou’ll know soon about sbMenuTop). Otherwise I called the sbExpMenuCollapsed Storyboard’s Begin() method and SbCloseMenuTop’s Begin() method to collapse the ExpandableMenu and the HyperlinkButton over it which is ExpandableMenu’s header(btnMenuHeader).
The Idea is if I click over the btnItemExpander both btnMenuHeader and ExpandableMenu will expand their size. Clicking over the btnItemExpander again will collapse both of them.
Here’s sbMenuTop Storyboard settings in Blend:
You can see in the above screen shot that the plathead position is at 2 seconds and the Width of the btnMenuHeader is 174. Here’s the Xaml :
<Storyboard x:Name="sbMenuTop">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="btnmenuHeader"
Storyboard.TargetProperty="(FrameworkElement.Width)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="175"
KeySpline="0,0.430999994277954,1,1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
Here’s the settings for sbCloseMenuTop Storyboard:
Again in the above screen shot the playhead position lastly at 2 seconds but this time the Width hase been set to 0 and when you drag the playhead position to 0, you’ll be able to see the Width 175 in the properties panel. That means It’ll do the opposite of sbMenuTop and help us to collapse the btnMenuHeader. Here’s the Xaml:
<Storyboard x:Name="sbCloseMenuTop">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="btnmenuHeader"
Storyboard.TargetProperty="(FrameworkElement.Width)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="175"/>
<EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
At this point we have finished adding Animation functionality for our ExpandableMenu.
Adding Animation For The StyledSearchTextBox
To implement animation functionality for our StyledSearchTextBox we need to add two more Storyboards. I’m not going into details of how to create Storyboards this time. I’m assuming so far you’ve learnt a lot about Storybaords.
So just paste the Xaml in the <UserControl.Resources> </UserControl.Resources> section of the UITemplates UserControl :
<Storyboard x:Name="sbStyledSearch">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="styledSearchTextBox"
Storyboard.TargetProperty="(FrameworkElement.Width)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<EasingDoubleKeyFrame KeyTime="00:00:00.7000000" Value="291"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="sbStyledSearchCollapsed">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="styledSearchTextBox"
Storyboard.TargetProperty="(FrameworkElement.Width)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="291"/>
<EasingDoubleKeyFrame KeyTime="00:00:00.7000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
Select btnFrontSearch and switch to the Events view in the properties panel to define Click event for the btnFrontSearch. Here’s the Event:
private void btnfrontSearch_Click(object sender,
System.Windows.RoutedEventArgs e)
{
// TODO: Add event handler implementation here.
if (btnBackSearch.Visibility == Visibility.Collapsed)
{
btnBackSearch.Visibility = Visibility.Visible;
btnfrontSearch.Visibility = Visibility.Collapsed;
sbStyledSearch.Begin();
}
else
{
btnBackSearch.Visibility = Visibility.Collapsed;
}
}
In the above event handler first I checked out whether btnBackSearch’s Visible property is Collapsed or not. If it Collapsed then I set a condition to make it Visible and ser the btnFrontSearch’s Visibility property to Collapsed and after this I called sbStyledSearch Storyboard’s Begin() method. Otherwise btnBackSearch’s property will be Collapsed.
Again the idea here is similar like the ExpandableMenu. Where we set a condition inside click event to expand and collapse the btnMenuHeader and ExpandableMenu. For this case I’ve played a little with the Visibility property of both the btnFrontSearch and btnBackSearch. Cause they were placed in the same position of the LayoutRoot(Grid) and Only one of them were visible. By default btnBackSearch was not Visible. The idea here is when I click over the btnFrontSearch the btnBackSearch will become visible and btnFrontSearch will be out of the view with its property turned into Collapsed at Run time. Also The StyledSearchTextBox will be animated to increase it’s Width. By clicking over the btnBackSearch(Which will be visible after clicking over the btnFrontSearch) we can bring the btnFrontSearch again into view and decrease the Width of the StyledSearchTextBox to make it invisible again.
Adding Animation For The StpTimeline
StpTimeline is a StackPanel we added for the six Buttons which will change it’s state to Pressed automatically with slide show. Here we’re going to add two storyboards for making it visible and invisible on MouseEnter and MouseLeave to give our application a nice effect.
Paste the following Xaml in the <UserControl.Resources></UserControl.Resources> section of the UITemplates UserControl:
<Storyboard x:Name="sbTimeline">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="stpTimeline"
Storyboard.TargetProperty="(FrameworkElement.Height)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<EasingDoubleKeyFrame KeyTime="00:00:00.4000000" Value="27"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="sbTimeline2">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="stpTimeline"
Storyboard.TargetProperty="(FrameworkElement.Height)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="27"/>
<EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
The first Storyboard which is sbTimeline changes the Height to 0 when playhead position of the Storyboard is in 0 second and when when playhead position is in 4 seconds the Height has been set to 27 . In the second Storyboard which is sbTimeline2 when the playhead position is at 0 the Heisght has been set to 27 and when it is in 4 seconds height has been set to 0.
Adding MouseEnter And MouseLeave Event
In the objects and Timeline panel select imgMain :
In the properties panel switch to the Events view and define a MouseEnter event for imgMain:
Double click over imgMain_MouseEnter to switch to the code behind. Add this code for the MouseEnter event of the imgMain:
private void imgMain_MouseEnter(object sender,
System.Windows.Input.MouseEventArgs e)
{
if(stpTimeline.Height==0)
{
stpTimeline.Height=27;
sbTimeline.Begin();
}
}
Logic is really simple for this event. If height is 0 then I set it to 27 and called the Begin() method of sbTimeline Storyboard.
Select the CardsUI in the Objects and Timeline panel and define the MouseLeft event by following the previous process. Here’s the code:
private void cardUI_MouseLeave(object sender,
System.Windows.Input.MouseEventArgs e)
{
if(stpTimeline.Height==27)
{
stpTimeline.Height=0;
sbTimeline2.Begin();
}
}
For the MouseLeave I set a condition if Height is 27 then it’ll turn into 0 and called the sbTimeline2 storyboards Begin() method. At this point our NikeClone journey is finished.
After debugging the app you’ll be now able to see something like this:
If you take your mouse over the the CardsUI area of the page It will change it’s state:
And Clicking over a specific Image will help you to see it in the entire area of the CardsUI:
If you click over the Button with Nike logo at the top left you’ll be able to see this :
By clicking over the Search Button you experience this :
By clicking over the Menu’s you’ll experience something like this:
And clicking over the Login Button will bring up the LoginWindow:
Conclusion
This was just an effort to check out what Silverlight can do for us. I was really satisfied with the result though this is not a complete app by any mean but I have a plan to implement more functionality. Hope you’ve enjoyed this journey of NikeClone. Happy coding and Happy Silverlight.
Introduction
Welcome to the sixth part of my NikeClone series. In the last part I showed you how to create ExpandableMenu and Background control. In this part I’ll show you how I created UITemplates Control where I placed all the styled and templated Controls. Let’s start creating the Control.
Adding UserControl To The Project
Right click over the project template in blend and select Add New Item. In the Add New Item dialog box, select UserControl. Name the UserControl UITemplates. After adding the the UITemplates control in the project you’ll see LayoutRoot(Grid) as the parent element in the Objects and Timeline panel. Select it set the Width and Height to Auto and Background to Black. Add two rows and two columns to the LayoutRoot. Height of the rows and width of the columns should be exactly like the following:
<Grid.RowDefinitions>
<RowDefinition Height="0.533*"/>
<RowDefinition Height="0.467*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.21*"/>
<ColumnDefinition Width="0.79*"/>
</Grid.ColumnDefinitions>
Adding Some Controls Inside LayoutRoot
Add a Button in the first column and set it’s HorizontalAlignment to Right and VerticalAlignment to top. Name the Button btnItemExpander. Define a template for this button by pasting the following xaml inside the <App.Resources> section of the App.xaml page:
<ControlTemplate x:Key="NikeButtonTemplate" TargetType="Button">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="MouseOver"/>
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="Pressed"/>
<vsm:VisualState x:Name="Disabled"/>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Unfocused"/>
<vsm:VisualState x:Name="Focused"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Path x:Name="btnNikebg" Height="Auto" Stretch="Fill"
Data="F1 M 3.00003,364.744L 139.257,364.744C 140.913,364.744 142.257,
366.088 142.257,367.744L 142.257,404.744C 142.257,406.401 140.913,
407.744 139.257,407.744L 3.00003,407.744C 1.34319,
407.744 4.18673e-005,406.401 4.18673e-005,404.744L 4.18673e-005,
367.744C 4.18673e-005,366.088 1.34319,364.744 3.00003,364.744 Z "
Margin="0,0,0,0" UseLayoutRounding="False" Width="Auto">
<Path.Fill>
<LinearGradientBrush StartPoint="7.82502e-008,0.499998"
EndPoint="1,0.499998">
<GradientStop Color="#FF1C2025" Offset="0.401826"/>
<GradientStop Color="#FF2E343A" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
<Grid Margin="0,0,0,0" VerticalAlignment="Bottom">
<Path x:Name="NikeIcon" Width="64.652" Height="26"
Canvas.Left="-0.00341128" Canvas.Top="-0.0187414"
Stretch="Fill" Fill="#FFB42929"
Data="F1 M 29.4047,30.8608C 24.2633,45.083 24.2633,
55.7497 41.9883,61.555C 59.7134,67.3602 95.1634,
68.3041 172.449,50.082C 249.735,31.8597 368.856,
-5.52863 359.084,0.666077C 349.311,6.86084 210.645,
56.6386 131.489,80.1823C 52.3338,103.726 32.6898,
101.035 18.4676,93.4798C 4.24535,85.9243 -4.55505,
73.5037 2.45594,53.96C 9.46692,34.4164 32.2893,
7.74969 38.5591,3.30524C 44.8289,
-1.13916 34.5461,16.6386 29.4047,30.8608 Z "
UseLayoutRounding="False"
HorizontalAlignment="Center"
Margin="0,-1,0,7" VerticalAlignment="Center"/>
</Grid>
</Grid>
</ControlTemplate>
Apply the above template to the btnItemExpander by clicking the breadcrumb at the topleft corner of your workspace or right clicking over the btnItemExpander and navigate to EditTemplate->ApplyResource->NikeButtonTemplate :
After applying the template you’ll see your button with NIKE logo over it. Here’s a closer shot of the button:
You can also see in that there’s couple of other buttons just beneath the btnItemExpander. You’ll know soon what the really are. Now add a HyperlinkButton in the first column or column 1 of LayoutRoot(Grid which is a root element of UITemplate UserControl). Set the width of the btnMenuHeader(HyperlinkButton) to 0 and Height to 22, HorizontalAlignment to Left, VerticalAlignment to Top.
Adding Storyboards For The Controls Added So Far
Now add a Storyboard by clicking over the plus icon in the Objects and Timeline panel:
This will bring up the following dialog box:
Name the Storyboard sbMenuTop and then click OK. This will add storyboard to your project. In the Objects and Timeline panel, select btnMenuHeader. Move the playhead position to 2 seconds and change the Width of the btnMenuHeader to 174. The idea behind creating this Storyboard is when btnItemExpander will be clicked the size of btnMenuHeader will be increased and we will be able to see the header of the Menu.
Now go to the Assets in the Blend toolbox and find the ExpandableMenu you created in the previous part of this series:
Add EpandableMenu in the first column of the LayoutRoot. Set the Width to 175 and Height to 0, HorizontalAlignment to Left and VerticalAlignment to Top and margin to 0,0,22,0. Create another Storyboard and name the Storyboard anything you want. In this case it’s Storyboard1. Select ExpandableMenu in the Objects and Timeline panel and move the playhead position to 5 seconds. Change the Height of the ExpandableMenu to 270.
Create another Storyboard and select the ExpandableMenu in the Objects and Timeline. Move the playhead position to 5 seconds and set the Height of the ExpandableMenu to 0. Move back the playhead position to 0 second and set the Height of the ExpandableMenu to 270. This will help us collapsing this control with animation when it is in expand state.
Adding Search Buttons And SearchTextBox
Add a Button in the first column of the LayoutRoot. Name Button btnFrontSearch. Set the Width to 91 and Height to 30, HorizontalAlignment to Stretch,VerticalAlignment to Top and Margin to 76,1,76,0. Apply the SearchButtonTemplate which I defined in the third part of this series. Here the btnFronSearch after applying the template:
Now set the Content of btnFrontSearch to Search.
Add another Button just right over the btnfrontSerach and name this btnBacksearch. Set the property for this button exactly like the btnFrontSearch and apply the template named ButtonControlTemplate1 which I created in the third part of this series. Now set the Foregrounf of this Button to White so that the content of the btnBackSerach can be clearly visible. Also don’t forget to set the Content to Search. Here’s the btnBackSearch:
Go to the Asset in the toolbox and find StyledSearchTextBox to add it in the second column of the LayoutRoot. Set the Width of the StyledSearchTextBox to 0, Height to 48, HorizontalizontalAlignment to Left, VerticalAlignment to Top and Margin to 0,0,76,0.
Adding More Storyboards
Create another Storyboard and name it anything you like. In this case it’s storyboard3. Move the playhead position to 7 seconds and set the Width property of the StyledSeachTextBox to 291. Create another Storyboard and do the reverse. Name it anything you like. In this case it is Storyboard4. Select the StyledSearchTextBox in the Objects andTimeline panel and move back the playhead position to 7 seconds and set the Width property to 0. Move back the playhead position to 0 and set the Width of the StyledSearchTextBox to 291. Again defining the second Storyboard here to serves the same purpose of collapsing back from the expand state.
Adding UserControl As Menu
Go to the Assets again to find and Add SoccerItemList I created in the first part of this series. Here’s a screen shot of the some imprtant SoccerItemList properties that needs to be set:
Now add a Grid in the second Row and second Column of the LayoutRoot. Set the Width of this Grid to 632, Height to 354, HorizontalAlignment and VerticalAlignment to Center, and Margin to 0,0,-27,8. Click over the Grid in the Objects and TimelinePanel and add CardsUI as its child which we created in the fourth part of this series. At last add a StackPanel and some buttons as it’s child by pasting the following Xaml:
<StackPanel x:Name="stpTimeline" Height="27" Margin="232,0,219,24"
VerticalAlignment="Bottom" Grid.Column="1" Orientation="Horizontal"
Loaded="stpTimeline_Loaded">
<Button x:Name="btnTimeline1" Content="1" Width="30" Height="30"
HorizontalAlignment="Left"
Template="{StaticResource TimelineButtonTemplate}" Click="btnTimeline1_Click" GotFocus="btnTimeline1_GotFocus"
Foreground="#FF000000"/>
<Button x:Name="btnTimeline2" Content="2"
Template="{StaticResource TimelineButtonTemplate}" Width="30" Height="30" Foreground="#FF000000" />
<Button x:Name="btnTimeline3" Content="3"
Template="{StaticResource TimelineButtonTemplate}" Foreground="#FF000000" Width="30" Height="30"/>
<Button x:Name="btnTimeline4" Height="30" Width="30"
Foreground="#FF000000"
Template="{StaticResource TimelineButtonTemplate}" Content="4"/>
<Button x:Name="btnTimeline5" Content="5"
Template="{StaticResource TimelineButtonTemplate}" Width="30" Height="30" Foreground="#FF000000"/>
<Button x:Name="btnTimeline6" Content="6"
Template="{StaticResource TimelineButtonTemplate}" Foreground="#FF000000" Width="30" Height="30"/>
</StackPanel>
By now you should have UI like the following:
That’s it for now. In the next part I’ll explain and show you other functionalities which needed to be implemented in order to complete the creation of this UserControl. Hope you’ve enjoyed the stuff I showed you so far.
Introduction
This is the fifth part of my NikeClone series. In the first part I showed you how to create SoccerItemList which will serve the pupose of being a MenuControl in our main page. In the second part I showed how to create LoginWindow. In the third part I added some code in the Login button’s event handler of the soccerItemList and designed a StyledSearchTechBox and defined templates for the two search buttons and in the fourth I showed you how to create CardsUI. In this part I’ll show you how to create ExpandableMenu and fix the Background of the MainPage of NikeClone.
Starting The Project
Open the NikeCloneProject and right click over it to add a new item. Select UserControl and add a UserControl to your project. Name the UserControl ExpandableMenu. Set the Width of the ExpandableMenu(UserControl) to 223 and Height to 270. By default you’ll see that LayoutRoot is Grid. Change it to Border by deleting it from the Objects and timeline panel and add a Border from the toolbox. Here’s the completed UI in Blend’s design view:
Set the CornerRadius property of the LayoutRoot to 2,2,2,2 and BorderThinkness also to 2,2,2,2. Now set the Background for the LayourRoot to LinearGradientBrush. Value should be exactly like the following:
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF1C2025" Offset="0.496"/>
<GradientStop Color="#FF2E343A" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
Set the BorderBrush of the LayoutRoot by pasting the following Xaml:
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF1C2025" Offset="0.496"/>
<GradientStop Color="#FF2E343A" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
Now with LayoutRoot selected in the Objects and Timeline panel double click StackPanel in the toolbox to add it as a child of LayoutRoot. Name the StackPanel stpLink. Select the stpLink in the Objects and Timeline panel and add a HyperlinkButton as it’s child. Name the HyperlinkButton btnNike. Set the HorizontalAlinment to Center, VerticalAlignment to Center, Margin to 0,-1,0,5 and define a Style for this HyperlinkButton by pasting the following xaml In your Application.Resources section of App.Xaml file:
<Style x:Key="MenuButtonStyle" TargetType="HyperlinkButton">
<Setter Property="Foreground" Value="#FF73A9D8"/>
<Setter Property="Padding" Value="2,0,2,0"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="HyperlinkButton">
<Grid Cursor="{TemplateBinding Cursor}"
Background="{TemplateBinding Background}">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="UnderlineTextBlock"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="UnderlineTextBlock"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="DisabledOverlay"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</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"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<TextBlock TextAlignment="Left" VerticalAlignment="Center"
HorizontalAlignment="Center" Margin="0,0,0,0" Width="87"
FontFamily="Portable User Interface" Foreground="#FFF0530B">
<Run FontSize="12" Text="Nike."/><Run FontWeight="Bold"
FontSize="13" Text="Com"/></TextBlock>
<TextBlock x:Name="DisabledOverlay"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Visibility="Collapsed" Canvas.ZIndex="1"
Foreground="#FFAAAAAA" Text="{TemplateBinding Content}"/>
<Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1"
StrokeThickness="1" IsHitTestVisible="false" Opacity="0"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Apply this Style to the btnNike by setting the Style property in Xaml view of the Blend or VisualStudio to some thing like this:
Style="{StaticResource MenuButtonStyle}"
Another way of applying Style is from Blend by following the process shown below :
In the above screen shot you can see that I’ve just right click over the btnNike to then wen to EditTemplate->ApplyResource->MenuButtonStyle. This is the much easier way to apply Templates and Styles for your Controls.
Creating More Templates For HyperlinkButtons
Add seven more HyperlinkButton as stpLink’s child and create 7 more templates inside the App.Resources section of App.xaml file. Here’s the Xaml :
MenuButtonTemplate
<ControlTemplate x:Key="MenuButtonTemplate" TargetType="HyperlinkButton">
<Grid Cursor="{TemplateBinding Cursor}" Background="{TemplateBinding Background}">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="UnderlineTextBlock"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="UnderlineTextBlock"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="DisabledOverlay"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</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"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<TextBlock TextAlignment="Left" VerticalAlignment="Center"
HorizontalAlignment="Center" Margin="0,0,0,0" Width="87"
FontFamily="Portable User Interface" Foreground="#FFF0530B">
<Run FontSize="12" Text="Nike"/><Run FontWeight="Bold"
FontSize="13" Text="Store"/></TextBlock>
<TextBlock x:Name="DisabledOverlay"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Visibility="Collapsed" Canvas.ZIndex="1"
Foreground="#FFAAAAAA" Text="{TemplateBinding Content}"/>
<Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1"
StrokeThickness="1" IsHitTestVisible="false" Opacity="0"/>
</Grid>
</ControlTemplate>
MenuButtonTemplate2
<ControlTemplate x:Key="MenuButtonTemplate2"
TargetType="HyperlinkButton">
<Grid Cursor="{TemplateBinding Cursor}"
Background="{TemplateBinding Background}">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="UnderlineTextBlock"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="UnderlineTextBlock"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="DisabledOverlay"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</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"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<TextBlock TextAlignment="Left" VerticalAlignment="Center"
HorizontalAlignment="Center" Margin="0,0,0,0"
Width="Auto" FontFamily="Portable User Interface"
Foreground="#FFF0530B">
<Run FontSize="12" Text="Nike"/><Run
FontWeight="Bold" FontSize="13" Text="iD"/></TextBlock>
<TextBlock x:Name="DisabledOverlay"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Visibility="Collapsed" Canvas.ZIndex="1"
Foreground="#FFAAAAAA" Text="{TemplateBinding Content}"/>
<Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1"
StrokeThickness="1" IsHitTestVisible="false" Opacity="0"/>
</Grid>
</ControlTemplate>
MenuButtonTemplate3
<ControlTemplate x:Key="MenuButtonTemplate3" TargetType="HyperlinkButton">
<Grid Cursor="{TemplateBinding Cursor}"
Background="{TemplateBinding Background}">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="UnderlineTextBlock"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="UnderlineTextBlock"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="DisabledOverlay"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</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"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<TextBlock TextAlignment="Left" VerticalAlignment="Center"
HorizontalAlignment="Center" Margin="0,0,0,0"
Width="Auto" FontFamily="Portable User Interface" Foreground="#FFF0530B">
<Run FontSize="12" Text="Nike"/><Run
FontWeight="Bold" FontSize="13" Text="Basketball"/></TextBlock>
<TextBlock x:Name="DisabledOverlay"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Visibility="Collapsed" Canvas.ZIndex="1" Foreground="#FFAAAAAA"
Text="{TemplateBinding Content}"/>
<Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1"
StrokeThickness="1" IsHitTestVisible="false" Opacity="0"/>
</Grid>
</ControlTemplate>
MenuButtonTemplate4
<ControlTemplate x:Key="MenuButtonTemplate4" TargetType="HyperlinkButton">
<Grid Cursor="{TemplateBinding Cursor}" Background="{TemplateBinding Background}">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="UnderlineTextBlock"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="UnderlineTextBlock"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="DisabledOverlay"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</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"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<TextBlock TextAlignment="Left" VerticalAlignment="Center"
HorizontalAlignment="Center" Margin="0,0,0,0" Width="Auto"
FontFamily="Portable User Interface" Foreground="#FFF0530B">
<Run FontSize="12" Text="Nike"/><Run FontWeight="Bold"
FontSize="13" Text="Football"/></TextBlock>
<TextBlock x:Name="DisabledOverlay"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Visibility="Collapsed" Canvas.ZIndex="1"
Foreground="#FFAAAAAA" Text="{TemplateBinding Content}"/>
<Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1"
StrokeThickness="1" IsHitTestVisible="false" Opacity="0"/>
</Grid>
</ControlTemplate>
MenuButtonTemplate5
<ControlTemplate x:Key="MenuButtonTemplate5" TargetType="HyperlinkButton">
<Grid Cursor="{TemplateBinding Cursor}" Background="{TemplateBinding Background}">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="UnderlineTextBlock"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="UnderlineTextBlock" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="DisabledOverlay"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</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"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<TextBlock TextAlignment="Left" VerticalAlignment="Center"
HorizontalAlignment="Center" Margin="0,0,0,0"
Width="Auto"
FontFamily="Portable User Interface" Foreground="#FFF0530B">
<Run FontSize="12" Text="Nike"/><Run FontWeight="Bold"
FontSize="13" Text="+"/></TextBlock>
<TextBlock x:Name="DisabledOverlay"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Visibility="Collapsed" Canvas.ZIndex="1"
Foreground="#FFAAAAAA" Text="{TemplateBinding Content}"/>
<Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1"
StrokeThickness="1" IsHitTestVisible="false" Opacity="0"/>
</Grid>
</ControlTemplate>
MenuButtonTemplate6
<ControlTemplate x:Key="MenuButtonTemplate6" TargetType="HyperlinkButton">
<Grid Cursor="{TemplateBinding Cursor}" Background="{TemplateBinding Background}">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="UnderlineTextBlock"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="UnderlineTextBlock" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="DisabledOverlay"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</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"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<TextBlock TextAlignment="Left" VerticalAlignment="Center" HorizontalAlignment="Center"
Margin="0,0,0,0" Width="Auto" FontFamily="Portable User Interface" Foreground="#FFF0530B">
<Run FontSize="12" Text="Nike"/><Run FontWeight="Bold" FontSize="13"
Text="Sportswear"/></TextBlock>
<TextBlock x:Name="DisabledOverlay"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Visibility="Collapsed" Canvas.ZIndex="1" Foreground="#FFAAAAAA"
Text="{TemplateBinding Content}"/>
<Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1"
StrokeThickness="1" IsHitTestVisible="false" Opacity="0"/>
</Grid>
</ControlTemplate>
MenuButtonTemplate7
<ControlTemplate x:Key="MenuButtonTemplate7" TargetType="HyperlinkButton">
<Grid Cursor="{TemplateBinding Cursor}"
Background="{TemplateBinding Background}">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="UnderlineTextBlock"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="UnderlineTextBlock"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="DisabledOverlay"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</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"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<TextBlock TextAlignment="Left" VerticalAlignment="Center"
HorizontalAlignment="Center" Margin="0,0,0,0" Width="Auto"
FontFamily="Portable User Interface" Foreground="#FFF0530B">
<Run FontSize="12" Text="Nike"/><Run FontWeight="Bold"
FontSize="13" Text="Women"/></TextBlock>
<TextBlock x:Name="DisabledOverlay"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Visibility="Collapsed" Canvas.ZIndex="1" Foreground="#FFAAAAAA"
Text="{TemplateBinding Content}"/>
<Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1"
StrokeThickness="1" IsHitTestVisible="false" Opacity="0"/>
</Grid>
</ControlTemplate>
If you want to edit the Resources to tweaking the templates a little, open App.xaml and switch to the Resources view:
This will allow you to tweak the Resources whichever way you want.
Adding More HyperlinkButtons
Add seven more HyperlinkButton by pasting the following xaml :
<HyperlinkButton x:Name="btnNikeStore" HorizontalAlignment="Center"
VerticalAlignment="Center" Content="HyperlinkButton"
Template="{StaticResource MenuButtonTemplate}" Margin="0,3,-2,5"
Width="Auto"/>
<HyperlinkButton x:Name="btnNikeID" HorizontalAlignment="Center"
Margin="-41,0,0,5" Content="HyperlinkButton" VerticalAlignment="Center"
Template="{StaticResource MenuButtonTemplate2}" Width="Auto"/>
<HyperlinkButton x:Name="btnNikeBasketball" Margin="19,0,0,5"
Content="HyperlinkButton" Template="{StaticResource MenuButtonTemplate3}"
HorizontalAlignment="Center" VerticalAlignment="Center" Width="109"/>
<HyperlinkButton x:Name="btnNikeFootball" HorizontalAlignment="Center"
Margin="3,0,0,5" Content="HyperlinkButton" VerticalAlignment="Center"
Template="{StaticResource MenuButtonTemplate4}"/>
<HyperlinkButton x:Name="btnNikePlus" HorizontalAlignment="Center"
Margin="4,0,49,5" Content="HyperlinkButton" VerticalAlignment="Center"
Template="{StaticResource MenuButtonTemplate5}" Width="Auto"/>
<HyperlinkButton x:Name="btnNikeSportsWear" HorizontalAlignment="Center"
Margin="4,0,-23,5" Content="HyperlinkButton" VerticalAlignment="Center"
Template="{StaticResource MenuButtonTemplate6}"/>
<HyperlinkButton x:Name="btnNikeWomen" HorizontalAlignment="Center"
Margin="4,0,5,5" Content="HyperlinkButton" VerticalAlignment="Center"
Template="{StaticResource MenuButtonTemplate7}"/>
By now you should have UI like the screen shot below:
Creating Backrgound
Now it’s time to create Background for our MainPage. Right click over the NikeClone project template and select Add New Item. Select UserControl from the Add New Item dialog box. Name the UserControl Background. Switch to the Xaml view of Background(UserControl). You’ll see this Xaml:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignWidth="640" d:DesignHeight="480"
x:Class="NikeClone.Background"
>
<Grid x:Name="LayoutRoot"/>
</UserControl>
Remove d:DesignWidth="640" d:DesignHeight="480" from the UserControl section. Now switch to the design view again and add an Image. Set the HorizontalAlignment and VerticalAlignment to Stretch. Set the Stretch property to Fill. Set the source of the Image to bg_Tilev2 which can be found here . That’s it. You have fixed the Background for the main page. Here it is :
In the next part of the NikeClone series we’ll delve into the creation of UITemplates Control.
