RoundButtonTemplate 在按下状态下更改背景和图标颜色答案

【问题标题】：RoundButtonTemplate change Background and Icon Color on pressed stateRoundButtonTemplate 在按下状态下更改背景和图标颜色
【发布时间】：2014-03-14 10:22:06
【问题描述】：

我有一个 RoundButtonTemplate 来获取音乐播放器的播放和暂停按钮等按钮。

    <ControlTemplate x:Key="RoundButtonTemplate" TargetType="Button">
        <Grid Background="Transparent" Margin="{StaticResource PhoneTouchTargetOverhang}">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Pressed">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="ButtonBackground">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Normal"/>
                    <VisualState x:Name="Disabled">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Opacity)" Storyboard.TargetName="ButtonBackground">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="0.5"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Opacity)" Storyboard.TargetName="ButtonBorder">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="0.5"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Opacity)" Storyboard.TargetName="ButtonContent">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="0.5"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="MouseOver"/>
                </VisualStateGroup>
                <VisualStateGroup x:Name="FocusStates"/>
            </VisualStateManager.VisualStateGroups>
            <Border x:Name="ButtonBorder" BorderBrush="White" BorderThickness="3" Background="Transparent" CornerRadius="100">
                <Ellipse x:Name="ButtonBackground" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="{TemplateBinding Background}" />
            </Border>
            <ContentPresenter x:Name="ButtonContent" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
    </ControlTemplate>

如果按下按钮，按钮的背景应该变为前景色，通过 ContentPresenter 显示的图标应该变为背景色或透明。

将按钮的背景更改为前景色很简单，但是我不知道如何在ContentPresenter中更改图像的颜色？

【问题讨论】：

为什么要改变图片的颜色，你认为有可能吗，为什么不改变图片本身？
比如我想设置按钮背景为白色，图片颜色为黑色或透明。这可以通过在图像上放置 OpacityMask 来实现，但我不知道如何在 ContentPresenter 或 ContentControl 上设置它
你为什么不直接改变图像本身，这样会更简单
我应该如何更改模板中的图像？如果我在事件 Tap 或 Hold 上更改代码背景中的图像，那么我必须为每个按钮创建一个事件处理程序。
如果此实例的模板是隐式的，只需添加图像（用于正常和按下状态）并切换它们各自状态的可见性或不透明度。或者，如果它们是 xaml 路径向量，只需更改它们各自状态的填充。

标签： button windows-phone-8 windows-phone controltemplate

【解决方案1】：

附加属性来救援！

第 1 步：

创建一个包含附加属性的静态类。

public static class Design
{
    public static readonly DependencyProperty AlternateContentProperty = DependencyProperty.RegisterAttached(
        "AlternateContent", 
        typeof (object), 
        typeof (Design), 
        null
    );

    public static void SetAlternateContent(DependencyObject element, object value)
    {
        element.SetValue(AlternateContentProperty, value);
    }

    public static object GetAlternateContent(DependencyObject element)
    {
        return element.GetValue(AlternateContentProperty);
    }
}

第 2 步：

在另一个 ContentPresenter 中将替代内容添加到您的模板中，该模板一开始是折叠的。然后在您的Pressed 视觉状态下，折叠原始内容并显示替代内容。

<ControlTemplate x:Key="RoundButtonTemplate"
                    TargetType="Button">
    <Grid Background="Transparent"
            Margin="{StaticResource PhoneTouchTargetOverhang}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Pressed">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)"
                                                        Storyboard.TargetName="ButtonBackground">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource PhoneAccentBrush}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                        Storyboard.TargetName="ButtonContentAlternate">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                        Storyboard.TargetName="ButtonContent">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Normal" />
                <VisualState x:Name="Disabled">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Opacity)"
                                                        Storyboard.TargetName="ButtonBackground">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="0.5" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Opacity)"
                                                        Storyboard.TargetName="ButtonBorder">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="0.5" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Opacity)"
                                                        Storyboard.TargetName="ButtonContent">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="0.5" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="MouseOver" />
            </VisualStateGroup>
            <VisualStateGroup x:Name="FocusStates" />
        </VisualStateManager.VisualStateGroups>
        <Border x:Name="ButtonBorder"
                BorderBrush="White"
                BorderThickness="3"
                Background="Transparent"
                CornerRadius="100">
            <Ellipse x:Name="ButtonBackground"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        Fill="{TemplateBinding Background}" />
        </Border>
        <ContentPresenter x:Name="ButtonContent"
                            Content="{TemplateBinding Content}"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center" />

        <ContentPresenter x:Name="ButtonContentAlternate"
                            Content="{TemplateBinding Local:Design.AlternateContent}"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Visibility="Collapsed" />
    </Grid>
</ControlTemplate>

第 3 步：

使用此模板的任何按钮都应提供两个内容。

<Button VerticalAlignment="Top"
        Template="{StaticResource RoundButtonTemplate}">

    <Local:Design.AlternateContent>
        <Rectangle Fill="Red"
                    Height="40"
                    Width="40" />
    </Local:Design.AlternateContent>

    <Rectangle Fill="Yellow"
                Height="40"
                Width="40" />
</Button>

就是这样！

我希望这能解决你的问题:)

【讨论】：

这似乎就是我要找的东西！谢谢
优秀。顺便说一句，您可以将这种技术用于许多设计元素。我的静态设计类有许多在许多模板中重用的这些属性。你可以做一些高级的 UI 工作。

【解决方案2】：

试试这个：

    <Style x:Key="RoundButtonTemplate" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="Transparent" Margin="{StaticResource PhoneTouchTargetOverhang}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding Foreground, RelativeSource={RelativeSource TemplatedParent}}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Opacity)" Storyboard.TargetName="ButtonContent">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="0.5"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Opacity)" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="0.5"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Opacity)" Storyboard.TargetName="ButtonBorder">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="0.5"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Opacity)" Storyboard.TargetName="ButtonContent">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="0.5"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MouseOver"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates"/>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="ButtonBorder" BorderBrush="White" BorderThickness="3" Background="Transparent" CornerRadius="100">
                            <Ellipse x:Name="ButtonBackground" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="{TemplateBinding Background}" />
                        </Border>
                        <ContentPresenter x:Name="ButtonContent" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

当按下按钮的背景变成前景的颜色和内容修改它的不透明度为 50%。

哦，我制作了一个“样式”而不是模板，所以，你可以这样称呼它...... 其他选项是更改当前的 VisualState Pressed，这是我所做的唯一修改。

【讨论】：