Tweak Theme In Silverlight 3


Introduction

In this article we will see how we can reduce Silverlight application’s xap size. As you know themes are provided by Silverlight Toolkit. But if you include multiple themes your application would be too big.

Finding Silverlight Themes In Local Drive

Once you install Silverlight Toolkit, all the theme styles are copied to your local folder. You can find it in following path:     C:\Program Files\Microsoft SDKs\Silverlight\v3.0\Toolkit\Jul09\Themes

Now suppose you need a theme style from Shiny Red a Shiny Blue for two different Buttons.

Open the related xaml in Visual Studio IDE.

Search for Button and you will be navigated to Button Style.

Copy the Button Style to your App.xaml.

Don’t forget to copy the namespaces too.

xmlns:vsm=”clr-namespace:System.Windows;assembly=System.Windows”

Give a x:Key value to the Style in our case BlueStyle and RedStyle.

Copy the StaticResource constants and change the key appropriately. (You have change it carefully where you are using it.)

Here is the Xaml for the two theme style buttons.

<Application.Resources>


<!–Shiny Blue Color Constants–>


<Color x:Key=”NormalBrushGradientBlue1″>#FFBAE4FF</Color>


<Color x:Key=”NormalBrushGradientBlue2″>#FF398FDF</Color>


<Color x:Key=”NormalBrushGradientBlue3″>#FF006DD4</Color>


<Color x:Key=”NormalBrushGradientBlue4″>#FF0A3E69</Color>

 


<Color x:Key=”NormalBorderBrushGradientBlue1″>#FFBBBBBB</Color>


<Color x:Key=”NormalBorderBrushGradientBlue2″>#FF737373</Color>


<Color x:Key=”NormalBorderBrushGradientBlue3″>#FF646464</Color>


<Color x:Key=”NormalBorderBrushGradientBlue4″>#FF000000</Color>

 


<Color x:Key=”SelectedBackgroundGradientBlue1″>#FFBBBBBB</Color>


<Color x:Key=”SelectedBackgroundGradientBlue2″>#FF737373</Color>


<Color x:Key=”SelectedBackgroundGradientBlue3″>#FF646464</Color>


<Color x:Key=”SelectedBackgroundGradientBlue4″>#FFA1A1A1</Color>

 


<Color x:Key=”SliderBorderGradientBlue1″>#FF3F3F3F</Color>


<Color x:Key=”SliderBorderGradientBlue2″>#FFADADAD</Color>

 


<Color x:Key=”ShadeBrushGradientBlue1″>#FF62676A</Color>


<Color x:Key=”ShadeBrushGradientBlue2″>#FFD1D4D6</Color>


<Color x:Key=”ShadeBrushGradientBlue3″>#FFFFFFFF</Color>

 


<LinearGradientBrush x:Key=”NormalBrushBlue”


EndPoint=”0.5,1″


StartPoint=”0.5,0″>


<GradientStop Color=”{StaticResource NormalBrushGradientBlue1}”


Offset=”0″ />


<GradientStop Color=”{StaticResource NormalBrushGradientBlue2}”


Offset=”0.41800001263618469″ />


<GradientStop Color=”{StaticResource NormalBrushGradientBlue3}”


Offset=”0.418″ />


<GradientStop Color=”{StaticResource NormalBrushGradientBlue4}”


Offset=”1″ />


</LinearGradientBrush>


<LinearGradientBrush x:Key=”NormalBorderBrushBlue”


EndPoint=”0.5,1″


StartPoint=”0.5,0″>


<GradientStop Color=”{StaticResource NormalBorderBrushGradientBlue1}” />


<GradientStop Color=”{StaticResource NormalBorderBrushGradientBlue2}”


Offset=”0.38″ />


<GradientStop Color=”{StaticResource NormalBorderBrushGradientBlue3}”


Offset=”0.384″ />


<GradientStop Color=”{StaticResource NormalBorderBrushGradientBlue4}”


Offset=”1″ />


</LinearGradientBrush>


<RadialGradientBrush x:Key=”HoverBrushBlue”>


