0

所以我一直在玩 Silverlight 的按钮样式，个人感觉你必须付出多少努力才能完成一个简单的开/关状态，我想知道是否有人能告诉我如何改变我所拥有的到目前为止，我可以将任何图像用于打开和关闭状态，并且每个按钮都没有 7 x 60 行的 XAML。

<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>

名为 btnLangEn_off 和 btnLangEn_on 的图像显然特定于一种类型的按钮，但我需要一种将这种样式应用到所有按钮的方法，告诉样式要为每个状态呈现哪些图像。

谢谢，格雷格。

4

1 回答 1

0

根据我的评论，这里是我研究的一个例子。请注意，我尚未对此进行测试，因此它可能无法完美运行，但您应该了解总体思路。

代码隐藏

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>
于 2012-09-21T15:10:43.877 回答