WPF按钮样式背景隐藏前景

Question

我试图了解样式控件的基本模板，但即使有很多样本我仍然坚持一些基础知识。

我希望使用自定义背景设计一个按钮，因此我在VisualState“MouseOver”上设置了背景属性更改的边框。问题是，因为我在边框上设置颜色，所以我找不到如何将我的文本前景属性设置为白色，以便文本可见。

这里是我的XAML：

<Style TargetType="{x:Type Button}"> 
     <Setter Property="Foreground" Value="White"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Border Name="RootElement"> 
         <Border.Background> 
          <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> 
           <GradientStop Offset="0" Color="Black" /> 
           <GradientStop Offset="1" Color="SteelBlue" /> 
          </LinearGradientBrush> 
         </Border.Background> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal" /> 
           <VisualState x:Name="MouseOver"> 
            <Storyboard> 
             <ColorAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)"> 
              <EasingColorKeyFrame KeyTime="0" Value="LightSteelBlue" /> 
             </ColorAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

的前景属性的setter似乎是由边框背景属性重写。

我想我有一个文本块添加到模板，但我知道如何的按钮，文本块的实际文本链接，这就是我想没有更迭：

<Style TargetType="{x:Type Button}"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Border Name="RootElement"> 
         <Border.Background> 
          <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> 
           <GradientStop Offset="0" Color="Black" /> 
           <GradientStop Offset="1" Color="SteelBlue" /> 
          </LinearGradientBrush> 
         </Border.Background> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal" /> 
           <VisualState x:Name="MouseOver"> 
            <Storyboard> 
             <ColorAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)"> 
              <EasingColorKeyFrame KeyTime="0" Value="LightSteelBlue" /> 
             </ColorAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <TextBlock Name="ButtonText" Text="{TemplateBinding Content}"> 
          <TextBlock.Foreground> 
           <SolidColorBrush Color="White"/> 
          </TextBlock.Foreground> 
         </TextBlock> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

Answer 1

你是正确的，你需要添加一些东西来呈现Button中的文字，边框内的一个简单的ContentPrsenter应该做的。

<Style TargetType="{x:Type Button}"> 
      <Setter Property="Foreground" Value="White"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="Button"> 
         <Border Name="RootElement"> 
          <Border.Background> 
           <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> 
            <GradientStop Offset="0" Color="Black" /> 
            <GradientStop Offset="1" Color="SteelBlue" /> 
           </LinearGradientBrush> 
          </Border.Background> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="CommonStates"> 
            <VisualState x:Name="Normal" /> 
            <VisualState x:Name="MouseOver"> 
             <Storyboard> 
              <ColorAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)"> 
               <EasingColorKeyFrame KeyTime="0" Value="LightSteelBlue" /> 
              </ColorAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 

          <ContentPresenter/> 

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

如果要对显示的内容，你可以像一个标签添加的东西，并绑定到按钮的内容属性的内容更多的控制。

<Style TargetType="{x:Type Button}"> 
     <Setter Property="Foreground" Value="White"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Border Name="RootElement"> 
         <Border.Background> 
          <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> 
           <GradientStop Offset="0" Color="Black" /> 
           <GradientStop Offset="1" Color="SteelBlue" /> 
          </LinearGradientBrush> 
         </Border.Background> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal" /> 
           <VisualState x:Name="MouseOver"> 
            <Storyboard> 
             <ColorAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)"> 
              <EasingColorKeyFrame KeyTime="0" Value="LightSteelBlue" /> 
             </ColorAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 

         <Label Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}"/> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>