<RadialGradientBrush.RelativeTransform>


<TransformGroup>


<ScaleTransform CenterX=”0.5″


CenterY=”0.5″


ScaleX=”1.804″


ScaleY=”0.743″ />


<SkewTransform CenterX=”0.5″


CenterY=”0.5″ />


<RotateTransform CenterX=”0.5″


CenterY=”0.5″ />


<TranslateTransform Y=”0.47999998927116394″ />


</TransformGroup>


</RadialGradientBrush.RelativeTransform>


<GradientStop Color=”#FF98DAFF”


Offset=”0.209″ />


<GradientStop Color=”#0098DAFF”


Offset=”1″ />


<GradientStop Color=”#FFFFFFFF”


Offset=”0″ />


</RadialGradientBrush>


<LinearGradientBrush x:Key=”DisabledBackgroundBrushBlue”


EndPoint=”0.5,1″


StartPoint=”0.5,0″>


<GradientStop Color=”#FFFFFFFF” />


<GradientStop Color=”#FF62676A”


Offset=”1″ />


<GradientStop Color=”#FFD1D4D6″


Offset=”0.41800001263618469″ />


<GradientStop Color=”#FFA9AFB5″


Offset=”0.425″ />


</LinearGradientBrush>

 

 

 


<!–Shiny Red Color Constants–>


<Color x:Key=”NormalBrushGradientRed1″>#FFF1BCBE</Color>


<Color x:Key=”NormalBrushGradientRed2″>#FFCE6865</Color>


<Color x:Key=”NormalBrushGradientRed3″>#FFAF231E</Color>


<Color x:Key=”NormalBrushGradientRed4″>#FF601818</Color>

 


<Color x:Key=”NormalBorderBrushGradientRed1″>#FFBBBBBB</Color>


<Color x:Key=”NormalBorderBrushGradientRed2″>#FF737373</Color>


<Color x:Key=”NormalBorderBrushGradientRed3″>#FF646464</Color>


<Color x:Key=”NormalBorderBrushGradientRed4″>#FF000000</Color>

 


<Color x:Key=”SelectedBackgroundGradientRed1″>#FFBBBBBB</Color>


<Color x:Key=”SelectedBackgroundGradientRed2″>#FF737373</Color>


<Color x:Key=”SelectedBackgroundGradientRed3″>#FF646464</Color>


<Color x:Key=”SelectedBackgroundGradientRed4″>#FFA1A1A1</Color>

 


<Color x:Key=”SliderBorderGradientRed1″>#FF3F3F3F</Color>


<Color x:Key=”SliderBorderGradientRed2″>#FFADADAD</Color>

 


<Color x:Key=”ShadeBrushGradientRed1″>#FF62676A</Color>


<Color x:Key=”ShadeBrushGradientRed2″>#FFD1D4D6</Color>


<Color x:Key=”ShadeBrushGradientRed3″>#FFFFFFFF</Color>

 


<LinearGradientBrush x:Key=”NormalBrushRed”


EndPoint=”0.5,1″


StartPoint=”0.5,0″>


<GradientStop Color=”{StaticResource NormalBrushGradientRed1}”


Offset=”0″ />


<GradientStop Color=”{StaticResource NormalBrushGradientRed2}”


Offset=”0.41800001263618469″ />


<GradientStop Color=”{StaticResource NormalBrushGradientRed3}”


Offset=”0.418″ />


<GradientStop Color=”{StaticResource NormalBrushGradientRed4}”


Offset=”1″ />


</LinearGradientBrush>


<LinearGradientBrush x:Key=”NormalBorderBrushRed”


EndPoint=”0.5,1″


StartPoint=”0.5,0″>


<GradientStop Color=”{StaticResource NormalBorderBrushGradientRed1}” />


<GradientStop Color=”{StaticResource NormalBorderBrushGradientRed2}”


Offset=”0.38″ />


<GradientStop Color=”{StaticResource NormalBorderBrushGradientRed3}”


Offset=”0.384″ />


<GradientStop Color=”{StaticResource NormalBorderBrushGradientRed4}”


Offset=”1″ />


