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

问题描述：

我有一个RoundButtonTemplate来获取按钮，如音乐播放器的播放和暂停按钮。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中图像的颜色？

你为什么要改变图像的颜色，你认为可能是可能的，为什么不改变图像本身？ – AymenDaoudi

例如，我想将按钮背景设置为白色，将图像颜色设置为黑色或透明。这是可能的与不透明图像覆盖的形象，但我不知道如何将其设置在ContentPresenter或ContentControl –

为什么你不只是改变图像本身，这将使它更简单 – AymenDaoudi

答

附加属性的救援！

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

就是这样！

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

这似乎是我正在寻找！谢谢 –

非常好。顺便说一下，您可以将这种技术用于很多设计元素。我的静态Design类有许多这些属性在许多模板中重用。你可以做一些高级UI的东西。 – Laith

答

试试这个：

<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的追问下，这是我所做的唯一修改。

这不适用于白色图标和白色前景。 –

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

相关推荐