WPF更改背景的殘疾人按鈕

Question

我想學習WPF，我已經做了一個簡單的井字遊戲應用程序。該應用程序的工作原理，但我想嘗試一下。我找不到如何爲所有按鈕設置禁用按鈕的背景（並保持內容可見）。我的問題是如何設置資源字典中的代碼？評論的代碼是我嘗試過的。爲了給所有按鈕提供相同的樣式，我添加了一個資源字典。

資源字典

<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 

    <Style TargetType="Button"> 
     <Style.Triggers> 
      <Trigger Property="IsEnabled" Value="false"> 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate> 
          <!--<Border BorderBrush="Black" BorderThickness="1"> 
           <TextBlock Text="{Binding Path=SelectedDate, 
           StringFormat={}{0:d}, 
           RelativeSource={RelativeSource TemplatedParent}}" 
           VerticalAlignment="Center" HorizontalAlignment="Left" 
           Padding="4,0,0,0" /> 
          </Border>--> 
          <!--<Border BorderBrush="Aquamarine" BorderThickness="1"></Border>--> 
          <!-- Outer Rectangle with rounded corners. --> 
          <!-- Present Content (text) of the button. -->       
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 

</ResourceDictionary> 

的App.xaml

<Application x:Class="FirstApplication.App" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      StartupUri="MainWindow.xaml"> 
    <Application.Resources> 
      <ResourceDictionary Source="ResourceDictionary.xaml" /> 
    </Application.Resources> 
</Application> 

MainWindow.xaml

<Window x:Class="FirstApplication.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="500" Width="525"> 

    <Grid Margin="0,0,0.4,-19.2" Name="controlGrid"> 
     <Button x:Name="A" Content="" HorizontalAlignment="Left" Margin="117,59,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/> 
     <Button x:Name="B" Content="" HorizontalAlignment="Left" Margin="223,59,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/> 
     <Button x:Name="C" Content="" HorizontalAlignment="Left" Margin="330,59,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/> 
     <Button x:Name="D" Content="" HorizontalAlignment="Left" Margin="117,157,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" RenderTransformOrigin="0.302,0.614" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/> 
     <Button x:Name="E" Content="" HorizontalAlignment="Left" Margin="223,157,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/> 
     <Button x:Name="F" Content="" HorizontalAlignment="Left" Margin="330,157,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/> 
     <Button x:Name="G" Content="" HorizontalAlignment="Left" Margin="117,255,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/> 
     <Button x:Name="H" Content="" HorizontalAlignment="Left" Margin="223,255,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/> 
     <Button x:Name="I" Content="" HorizontalAlignment="Left" Margin="330,255,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/> 
     <ToolBar Margin="0,0,0,450.6"> 
      <Button Name="newButton" Click="newButton_Click">New</Button> 
     </ToolBar> 
    </Grid> 
</Window> 

Answer 1

可能超過您尋找的：