</LinearGradientBrush>


<RadialGradientBrush x:Key=”HoverBrushRed”>


<RadialGradientBrush.RelativeTransform>


<TransformGroup>


<ScaleTransform CenterX=”0.5″


CenterY=”0.5″


ScaleX=”1.804″


ScaleY=”0.743″ />


<SkewTransform CenterX=”0.5″


CenterY=”0.5″ />


<RotateTransform CenterX=”0.5″


CenterY=”0.5″ />


<TranslateTransform Y=”0.47999998927116394″ />


</TransformGroup>


</RadialGradientBrush.RelativeTransform>


<GradientStop Color=”#FFFFC398″


Offset=”0.209″ />


<GradientStop Color=”#00FFB598″


Offset=”1″ />


<GradientStop Color=”#FFFFFFFF”


Offset=”0″ />


</RadialGradientBrush>


<LinearGradientBrush x:Key=”DisabledBackgroundBrushRed”


EndPoint=”0.5,1″


StartPoint=”0.5,0″>


<GradientStop Color=”#FFFFFFFF” />


<GradientStop Color=”#FF62676A”


Offset=”1″ />


<GradientStop Color=”#FFD1D4D6″


Offset=”0.41800001263618469″ />


<GradientStop Color=”#FFA9AFB5″


Offset=”0.425″ />


</LinearGradientBrush>

 

 

 


<!–Blue Button–>


<Style x:Key=”BlueStyle” TargetType=”Button”>


<Setter Property=”Background”


Value=”{StaticResource NormalBrushBlue}”/>


<Setter Property=”Foreground”


Value=”#FFFFFFFF”/>


<Setter Property=”Padding”


Value=”3″/>


<Setter Property=”BorderThickness”


Value=”2″/>


<Setter Property=”BorderBrush”


Value=”{StaticResource NormalBorderBrushBlue}” />


<Setter Property=”Template”>


<Setter.Value>


<ControlTemplate TargetType=”Button”>


<Grid>


<vsm:VisualStateManager.VisualStateGroups>


<vsm:VisualStateGroup x:Name=”CommonStates”>


<vsm:VisualStateGroup.Transitions>


<vsm:VisualTransition GeneratedDuration=”00:00:00.1″


To=”MouseOver”/>


<vsm:VisualTransition GeneratedDuration=”00:00:00.1″


To=”Pressed”/>


<vsm:VisualTransition From=”Normal”


GeneratedDuration=”00:00:00.3000000″


To=”MouseOver”/>


<vsm:VisualTransition From=”MouseOver”


GeneratedDuration=”00:00:00.5000000″


To=”Normal”/>


<vsm:VisualTransition From=”Pressed”


GeneratedDuration=”00:00:00.5000000″


To=”MouseOver”/>


</vsm:VisualStateGroup.Transitions>


<vsm:VisualState x:Name=”Normal”/>


<vsm:VisualState x:Name=”MouseOver”>


<Storyboard>


<DoubleAnimationUsingKeyFrames Storyboard.TargetName=”Hover”


Storyboard.TargetProperty=”Opacity”>


<SplineDoubleKeyFrame KeyTime=”0″


Value=”1″/>


</DoubleAnimationUsingKeyFrames>


</Storyboard>


</vsm:VisualState>


<vsm:VisualState x:Name=”Pressed”>


<Storyboard>


<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″


Duration=”00:00:00.0010000″


Storyboard.TargetName=”Background”


Storyboard.TargetProperty=”(UIElement.Opacity)”>


<SplineDoubleKeyFrame KeyTime=”00:00:00″


Value=”0.7″/>


</DoubleAnimationUsingKeyFrames>


</Storyboard>


</vsm:VisualState>


<vsm:VisualState x:Name=”Disabled”>


<Storyboard>


<DoubleAnimationUsingKeyFrames Storyboard.TargetName=”DisabledVisualElement”


Storyboard.TargetProperty=”(UIElement.Opacity)”>


<SplineDoubleKeyFrame KeyTime=”0″


Value=”0.65″/>


