Home/ Questions/Q 8625561
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T07:49:05+00:00

So I’ve been playing around with Silverlight’s button styling and, personal feelings about just

  • 0

So I’ve been playing around with Silverlight’s button styling and, personal feelings about just how much effort you have to put in to do a simple on/off state, I was wondering if anyone could tell me how to change what I’ve got so far so that I could use any images for the on and off states, and not have 7 x 60 lines of XAML for each button.

<UserControl x:Class="Reader.LanguageSelection"
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:DesignHeight="800" d:DesignWidth="1280">
<UserControl.Resources>
    <Style x:Key="btnLangStyle" TargetType="Button">
        <Setter Property="Background" Value="#FF1F3B53"/>
        <Setter Property="Foreground" Value="#FF000000"/>
        <Setter Property="Padding" Value="3"/>
        <Setter Property="BorderThickness" Value="1"/>
        <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="Button">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="btnLangEn_off" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="-28" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="btnLangEn_off" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="-25" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="btnLangEn_off" d:IsOptimized="True"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="btnLang_en" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="-30" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="btnLang_en" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="-20" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="btnLang_en" d:IsOptimized="True"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused"/>
                                <VisualState x:Name="Unfocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Image x:Name="btnLangEn_off" Margin="27,24,-27,-24" Opacity="0" Source="Resources/Images/btnLangEn_off.png" Stretch="Fill" RenderTransformOrigin="0.5,0.5">
                            <Image.RenderTransform>
                                <CompositeTransform/>
                            </Image.RenderTransform>
                        </Image>
                        <Image x:Name="btnLangEn_on" Margin="33,23,-33,-23" Opacity="0" Source="Resources/Images/btnLangEn_off.png" Stretch="Fill" RenderTransformOrigin="0.5,0.5">
                            <Image.RenderTransform>
                                <CompositeTransform/>
                            </Image.RenderTransform>
                        </Image>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

<Grid x:Name="LayoutRoot">
    <Canvas Width="1280" Height="800">
        <Button x:Name="btnLangEn" Width="93" Height="63" Click="btnLangEn_Click" Canvas.Left="417" Canvas.Top="463" Style="{StaticResource btnLangStyle}" />
        <Button x:Name="btnLangEs" Width="93" Height="63" Content="Español" Click="btnLangEs_Click" Canvas.Left="503" Canvas.Top="576" />
        <Button x:Name="btnLangDe" Width="93" Height="63" Content="Deutsch" Click="btnLangDe_Click" Canvas.Left="768" Canvas.Top="463" />
        <Button x:Name="btnLangFr" Width="93" Height="63" Content="French" Click="btnLangFr_Click" Canvas.Left="593" Canvas.Top="463" />
        <Button x:Name="btnLangIt" Width="93" Height="63" Content="Italian" Click="btnLangIt_Click" Canvas.Left="682" Canvas.Top="576" />
        <Button x:Name="btnLangDa" Width="93" Height="63" Content="Danish" Click="btnLangDa_Click" Canvas.Left="593" Canvas.Top="686" />
    </Canvas>
</Grid>

The images named btnLangEn_off and btnLangEn_on are obviously specific to one type of button, but I need a way of applying that style to all of my buttons, telling the style which images to render for each state.

Thanks,
Greg.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Per my comments here is an example that I worked up. Note that I have not tested this so it may not work perfectly, but you should get the general idea.

    CodeBehind

    public partial class CustomButton : Button
{
    public static readonly DependencyProperty OnImageProperty =
        DependencyProperty.Register("OnImageSource",
                                    typeof (ImageSource),
                                    typeof (CustomButton),
                                    new PropertyMetadata(null));

    public static readonly DependencyProperty OffImageProperty =
        DependencyProperty.Register("OffImageSource",
                                    typeof (ImageSource),
                                    typeof (CustomButton),
                                    new PropertyMetadata(null));

    public CustomButton()
    {
        InitializeComponent();

        Binding offBinding = new Binding
                                 {
                                     Source = this,
                                     Path = new PropertyPath(OffImageProperty)
                                 };
        OffImage.SetBinding(Image.SourceProperty, offBinding);

        Binding onBinding = new Binding
                                {
                                    Source = this,
                                    Path = new PropertyPath(OffImageProperty)
                                };

        OnImage.SetBinding(Image.SourceProperty, onBinding);
    }

    public ImageSource OffImageSource
    {
        get { return (ImageSource) GetValue(OffImageProperty); }
        set { SetValue(OffImageProperty, value); }
    }

    public ImageSource OnImageSource
    {
        get { return (ImageSource) GetValue(OnImageProperty); }
        set { SetValue(OnImageProperty, value); }
    }
}

    XAML

    <Button x:Class="CustomButton"
        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:DesignHeight="300"
        d:DesignWidth="400">
    <Button.Resources>
        <Image x:Name="OffImage"
               Margin="27,24,-27,-24"
               Opacity="0"
               Stretch="Fill"
               RenderTransformOrigin="0.5,0.5">
            <Image.RenderTransform>
                <CompositeTransform />
            </Image.RenderTransform>
        </Image>
        <Image x:Name="OnImage"
               Margin="33,23,-33,-23"
               Opacity="0"
               Stretch="Fill"
               RenderTransformOrigin="0.5,0.5">
            <Image.RenderTransform>
                <CompositeTransform />
            </Image.RenderTransform>
        </Image>
    </Button.Resources>
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Background"
                    Value="#FF1F3B53" />
            <Setter Property="Foreground"
                    Value="#FF000000" />
            <Setter Property="Padding"
                    Value="3" />
            <Setter Property="BorderThickness"
                    Value="1" />
            <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="Button">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0"
                                                             To="1"
                                                             Storyboard.TargetProperty="(UIElement.Opacity)"
                                                             Storyboard.TargetName="OffImage"
                                                             d:IsOptimized="True" />
                                            <DoubleAnimation Duration="0"
                                                             To="-28"
                                                             Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
                                                             Storyboard.TargetName="OffImage"
                                                             d:IsOptimized="True" />
                                            <DoubleAnimation Duration="0"
                                                             To="-25"
                                                             Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                                                             Storyboard.TargetName="OffImage"
                                                             d:IsOptimized="True" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseOver" />
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0"
                                                             To="1"
                                                             Storyboard.TargetProperty="(UIElement.Opacity)"
                                                             Storyboard.TargetName="OnImage"
                                                             d:IsOptimized="True" />
                                            <DoubleAnimation Duration="0"
                                                             To="-30"
                                                             Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
                                                             Storyboard.TargetName="OnImage"
                                                             d:IsOptimized="True" />
                                            <DoubleAnimation Duration="0"
                                                             To="-20"
                                                             Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                                                             Storyboard.TargetName="OnImage"
                                                             d:IsOptimized="True" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled" />
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused" />
                                    <VisualState x:Name="Unfocused" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Button.Style>
</Button>
    • 0