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

我有一个图像，我用它作为我按钮的背景。如果按钮被禁用，我希望它是某种颜色，在本例中为#ffcccc，但当它被启用时，我希望它使用图像作为背景。这可能吗？我正在修改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>

---

您可以在触发器中更改整个controltemplate，如下所示。 我没有测试这个，但希望它能给你一个好主意，如何做到这一点

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

---

这类事情的典型方法是在核心设计中添加一个

矩形

元素，如下所示：-

                    <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，使背景不透明，但#ffcccc。还添加一个DoubleAnimation，以在禁用和按下状态下将“BackgroundElement”的

不透明度设置为0

因此，启用该选项后，可以看到矩形中的图像嵌入内容容器中的任何内容。禁用时，图像是透明的，可以看到#ffcccc颜色。按下时，会看到
PhoneForegroundBrush
颜色。
包含Silverlight和windows-phone-7标签表明这是与WP7相关的问题。{x:Type…}是一个wpf东西，但在WP7（或silverlight）中不起作用。我将更新该问题以反映这一点。抱歉，我看到了WPF标记，然后就使用了它。在Silverlight/WP7中似乎不可能这样做，因为“