</DoubleAnimationUsingKeyFrames>


</Storyboard>


</vsm:VisualState>


</vsm:VisualStateGroup>


<vsm:VisualStateGroup x:Name=”FocusStates”>


<vsm:VisualStateGroup.Transitions>


<vsm:VisualTransition From=”Focused”


GeneratedDuration=”00:00:00.5000000″


To=”Unfocused”/>


<vsm:VisualTransition From=”Unfocused”


GeneratedDuration=”00:00:00.3000000″


To=”Focused”/>


</vsm:VisualStateGroup.Transitions>


<vsm:VisualState x:Name=”Focused”>


<Storyboard>


<ObjectAnimationUsingKeyFrames Duration=”0″


Storyboard.TargetName=”FocusVisualElement”


Storyboard.TargetProperty=”Visibility”>


<DiscreteObjectKeyFrame KeyTime=”0″


Value=”Visible” />


</ObjectAnimationUsingKeyFrames>


</Storyboard>


</vsm:VisualState>


<vsm:VisualState x:Name=”Unfocused”/>


</vsm:VisualStateGroup>


</vsm:VisualStateManager.VisualStateGroups>


<Border x:Name=”Background”


Background=”{TemplateBinding Background}”


BorderBrush=”{TemplateBinding BorderBrush}”


BorderThickness=”{TemplateBinding BorderThickness}”


CornerRadius=”2,2,2,2″>


<Border x:Name=”Hover”


Background=”{StaticResource HoverBrushBlue}”


CornerRadius=”2,2,2,2″


Height=”Auto”


Width=”Auto”


Opacity=”0″/>


</Border>


<ContentPresenter HorizontalAlignment=”{TemplateBinding HorizontalContentAlignment}”


Margin=”{TemplateBinding Padding}”


x:Name=”contentPresenter”


VerticalAlignment=”{TemplateBinding VerticalContentAlignment}”


Content=”{TemplateBinding Content}”


ContentTemplate=”{TemplateBinding ContentTemplate}”/>


<Border x:Name=”DisabledVisualElement”


IsHitTestVisible=”false”


Opacity=”0″


Background=”{StaticResource DisabledBackgroundBrushBlue}”


CornerRadius=”2,2,2,2″/>


<Border x:Name=”FocusVisualElement”


IsHitTestVisible=”false”


Visibility=”Collapsed”


BorderBrush=”{StaticResource HoverBrushBlue}”


BorderThickness=”2,2,2,2″


CornerRadius=”2,2,2,2″/>


</Grid>


</ControlTemplate>


</Setter.Value>


</Setter>


</Style>


<!–Red Button–>


<Style x:Key=”RedStyle” TargetType=”Button”>


<Setter Property=”Background”


Value=”{StaticResource NormalBrushRed}”/>


<Setter Property=”Foreground”


Value=”#FFFFFFFF”/>


<Setter Property=”Padding”


Value=”3″/>


<Setter Property=”BorderThickness”


Value=”2″/>


<Setter Property=”BorderBrush”


Value=”{StaticResource NormalBorderBrushRed}” />


<Setter Property=”Template”>


<Setter.Value>


<ControlTemplate TargetType=”Button”>


<Grid>


<vsm:VisualStateManager.VisualStateGroups>


<vsm:VisualStateGroup x:Name=”CommonStates”>


<vsm:VisualStateGroup.Transitions>


<vsm:VisualTransition GeneratedDuration=”00:00:00.1″


To=”MouseOver”/>


<vsm:VisualTransition GeneratedDuration=”00:00:00.1″


To=”Pressed”/>


<vsm:VisualTransition From=”Normal”


GeneratedDuration=”00:00:00.3000000″


To=”MouseOver”/>


<vsm:VisualTransition From=”MouseOver”


GeneratedDuration=”00:00:00.5000000″


To=”Normal”/>


<vsm:VisualTransition From=”Pressed”


GeneratedDuration=”00:00:00.5000000″


To=”MouseOver”/>


</vsm:VisualStateGroup.Transitions>


<vsm:VisualState x:Name=”Normal”/>


