Walkthrough: Edit the Navigation Button Template in Blend Designer

Intersoft ClientUI includes rich controls that can be easily styled through brushes properties, although more advanced customization such as control and template editing are supported as well. This walkthrough shows how to customize the control template of UXNavigationButton by using the designer tools available in Expression Blend.

In this walkthrough, you perform the following tasks:

Create a new Silverlight project.
Edit the control template of a navigation button using Blend designer.

Prerequisites

You need the following components to complete this walkthrough:

Microsoft Expression Blend 4

Creating New Silverlight Application and Website Project

The first step is to create a new Silverlight Application and Website project in Microsoft Expression Blend 4.

To create a new Silverlight application and Website project

Start Microsoft Expression Blend 4.
Create a new Silverlight project using the Silverlight Application + Website project template. Name the project as AddMenuItemAndSeparatorToMenuBarInBlendDesigner.

To add the resources file

In your project, create new folder with name Assets.
In Assets folder, create new folder with name Images.
In Images folder, copy the images from [Intersoft Installation Folder]\Intersoft WebUI Studio 2010 R1\Samples\SL4\ClientUI Samples\Intersoft.ClientUI.Samples.Assets\Images\Navigation.

Edit Navigation Button template in Blend Designer

To edit navigation button template by changing the animation when mouse over and pressed in Blend Designer.

Open the MainPage.xaml.
Add the UXItemsControl within the LayoutRoot.
Add the UXNavigationButton under the UXItemsControl.
Set the following properties to the UXNavigationButton control:

Property Value

Content Home

Icon Assets/Images/Home.png

TextImageRelation ImageAboveText

DisplayMode ContentAndImage

ImageHeight 50

ImageWidth 50
Edit the UXNavigationButton template by right-click on the UXNavigationButton, click Edit Template, click Edit a Copy.
Select the AnimationElement under RootElement within the Object and Timeline panel.
Select the States panel, you will see various states of UXNavigationButton.
Under Properties panel, change the background color of UXNavigationButton to any color.
Change the color for MouseOver state and Pressed state.
Add two additional UXNavigationButton as you have created on step 3.
Set the Content and Icon properties of the first UXNavigationButton to Product and Assets/Images/Products.png.
Set the Content and Icon properties of the second UXNavigationButton to Settings and Assets/Images/Settings.png.
Apply the UXNavigationButtonStyle1 to the rest of UXNavigationButton.
Run the project. This is the Pressed state of the UXNavigationButton.

This is the MouseOver of the UXNavigationButton.

Property	Value
Content	Home
Icon	Assets/Images/Home.png
TextImageRelation	ImageAboveText
DisplayMode	ContentAndImage
ImageHeight	50
ImageWidth	50

Conclusion

In this walkthrough, you have learned how to edit the UXNavigationButton template and how to apply it in Microsoft Expression Blend Designer.

Complete Code Listing

MainPage.xaml

