根据 XAML 中的状态交替图像和颜色作为按钮背景

Question

我有一张图像用作按钮的背景。如果按钮被禁用，我希望它是某种颜色，在本例中为#FFCCCCCC，但当它启用时，我希望它使用图像作为背景。这可能吗？我正在修改 Expression Blend 中的模板，但找不到正确的组合。看起来按钮要么有图像背景，要么有彩色背景，但不能根据状态改变。

我正在使用 Windows Phone 7/Silverlight。

我的 XAML 如下：

    <Style x:Key="SiteKeyButtonStyle" TargetType="Button">
        <Setter Property="VerticalAlignment" Value="Top" />
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}" />
        <Setter Property="FontSize" Value="24" />
        <Setter Property="Foreground" Value="#FFFFFF" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="MinWidth" Value="140" />
        <Setter Property="Height" Value="50" />
        <Setter Property="Padding" Value="24, 0, 24, 0" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ButtonBackground" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" >
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="#FFCCCCCC"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Duration="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ButtonBackground" To="1" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" >
                            <Border.Background>
                                <ImageBrush ImageSource="/ProjectName;component/Images/Icons/button-background.png" Stretch="Fill"/>
                            </Border.Background>
                            <ContentControl x:Name="ContentContainer" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Padding="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 1

处理此类事情的典型方法是向核心设计添加一个 Rectangle 元素，如下所示： -

                    <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" >
                         <Rectangle x:Name="BackgroundElement">
                             <Rectangle.Fill>
                                 <ImageBrush ImageSource="/ProjectName;component/Images/Icons/button-background.png" Stretch="Fill"/>
                             </Rectangle.Fill>
                         </Rectangle>
                         <ContentControl x:Name="ContentContainer" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Padding="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                     </Border>

您现在可以更改禁用的 VisualState，以便背景不是透明的，而是 #FFCCCCCC。还要添加 DoubleAnimation，以在“禁用”和“按下”状态下将“BackgroundElement”的 Opacity 设置为 0。

因此，启用后，可以看到矩形中的图像位于内容容器中的任何内容之上。禁用后，图像是透明的并且可以看到 #FFCCCCCC 颜色。按下时会看到 PhoneForegroundBrush 颜色。

Answer 2

您可以更改触发器中的整个控制模板，如下所示。
我没有对此进行测试，但希望它能让你很好地了解如何做到这一点。

 <Style TargetType="{x:Type Button}">
     <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
     <Style.Triggers>
                <Trigger Property="IsEnabled" Value="False">
                    <ControlTemplate TargetType="{x:Type Button}">

                    </ControlTemplate>
                </Trigger>
     </Style.Trigger>
    </Style>