如何绑定到Button的前景色？答案

【问题标题】：How to bind to Button's foreground color?如何绑定到Button的前景色？
【发布时间】：2014-11-06 00:23:16
【问题描述】：

我的按钮中有 Path 元素，我希望它在按下按钮时改变颜色。绑定到前台属性似乎不起作用。简化代码如下，特别重要的是这一点：Fill="{Binding Foreground, ElementName=SwitchLanguages}" on Path 元素。我确信有一种简单的方法可以做到这一点，但由于某种原因我找不到它。

   <Button 
        Name="SwitchLanguages" 
        Background="WhiteSmoke">
        <Canvas
            Width="46.5" 
            Height="44" 
            Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
            <Path 
                Width="46.4999" 
                Height="44" 
                Canvas.Left="0" 
                Canvas.Top="0" 
                Stretch="Fill" 
                Fill="{Binding Foreground, ElementName=SwitchLanguages}"
                Data="F1 M 22,52.0001L 22,44.0001L 46.75,44.0001L 38.75,36L 49.25,36L 61.25,48.0001L 49.25,60L 38.75,60L 46.75,52.0001L 22,52.0001 Z M 54,23.9999L 54,31.9999L 29.25,31.9999L 37.25,40L 26.75,40L 14.75,27.9999L 26.75,16L 37.25,16L 29.25,23.9999L 54,23.9999 Z ">
            </Path>
        </Canvas>
    </Button>

【问题讨论】：

点击时SwitchLanguages的颜色会改变吗？如果你没有做一些特别的事情，它就不会。
按下时颜色确实会改变（不是控件的Foreground 属性，而是其内容的颜色）——这是基于按钮的默认模板。

标签： c# wpf xaml windows-phone-8

【解决方案1】：

如果您在 SDK 中检查“System.Windows.xaml”，您会看到它实际上是一个模板子模板，在按下按钮时修改了其 Foreground，而不是控件的 Foreground 属性本身。

这里的理想方法是修改 Button 控件的Template。这样您就可以将Path 放在那里，并使用“已按下”VisualState 故事板根据需要修改其颜色。例如，下面修改默认的ControlTemplate，添加您的Path 元素并在触发“按下”视觉状态时修改其Fill 属性：

<Style x:Key="MyButtonStyle" TargetType="Button">
  <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="Fill">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}" />
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Background">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}" />
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="BorderBrush">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}" />
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Disabled">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Fill">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}" />
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="BorderBrush">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}" />
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Background">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>

          <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" Background="{TemplateBinding Background}" Margin="{StaticResource PhoneTouchTargetOverhang}" >

            <Canvas
                Width="46.5" 
                Height="44" 
                Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
                <Path x:Name="ContentContainer"
                    Width="46.4999" 
                    Height="44" 
                    Canvas.Left="0" 
                    Canvas.Top="0" 
                    Stretch="Fill" 
                    Fill="{TemplateBinding Foreground}"
                    Margin="{TemplateBinding Padding}"
                    Data="F1 M 22,52.0001L 22,44.0001L 46.75,44.0001L 38.75,36L 49.25,36L 61.25,48.0001L 49.25,60L 38.75,60L 46.75,52.0001L 22,52.0001 Z M 54,23.9999L 54,31.9999L 29.25,31.9999L 37.25,40L 26.75,40L 14.75,27.9999L 26.75,16L 37.25,16L 29.25,23.9999L 54,23.9999 Z ">
                </Path>
            </Canvas>

          </Border>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

将上述内容放入您的应用程序资源中，并像这样使用它：

【讨论】：

【解决方案2】：

在OnClick事件中改变按钮的前景色如

SwitchLanguages.Foreground = Brushes.Blue;

由于其绑定，这将更改路径项的绑定颜色。

【讨论】：

这不是最好的解决方案——您需要添加另一个事件处理程序来切换颜色。最好挂钩到 ControlTemplate 中的“Pressed”VisualState。
@McGarnagle 我的目的只是为正在学习 Xaml 开发的人提供一个简单的解决方案。不多不少。如果目的证明手段是合理的，我将其留给最终用户。
@OmegaMan 我知道我可以尝试在代码隐藏中更改颜色，但我确信必须有更好的方法来做到这一点。