WPF Button Style Background hidding Foreground

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> 

сеттер на переднем плане собственности, кажется, перекрываться границы свойства фона.

Я думаю, что я должен добавить TextBlock в шаблон, но я уверен, как связать фактический текст кнопки в TextBlock, это то, что я пытался без Succes:

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