XAML	Copy Code
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Intersoft="http://intersoft.clientui.com/schemas" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="EditNavButtonTemplate.MainPage" Width="640" Height="480"> <UserControl.Resources> <SolidColorBrush x:Key="Button_Background" Color="#FFD7D7D7"/> <SolidColorBrush x:Key="Button_Foreground" Color="#FF000000"/> <SolidColorBrush x:Key="Button_Border" Color="#FF8F8F8F"/> <LinearGradientBrush x:Key="Button_GlassBackground" EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#B2FFFFFF" Offset="0"/> <GradientStop Color="Transparent" Offset="1"/> <GradientStop Color="#99FFFFFF" Offset="0.5"/> <GradientStop Color="#4CF8F8F8" Offset="0.51"/> </LinearGradientBrush> <Color x:Key="Button_GradientStart">#FF7500B1</Color> <Color x:Key="Button_GradientEnd">#FF52F100</Color> <SolidColorBrush x:Key="Button_InnerBorder" Color="#BFFFFFFF"/> <SolidColorBrush x:Key="Button_DisabledBackground" Color="#FFFFFFFF"/> <SolidColorBrush x:Key="Button_KeyboardFocusBorder" Color="#FF747474"/> <SolidColorBrush x:Key="Button_FocusBorder" Color="#00156174"/> <Color x:Key="Button_OuterBorder_Pressed">#FF1D415C</Color> <Color x:Key="Button_GradientStart_Pressed">#FF9AD2F0</Color> <Color x:Key="Button_GradientEnd_Pressed">#FF00E7FF</Color> <Color x:Key="Button_InnerBorder_Pressed">#FF218BC1</Color> <Color x:Key="Button_FocusBorder_Pressed">#FF0092FF</Color> <Style x:Key="UXButton_Default" TargetType="Intersoft:UXButton"> <Setter Property="Background" Value="{StaticResource Button_Background}"/> <Setter Property="Foreground" Value="{StaticResource Button_Foreground}"/> <Setter Property="Padding" Value="3"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="BorderBrush" Value="{StaticResource Button_Border}"/> <Setter Property="GlassBackground" Value="{StaticResource Button_GlassBackground}"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Intersoft:UXButton"> <Grid x:Name="RootElement"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualStateGroup.Transitions> <VisualTransition GeneratedDuration="0:0:0.05"/> <VisualTransition GeneratedDuration="0:0:0.3" To="Normal"/> <VisualTransition From="MouseOver" GeneratedDuration="0:0:1" To="HighlightFocused"/> </VisualStateGroup.Transitions> <VisualState x:Name="Normal"> <Storyboard> <ColorAnimation Duration="0" To="{StaticResource Button_FocusBorder_Pressed}" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="AnimationElement" d:IsOptimized="True"/> </Storyboard> </VisualState> <VisualState x:Name="MouseOver"> <Storyboard> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="AnimationElement"/> <ColorAnimation Duration="0" To="{StaticResource Button_GradientStart}" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="AnimationElement" d:IsOptimized="True"/> <DoubleAnimation Duration="0" To="0.352" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" Storyboard.TargetName="AnimationElement" d:IsOptimized="True"/> <ColorAnimation Duration="0" To="{StaticResource Button_GradientEnd}" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="AnimationElement" d:IsOptimized="True"/> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="AnimationElement"/> <ColorAnimation Duration="0" To="{StaticResource Button_OuterBorder_Pressed}" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="AnimationElement"/> <ColorAnimation Duration="0" To="{StaticResource Button_GradientStart_Pressed}" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="AnimationElement"/> <ColorAnimation Duration="0" To="{StaticResource Button_GradientEnd}" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="AnimationElement"/> <ColorAnimation Duration="0" To="{StaticResource Button_InnerBorder_Pressed}" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="InnerBorder"/> </Storyboard> </VisualState> <VisualState x:Name="HighlightFocused"> <Storyboard AutoReverse="True" RepeatBehavior="Forever"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="AnimationElement"> <EasingDoubleKeyFrame KeyTime="0" Value="0"/> <EasingDoubleKeyFrame KeyTime="0:0:01" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Checked"> <Storyboard> <DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="AnimationElement"/> <ColorAnimation Duration="0" To="{StaticResource Button_GradientStart_Pressed}" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="AnimationElement"/> <ColorAnimation Duration="0" To="{StaticResource Button_GradientEnd_Pressed}" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="AnimationElement"/> <ColorAnimation Duration="0" To="{StaticResource Button_InnerBorder_Pressed}" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="InnerBorder"/> <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="InnerBorder"/> </Storyboard> </VisualState> <VisualState x:Name="Disabled"> <Storyboard> <DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="FocusStates"> <VisualState x:Name="Focused"> <Storyboard> <ColorAnimation Duration="0" To="{StaticResource Button_FocusBorder_Pressed}" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="FocusVisualElement"/> </Storyboard> </VisualState> <VisualState x:Name="Unfocused"/> </VisualStateGroup> <VisualStateGroup x:Name="KeyboardFocusStates"> <VisualState x:Name="KeyboardUnfocused"/> <VisualState x:Name="KeyboardFocused"> <Storyboard> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="KeyboardFocus"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border x:Name="OuterBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}"/> <Border x:Name="AnimationElement" BorderBrush="#00000000" BorderThickness="1" CornerRadius="{TemplateBinding CornerRadius}" Opacity="0"> <Border.Background> <LinearGradientBrush EndPoint="0,1" StartPoint="0,0"> <GradientStop Color="{StaticResource Button_GradientStart}" Offset="0"/> <GradientStop Color="{StaticResource Button_GradientEnd}" Offset="1"/> </LinearGradientBrush> </Border.Background> </Border> <Border x:Name="Glass" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding GlassBackground}" CornerRadius="{TemplateBinding CornerRadius}" Margin="1"/> <Border x:Name="InnerBorder" BorderBrush="{StaticResource Button_InnerBorder}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding InnerCornerRadius}" Margin="1" Visibility="{TemplateBinding InnerBorderVisibility}"/> <Intersoft:StylishLabel x:Name="StylishLabel" BorderBrush="{x:Null}" Background="{x:Null}" ContentType="{TemplateBinding DisplayMode}" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Effect="{TemplateBinding ContentEffect}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" ImageWidth="{TemplateBinding ImageWidth}" ImageSource="{TemplateBinding Icon}" ImageHeight="{TemplateBinding ImageHeight}" Margin="{TemplateBinding Padding}" Padding="3,1" TextImageRelation="{TemplateBinding TextImageRelation}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> <Border x:Name="DisabledVisualElement" Background="{StaticResource Button_DisabledBackground}" CornerRadius="{TemplateBinding CornerRadius}" IsHitTestVisible="false" Opacity="0"/> <Rectangle x:Name="KeyboardFocus" IsHitTestVisible="False" Margin="2" RadiusY="{TemplateBinding CornerRadiusDouble}" RadiusX="{TemplateBinding CornerRadiusDouble}" Stroke="{StaticResource Button_KeyboardFocusBorder}" StrokeDashArray="1 1" Visibility="Collapsed"/> <Border x:Name="FocusVisualElement" BorderBrush="{StaticResource Button_FocusBorder}" BorderThickness="1" CornerRadius="{TemplateBinding CornerRadius}" IsHitTestVisible="false"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style x:Key="UXNavigationButtonStyle1" BasedOn="{StaticResource UXButton_Default}" TargetType="Intersoft:UXNavigationButton"> <Setter Property="Background" Value="{x:Null}"/> <Setter Property="Foreground" Value="{StaticResource Button_Foreground}"/> <Setter Property="BorderBrush" Value="{x:Null}"/> <Setter Property="GlassBackground" Value="{x:Null}"/> <Setter Property="CornerRadius" Value="2"/> <Setter Property="EnableFocusAnimation" Value="False"/> <Setter Property="Cursor" Value="Hand"/> <Setter Property="InnerBorderVisibility" Value="Collapsed"/> <Setter Property="IsToggleButton" Value="True"/> </Style> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White"> <Intersoft:UXItemsControl HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal"> <Intersoft:UXNavigationButton Content="Home" Icon="Assets/Images/Home.png" TextImageRelation="ImageAboveText" DisplayMode="ContentAndImage" ImageHeight="50" ImageWidth="50" Style="{StaticResource UXNavigationButtonStyle1}"/> <Intersoft:UXNavigationButton Content="Product" Icon="Assets/Images/Products.png" TextImageRelation="ImageAboveText" ImageHeight="50" ImageWidth="50" DisplayMode="ContentAndImage" Style="{StaticResource UXNavigationButtonStyle1}"/> <Intersoft:UXNavigationButton Content="Settings" Icon="Assets/Images/Settings.png" DisplayMode="ContentAndImage" TextImageRelation="ImageAboveText" ImageHeight="50" ImageWidth="50" Style="{StaticResource UXNavigationButtonStyle1}"/> </Intersoft:UXItemsControl> </Grid> </UserControl>

