Faisal's Blog

Creating NikeClone With Silverlight Part-5

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.

Creating NikeClone With Silverlight Part-4

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.

Creating NikeClone With Silverlight Part-3

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"