Welcome to WindowsClient.net | My Blog | Sign in | Join

Faisal's Blog

Sponsors





  • advertise here

Articles

Blogroll

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:

ExpandableMenuInBlendsDesignView

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 :

ApplyStyleFromBlend

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:

ResourcesView

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:

FinishedExpandableMenu

 

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 :

BackgroundUI

In the next part of the NikeClone series we’ll delve into the creation of UITemplates Control.

Shout it
Posted: Jul 03 2009, 01:52 PM by ilves | with 1 comment(s)
Filed under:

Comments

Sanjeev Agarwal said:

Daily tech links for .net and related technologies - July 5-8, 2009 Web Development The MVC in JavaScriptMVC

# July 7, 2009 5:50 AM
Leave a Comment

(required) 

(required) 

(optional)

(required)