自定義按鈕 - 背景不變

Question

我正在嘗試製作自定義按鈕，我唯一的問題是背景不變。我知道我需要將背景值設置爲{TemplateBinding Background}，但我似乎無法找到正確的位置。我嘗試過，但它不起作用。

該按鈕是在表達式混合中創建的，所以您可能會看到任何奇怪的東西可能來自那裏，我相信。

<ResourceDictionary 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
<Style x:Key="DEHRButton" TargetType="{x:Type Button}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Grid> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualStateGroup.Transitions> 
           <VisualTransition GeneratedDuration="0:0:0.1"/> 
          </VisualStateGroup.Transitions> 
          <VisualState x:Name="Normal"/> 
          <VisualState x:Name="MouseOver"> 
           <Storyboard> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.StrokeThickness)" Storyboard.TargetName="path"> 
             <EasingDoubleKeyFrame KeyTime="0" Value="2"/> 
            </DoubleAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Pressed"> 
           <Storyboard> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.StrokeThickness)" Storyboard.TargetName="path"> 
             <EasingDoubleKeyFrame KeyTime="0" Value="3"/> 
            </DoubleAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="path"> 
             <EasingDoubleKeyFrame KeyTime="0" Value="0.7"/> 
            </DoubleAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="path"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <Path Fill="{TemplateBinding Background}"/> 
        <Path x:Name="path" Data="M14.666499,0.5 L14.833,0.94661933 14.833,0.5 67.170002,0.5 81.166,0.5 95.502998,0.5 81.336502,38.5 81.166,38.042648 81.166,38.5 28.833,38.5 14.833,38.5 0.5,38.5 z" Stretch="Fill" Stroke="{TemplateBinding BorderBrush}"> 
         <Path.Fill> 
          <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
           <GradientStop Color="Black" Offset="0"/> 
           <GradientStop Color="White" Offset="1"/> 
          </LinearGradientBrush> 
         </Path.Fill> 
        </Path> 
        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsFocused" Value="True"/> 
        <Trigger Property="IsDefaulted" Value="True"/> 
        <Trigger Property="IsMouseOver" Value="True"/> 
        <Trigger Property="IsPressed" Value="True"/> 
        <Trigger Property="IsEnabled" Value="False"/> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 
<!-- Resource dictionary entries should be defined here. --> 

感謝提前的幫助。

Answer 1

您在那裏存在的問題是Fill屬性綁定了兩次（一次是背景，一次是黑白默認樣式）。

這裏是你如何解決你的問題：

<Style x:Key="DEHRButton" TargetType="{x:Type Button}"> 
     <Setter Property="Background"> 
      <Setter.Value> 
       <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
        <GradientStop Color="Black" Offset="0"/> 
        <GradientStop Color="White" Offset="1"/> 
       </LinearGradientBrush> 
      </Setter.Value> 
     </Setter> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Button}"> 
        <Grid> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualStateGroup.Transitions> 
            <VisualTransition GeneratedDuration="0:0:0.1"/> 
           </VisualStateGroup.Transitions> 
           <VisualState x:Name="Normal"/> 
           <VisualState x:Name="MouseOver"> 
            <Storyboard> 
             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.StrokeThickness)" Storyboard.TargetName="path"> 
              <EasingDoubleKeyFrame KeyTime="0" Value="2"/> 
             </DoubleAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Pressed"> 
            <Storyboard> 
             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.StrokeThickness)" Storyboard.TargetName="path"> 
              <EasingDoubleKeyFrame KeyTime="0" Value="3"/> 
             </DoubleAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="path"> 
              <EasingDoubleKeyFrame KeyTime="0" Value="0.7"/> 
             </DoubleAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="path"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Path x:Name="path" Fill="{TemplateBinding Background}" Data="M14.666499,0.5 L14.833,0.94661933 14.833,0.5 67.170002,0.5 81.166,0.5 95.502998,0.5 81.336502,38.5 81.166,38.042648 81.166,38.5 28.833,38.5 14.833,38.5 0.5,38.5 z" Stretch="Fill" Stroke="{TemplateBinding BorderBrush}"> 

         </Path> 
         <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsFocused" Value="True"/> 
         <Trigger Property="IsDefaulted" Value="True"/> 
         <Trigger Property="IsMouseOver" Value="True"/> 
         <Trigger Property="IsPressed" Value="True"/> 
         <Trigger Property="IsEnabled" Value="False"/> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

您定義的默認外觀作爲二傳手的背景屬性，你的模板將綁定填寫背景。這可以讓你有背景的一些默認值，但您還可以直接從這樣的控制設置自己的背景：

<Button Background="Azure" Style="{StaticResource DEHRButton}" Height="20" Width="100"/> 

Here更多的是在WPF可視化樹。與我合作過的一位前輩曾說過，在開始用XAML編程之前，您首先需要了解可視化樹和邏輯樹的概念，否則您會開始討厭它。