<Style TargetType="{x:Type Button}" x:Key="ButtonBase"> 
    <Setter Property="BorderThickness" Value="1" /> 
    <Setter Property="Foreground" Value="#FF959595" /> 
    <Setter Property="HorizontalContentAlignment" Value="Center" /> 
    <Setter Property="VerticalContentAlignment" Value="Center" /> 
    <Setter Property="Padding" Value="10,0" /> 
    <Setter Property="Margin" Value="2" /> 
    <Setter Property="FontFamily" Value="Segoe UI" /> 
    <Setter Property="Height" Value="25" /> 
    <Setter Property="MinWidth" Value="100" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Grid> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal"> 
           <Storyboard> 
            <ColorAnimation To="#FFFFFFFF" Storyboard.TargetName="BgBrush" 
                Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" 
                Duration="0:0:0.07" /> 
            <ColorAnimation To="#FFDEDEDE" Storyboard.TargetName="BgBrush" 
                Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" 
                Duration="0:0:0.07" /> 
            <ColorAnimation To="#FF959595" Storyboard.TargetName="BrBrush" 
                Storyboard.TargetProperty="Color" Duration="0:0:0.07" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="MouseOver"> 
           <Storyboard> 
            <ColorAnimation To="#FF00B4E4" Storyboard.TargetName="BgBrush" 
                Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" 
                Duration="0:0:0.07" /> 
            <ColorAnimation To="#FF0083C3" Storyboard.TargetName="BgBrush" 
                Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" 
                Duration="0:0:0.07" /> 
            <ColorAnimation To="#FF4C7B8F" Storyboard.TargetName="BrBrush" 
                Storyboard.TargetProperty="Color" Duration="0:0:0.07" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Pressed"> 
           <Storyboard> 
            <ColorAnimation To="#DBEDFD" Storyboard.TargetName="BgBrush" 
                Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" 
                Duration="0:0:0.05" /> 
            <ColorAnimation To="#C4E0FC" Storyboard.TargetName="BgBrush" 
                Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" 
                Duration="0:0:0.05" /> 
            <ColorAnimation To="#4C7B8F" Storyboard.TargetName="BrBrush" 
                Storyboard.TargetProperty="Color" Duration="0:0:0.05" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <ColorAnimation To="#EFEFEF" Storyboard.TargetName="BgBrush" 
                Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" 
                Duration="0:0:0" /> 
            <ColorAnimation To="#EFEFEF" Storyboard.TargetName="BgBrush" 
                Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" 
                Duration="0:0:0" /> 
            <ColorAnimation To="#D9D9D9" Storyboard.TargetName="BrBrush" 
                Storyboard.TargetProperty="Color" Duration="0:0:0" /> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <Border x:Name="Chrome" BorderThickness="{TemplateBinding BorderThickness}" 
          SnapsToDevicePixels="true"> 
         <Border.BorderBrush> 
          <SolidColorBrush x:Name="BrBrush" Color="#ACACAC" /> 
         </Border.BorderBrush> 
         <Border.Background> 
          <LinearGradientBrush x:Name="BgBrush" EndPoint="0,1" StartPoint="0,0"> 
           <GradientStop Color="#FFF0F0F0" Offset="0" /> 
           <GradientStop Color="#FFE5E5E5" Offset="1" /> 
          </LinearGradientBrush> 
         </Border.Background> 
         <ContentPresenter 
          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
          Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" 
          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> 
        </Border> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="true"> 
         <Setter Property="Foreground" Value="#FFFFFF" /> 
        </Trigger> 
        <Trigger Property="IsEnabled" Value="false"> 
         <Setter Property="Foreground" Value="#ADADAD" /> 
        </Trigger> 
        <Trigger Property="IsPressed" Value="true"> 
         <Setter Property="Foreground" Value="#000000" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

由景景基礎上的意見/反饋

編輯

上面的例子肯定是超過了OP請求，但考慮到這個問題的背景和他們的Button控制State造型的興趣，我覺得這有利於提供額外的細節（儘管沒有公認的解釋）。

之前<Setter Property="Tempalte">我正在改變Button控制的基本視覺風格。我希望這些都不需要解釋，因爲它看起來相當自我解釋。

後<Setter Property="Template">我改變ButtonControlTemplate的visual states（這些Normal，MouseOver，Pressed & Disabled）。這使我可以在Button處於這些狀態之一時自定義外觀。在這個例子中，我使用的是StoryBoard，這樣我就可以動畫Button的State轉換。

這四個State s以類似的格式（動畫漸變背景&動畫純色邊框）樣式化，這些狀態之間的差異是它們用於提供所需效果的顏色和持續時間。

在VisualState之後，我修改了主要內容模板，我想如何顯示Button控件。我提供ContentPresenter，將用於顯示Button的內容，我將ContentPresenter的某些特徵綁定到作爲模板的Button，如果需要，可以根據每個Button來控制這些特徵。 ContentPresenter被Border包圍，其定義了BrBrush（邊框刷）和BgBrush（背景刷）。這些是與VisualStates模板中引用的相同的畫筆，併爲它們提供了工作的默認狀態。

最後我改變ControlTemplate.Triggers的基礎上，啓動Trigger的PropertyValue定製Button（在這個例子中的前景顏色）的視覺風格。