XAML

Copy Code

                <UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Intersoft="http://intersoft.clientui.com/schemas" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
        x:Class="EditNavButtonTemplate.MainPage"
        Width="640" Height="480">
        <UserControl.Resources>
                <SolidColorBrush x:Key="Button_Background" Color="#FFD7D7D7"/>
                <SolidColorBrush x:Key="Button_Foreground" Color="#FF000000"/>
                <SolidColorBrush x:Key="Button_Border" Color="#FF8F8F8F"/>
                <LinearGradientBrush x:Key="Button_GlassBackground" EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#B2FFFFFF" Offset="0"/>
                        <GradientStop Color="Transparent" Offset="1"/>
                        <GradientStop Color="#99FFFFFF" Offset="0.5"/>
                        <GradientStop Color="#4CF8F8F8" Offset="0.51"/>
                </LinearGradientBrush>
                <Color x:Key="Button_GradientStart">#FF7500B1</Color>
                <Color x:Key="Button_GradientEnd">#FF52F100</Color>
                <SolidColorBrush x:Key="Button_InnerBorder" Color="#BFFFFFFF"/>
                <SolidColorBrush x:Key="Button_DisabledBackground" Color="#FFFFFFFF"/>
                <SolidColorBrush x:Key="Button_KeyboardFocusBorder" Color="#FF747474"/>
                <SolidColorBrush x:Key="Button_FocusBorder" Color="#00156174"/>
                <Color x:Key="Button_OuterBorder_Pressed">#FF1D415C</Color>
                <Color x:Key="Button_GradientStart_Pressed">#FF9AD2F0</Color>
                <Color x:Key="Button_GradientEnd_Pressed">#FF00E7FF</Color>
                <Color x:Key="Button_InnerBorder_Pressed">#FF218BC1</Color>
                <Color x:Key="Button_FocusBorder_Pressed">#FF0092FF</Color>
                <Style x:Key="UXButton_Default" TargetType="Intersoft:UXButton">
                        <Setter Property="Background" Value="{StaticResource Button_Background}"/>
                        <Setter Property="Foreground" Value="{StaticResource Button_Foreground}"/>
                        <Setter Property="Padding" Value="3"/>
                        <Setter Property="BorderThickness" Value="1"/>
                        <Setter Property="BorderBrush" Value="{StaticResource Button_Border}"/>
                        <Setter Property="GlassBackground" Value="{StaticResource Button_GlassBackground}"/>
                        <Setter Property="Template">
                                <Setter.Value>
                                        <ControlTemplate TargetType="Intersoft:UXButton">
                                                <Grid x:Name="RootElement">
                                                        <VisualStateManager.VisualStateGroups>
                                                                <VisualStateGroup x:Name="CommonStates">
                                                                        <VisualStateGroup.Transitions>
                                                                                <VisualTransition GeneratedDuration="0:0:0.05"/>
                                                                                <VisualTransition GeneratedDuration="0:0:0.3" To="Normal"/>
                                                                                <VisualTransition From="MouseOver" GeneratedDuration="0:0:1" To="HighlightFocused"/>
                                                                        </VisualStateGroup.Transitions>
                                                                        <VisualState x:Name="Normal">
                                                                                <Storyboard>
                                                                                        <ColorAnimation Duration="0" To="{StaticResource Button_FocusBorder_Pressed}" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="AnimationElement" d:IsOptimized="True"/>
                                                                                </Storyboard>
                                                                        </VisualState>
                                                                        <VisualState x:Name="MouseOver">
                                                                                <Storyboard>
                                                                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="AnimationElement"/>
                                                                                        <ColorAnimation Duration="0" To="{StaticResource Button_GradientStart}" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="AnimationElement" d:IsOptimized="True"/>
                                                                                        <DoubleAnimation Duration="0" To="0.352" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" Storyboard.TargetName="AnimationElement" d:IsOptimized="True"/>
                                                                                        <ColorAnimation Duration="0" To="{StaticResource Button_GradientEnd}" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="AnimationElement" d:IsOptimized="True"/>
                                                                                </Storyboard>
                                                                        </VisualState>
                                                                        <VisualState x:Name="Pressed">
                                                                                <Storyboard>
                                                                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="AnimationElement"/>
                                                                                        <ColorAnimation Duration="0" To="{StaticResource Button_OuterBorder_Pressed}" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="AnimationElement"/>
                                                                                        <ColorAnimation Duration="0" To="{StaticResource Button_GradientStart_Pressed}" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="AnimationElement"/>
                                                                                        <ColorAnimation Duration="0" To="{StaticResource Button_GradientEnd}" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="AnimationElement"/>
                                                                                        <ColorAnimation Duration="0" To="{StaticResource Button_InnerBorder_Pressed}" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="InnerBorder"/>
                                                                                </Storyboard>
                                                                        </VisualState>
                                                                        <VisualState x:Name="HighlightFocused">
                                                                                <Storyboard AutoReverse="True" RepeatBehavior="Forever">
                                                                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="AnimationElement">
                                                                                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                                                                                <EasingDoubleKeyFrame KeyTime="0:0:01" Value="1"/>
                                                                                        </DoubleAnimationUsingKeyFrames>
                                                                                </Storyboard>
                                                                        </VisualState>
                                                                        <VisualState x:Name="Checked">
                                                                                <Storyboard>
                                                                                        <DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="AnimationElement"/>
                                                                                        <ColorAnimation Duration="0" To="{StaticResource Button_GradientStart_Pressed}" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="AnimationElement"/>
                                                                                        <ColorAnimation Duration="0" To="{StaticResource Button_GradientEnd_Pressed}" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="AnimationElement"/>
                                                                                        <ColorAnimation Duration="0" To="{StaticResource Button_InnerBorder_Pressed}" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="InnerBorder"/>
                                                                                        <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="InnerBorder"/>
                                                                                </Storyboard>
                                                                        </VisualState>
                                                                        <VisualState x:Name="Disabled">
                                                                                <Storyboard>
                                                                                        <DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
                                                                                </Storyboard>
                                                                        </VisualState>
                                                                </VisualStateGroup>
                                                                <VisualStateGroup x:Name="FocusStates">
                                                                        <VisualState x:Name="Focused">
                                                                                <Storyboard>
                                                                                        <ColorAnimation Duration="0" To="{StaticResource Button_FocusBorder_Pressed}" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="FocusVisualElement"/>
                                                                                </Storyboard>
                                                                        </VisualState>
                                                                        <VisualState x:Name="Unfocused"/>
                                                                </VisualStateGroup>
                                                                <VisualStateGroup x:Name="KeyboardFocusStates">
                                                                        <VisualState x:Name="KeyboardUnfocused"/>
                                                                        <VisualState x:Name="KeyboardFocused">
                                                                                <Storyboard>
                                                                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="KeyboardFocus">
                                                                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                                                                        <DiscreteObjectKeyFrame.Value>
                                                                                                                <Visibility>Visible</Visibility>
                                                                                                        </DiscreteObjectKeyFrame.Value>
                                                                                                </DiscreteObjectKeyFrame>
                                                                                        </ObjectAnimationUsingKeyFrames>
                                                                                </Storyboard>
                                                                        </VisualState>
                                                                </VisualStateGroup>
                                                        </VisualStateManager.VisualStateGroups>
                                                        <Border x:Name="OuterBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}"/>
                                                        <Border x:Name="AnimationElement" BorderBrush="#00000000" BorderThickness="1" CornerRadius="{TemplateBinding CornerRadius}" Opacity="0">
                                                                <Border.Background>
                                                                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                                                                <GradientStop Color="{StaticResource Button_GradientStart}" Offset="0"/>
                                                                                <GradientStop Color="{StaticResource Button_GradientEnd}" Offset="1"/>
                                                                        </LinearGradientBrush>
                                                                </Border.Background>
                                                        </Border>
                                                        <Border x:Name="Glass" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding GlassBackground}" CornerRadius="{TemplateBinding CornerRadius}" Margin="1"/>
                                                        <Border x:Name="InnerBorder" BorderBrush="{StaticResource Button_InnerBorder}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding InnerCornerRadius}" Margin="1" Visibility="{TemplateBinding InnerBorderVisibility}"/>
                                                        <Intersoft:StylishLabel x:Name="StylishLabel" BorderBrush="{x:Null}" Background="{x:Null}" ContentType="{TemplateBinding DisplayMode}" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Effect="{TemplateBinding ContentEffect}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" ImageWidth="{TemplateBinding ImageWidth}" ImageSource="{TemplateBinding Icon}" ImageHeight="{TemplateBinding ImageHeight}" Margin="{TemplateBinding Padding}" Padding="3,1" TextImageRelation="{TemplateBinding TextImageRelation}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                                        <Border x:Name="DisabledVisualElement" Background="{StaticResource Button_DisabledBackground}" CornerRadius="{TemplateBinding CornerRadius}" IsHitTestVisible="false" Opacity="0"/>
                                                        <Rectangle x:Name="KeyboardFocus" IsHitTestVisible="False" Margin="2" RadiusY="{TemplateBinding CornerRadiusDouble}" RadiusX="{TemplateBinding CornerRadiusDouble}" Stroke="{StaticResource Button_KeyboardFocusBorder}" StrokeDashArray="1 1" Visibility="Collapsed"/>
                                                        <Border x:Name="FocusVisualElement" BorderBrush="{StaticResource Button_FocusBorder}" BorderThickness="1" CornerRadius="{TemplateBinding CornerRadius}" IsHitTestVisible="false"/>
                                                </Grid>
                                        </ControlTemplate>
                                </Setter.Value>
                        </Setter>
                </Style>
                <Style x:Key="UXNavigationButtonStyle1" BasedOn="{StaticResource UXButton_Default}" TargetType="Intersoft:UXNavigationButton">
                        <Setter Property="Background" Value="{x:Null}"/>
                        <Setter Property="Foreground" Value="{StaticResource Button_Foreground}"/>
                        <Setter Property="BorderBrush" Value="{x:Null}"/>
                        <Setter Property="GlassBackground" Value="{x:Null}"/>
                        <Setter Property="CornerRadius" Value="2"/>
                        <Setter Property="EnableFocusAnimation" Value="False"/>
                        <Setter Property="Cursor" Value="Hand"/>
                        <Setter Property="InnerBorderVisibility" Value="Collapsed"/>
                        <Setter Property="IsToggleButton" Value="True"/>
                </Style>
        </UserControl.Resources>

        <Grid x:Name="LayoutRoot" Background="White">
                <Intersoft:UXItemsControl HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
                        <Intersoft:UXNavigationButton Content="Home" Icon="Assets/Images/Home.png" TextImageRelation="ImageAboveText" DisplayMode="ContentAndImage" ImageHeight="50" ImageWidth="50" Style="{StaticResource UXNavigationButtonStyle1}"/>
                        <Intersoft:UXNavigationButton Content="Product" Icon="Assets/Images/Products.png" TextImageRelation="ImageAboveText" ImageHeight="50" ImageWidth="50" DisplayMode="ContentAndImage" Style="{StaticResource UXNavigationButtonStyle1}"/>
                        <Intersoft:UXNavigationButton Content="Settings" Icon="Assets/Images/Settings.png" DisplayMode="ContentAndImage" TextImageRelation="ImageAboveText" ImageHeight="50" ImageWidth="50" Style="{StaticResource UXNavigationButtonStyle1}"/>
                </Intersoft:UXItemsControl>
        </Grid>
</UserControl>

Concepts

Working with ClientUI Controls in Expression Blend Designer

Other Resources

Locating the Samples in Local Installation

Walkthroughs and How-to Topics