<vsm:VisualState x:Name=”MouseOver”>


<Storyboard>


<DoubleAnimationUsingKeyFrames Storyboard.TargetName=”Hover”


Storyboard.TargetProperty=”Opacity”>


<SplineDoubleKeyFrame KeyTime=”0″


Value=”1″/>


</DoubleAnimationUsingKeyFrames>


</Storyboard>


</vsm:VisualState>


<vsm:VisualState x:Name=”Pressed”>


<Storyboard>


<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″


Duration=”00:00:00.0010000″


Storyboard.TargetName=”Background”


Storyboard.TargetProperty=”(UIElement.Opacity)”>


<SplineDoubleKeyFrame KeyTime=”00:00:00″


Value=”0.7″/>


</DoubleAnimationUsingKeyFrames>


</Storyboard>


</vsm:VisualState>


<vsm:VisualState x:Name=”Disabled”>


<Storyboard>


<DoubleAnimationUsingKeyFrames Storyboard.TargetName=”DisabledVisualElement”


Storyboard.TargetProperty=”(UIElement.Opacity)”>


<SplineDoubleKeyFrame KeyTime=”0″


Value=”0.65″/>


</DoubleAnimationUsingKeyFrames>


</Storyboard>


</vsm:VisualState>


</vsm:VisualStateGroup>


<vsm:VisualStateGroup x:Name=”FocusStates”>


<vsm:VisualStateGroup.Transitions>


<vsm:VisualTransition From=”Focused”


GeneratedDuration=”00:00:00.5000000″


To=”Unfocused”/>


<vsm:VisualTransition From=”Unfocused”


GeneratedDuration=”00:00:00.3000000″


To=”Focused”/>


</vsm:VisualStateGroup.Transitions>


<vsm:VisualState x:Name=”Focused”>


<Storyboard>


<ObjectAnimationUsingKeyFrames Duration=”0″


Storyboard.TargetName=”FocusVisualElement”


Storyboard.TargetProperty=”Visibility”>


<DiscreteObjectKeyFrame KeyTime=”0″


Value=”Visible” />


</ObjectAnimationUsingKeyFrames>


</Storyboard>


</vsm:VisualState>


<vsm:VisualState x:Name=”Unfocused”/>


</vsm:VisualStateGroup>


</vsm:VisualStateManager.VisualStateGroups>


<Border x:Name=”Background”


Background=”{TemplateBinding Background}”


BorderBrush=”{TemplateBinding BorderBrush}”


BorderThickness=”{TemplateBinding BorderThickness}”


CornerRadius=”2,2,2,2″>


<Border x:Name=”Hover”


Background=”{StaticResource HoverBrushRed}”


CornerRadius=”2,2,2,2″


Height=”Auto”


Width=”Auto”


Opacity=”0″/>


</Border>


<ContentPresenter HorizontalAlignment=”{TemplateBinding HorizontalContentAlignment}”


Margin=”{TemplateBinding Padding}”


x:Name=”contentPresenter”


VerticalAlignment=”{TemplateBinding VerticalContentAlignment}”


Content=”{TemplateBinding Content}”


ContentTemplate=”{TemplateBinding ContentTemplate}”/>


<Border x:Name=”DisabledVisualElement”


IsHitTestVisible=”false”


Opacity=”0″


Background=”{StaticResource DisabledBackgroundBrushRed}”


CornerRadius=”2,2,2,2″/>


<Border x:Name=”FocusVisualElement”


IsHitTestVisible=”false”


Visibility=”Collapsed”


BorderBrush=”{StaticResource HoverBrushRed}”


BorderThickness=”2,2,2,2″


CornerRadius=”2,2,2,2″/>


</Grid>


</ControlTemplate>


</Setter.Value>


</Setter>


</Style>


</Application.Resources>

 

Now open the solution in Expression Blend 3.

Add two Buttons to the Application.

Select First Button and Apply the Style.

 

Apply for the Red Button also.

Now you need to change the Static Resource names carefully where it is being used and declared.

Now it’s ready. Run your application, it will run faster than before.

Hope you like this tweak.