如何修改擴展器按鈕背景？ WPF

Question

我有一個擴展器放置在一個藍色背景窗口上，我想使擴展器的按鈕比默認值（藍色，它從窗口接收到的顏色）更多。當我修改擴展器的背景屬性時，它將整個擴展器，標題和全部變爲新的顏色。不過，我只希望按鈕本身改變。任何人都可以將我指向我正在尋找的正確屬性？ 謝謝

Answer 1

你不僅要retemplate的擴展......你需要將擴展​​的模板內retemplate切換按鈕......這樣就可以綁定模板背景刷上擴展設置一路下跌通過Expander的視覺效果進入ToggleButton的視覺效果（使用兩個TemplateBindings）。

當你正在學習如何修改WPF控件的視覺效果時，有一件事是有幫助的（至少對我來說）是使用SimpleStyles，因爲它們比複製和修改複製和修改要容易得多，正常樣式&模板。

要做到這一點，打開Blend並進入素材資源庫（最底層的工具）...如果點擊它，您將看到兩組控件：系統控件和簡單樣式。從簡單樣式中抓取其中一個控件（無論您想要哪一個）並將其放在設計圖面上。然後，您可以右鍵單擊它，編輯控件（模板）和編輯一個副本。這將創建一個簡單樣式樣式和模板的副本...然後您可以（更容易地）修改您的內容。

（我現在要注意的是，我會在Visual Studio和Blend中修改xaml（由Blend生成）......根據需要來回翻動......並利用每個的優勢： Blend爲其所見即所得的設計表面...和Visual Studio的代碼編輯和智能感知支持。）

我已經草擬了一些快速xaml，做你正在問，並將其包括在下面。您應該能夠將此xaml放入Kaxaml或其他鬆散的xaml編輯器中。

希望這會有所幫助。

<Page 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="640" 
    Height="480" 
> 
    <Page.Resources> 
     <LinearGradientBrush x:Key="NormalBrush" EndPoint="0,1" StartPoint="0,0"> 
      <GradientStop Color="#EEE" Offset="0.0"/> 
      <GradientStop Color="#CCC" Offset="1.0"/> 
     </LinearGradientBrush> 
     <LinearGradientBrush x:Key="NormalBorderBrush" EndPoint="0,1" StartPoint="0,0"> 
      <GradientStop Color="#CCC" Offset="0.0"/> 
      <GradientStop Color="#444" Offset="1.0"/> 
     </LinearGradientBrush> 
     <SolidColorBrush x:Key="GlyphBrush" Color="#444"/> 
     <LinearGradientBrush x:Key="MouseOverBrush" EndPoint="0,1" StartPoint="0,0"> 
      <GradientStop Color="#FFF" Offset="0.0"/> 
      <GradientStop Color="#AAA" Offset="1.0"/> 
     </LinearGradientBrush> 
     <LinearGradientBrush x:Key="PressedBrush" EndPoint="0,1" StartPoint="0,0"> 
      <GradientStop Color="#BBB" Offset="0.0"/> 
      <GradientStop Color="#EEE" Offset="0.1"/> 
      <GradientStop Color="#EEE" Offset="0.9"/> 
      <GradientStop Color="#FFF" Offset="1.0"/> 
     </LinearGradientBrush> 

     <ControlTemplate x:Key="newToggleButtonControlTemplate" TargetType="{x:Type ToggleButton}"> 
      <Grid Background="{TemplateBinding Background}"> 
       <Rectangle 
        x:Name="Rectangle" 
        Margin="0,0,0,0" 
        Fill="Transparent" 
        Stroke="{DynamicResource NormalBorderBrush}" 
       /> 
       <Path 
        x:Name="Up_Arrow" 
        HorizontalAlignment="Center" 
        VerticalAlignment="Center" 
        Fill="{DynamicResource GlyphBrush}" 
        Data="M 0 0 L 4 4 L 8 0 Z" 
       /> 
       <Path 
        x:Name="Down_Arrow" 
        Visibility="Collapsed" 
        HorizontalAlignment="Center" 
        VerticalAlignment="Center" 
        Fill="{DynamicResource GlyphBrush}" 
        Data="M 0 4 L 4 0 L 8 4 Z" 
       /> 
      </Grid> 
      <ControlTemplate.Triggers> 
       <Trigger Property="IsMouseOver" Value="true"> 
        <Setter Property="Fill" Value="{DynamicResource MouseOverBrush}" TargetName="Rectangle"/> 
       </Trigger> 
       <Trigger Property="IsPressed" Value="true"> 
        <Setter Property="Fill" Value="{DynamicResource PressedBrush}" TargetName="Rectangle"/> 
       </Trigger> 
       <Trigger Property="IsChecked" Value="true"> 
        <Setter Property="Visibility" Value="Visible" TargetName="Down_Arrow"/> 
        <Setter Property="Visibility" Value="Collapsed" TargetName="Up_Arrow"/> 
       </Trigger> 
      </ControlTemplate.Triggers> 
     </ControlTemplate> 
     <Style x:Key="newExpanderStyle" TargetType="{x:Type Expander}"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type Expander}"> 
         <Grid> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="Auto"/> 
           <RowDefinition Height="*" x:Name="ContentRow"/> 
          </Grid.RowDefinitions> 
          <Border 
           x:Name="Border" 
           Grid.Row="0" 
           BorderThickness="{TemplateBinding BorderThickness}" 
           CornerRadius="2,2,0,0" 
          > 
           <Grid> 
            <Grid.ColumnDefinitions> 
             <ColumnDefinition Width="20"/> 
             <ColumnDefinition Width="*"/> 
            </Grid.ColumnDefinitions> 
            <ToggleButton 
             Template="{DynamicResource newToggleButtonControlTemplate}" 
             Background="{TemplateBinding Background}" 
             IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" 
             OverridesDefaultStyle="True" 
            /> 
            <ContentPresenter Grid.Column="1" Margin="4" RecognizesAccessKey="True" ContentSource="Header"/> 
           </Grid> 
          </Border> 
          <Border 
           x:Name="ExpandSite" 
           Grid.Row="1" 
           Visibility="Collapsed" 
           BorderThickness="1,0,1,1" 
           CornerRadius="0,0,2,2" 
          > 
           <ContentPresenter 
            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
            VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
            Margin="{TemplateBinding Padding}" 
            Focusable="false" 
           /> 
          </Border> 
         </Grid> 
         <ControlTemplate.Triggers> 
          <Trigger Property="IsExpanded" Value="True"> 
           <Setter Property="Visibility" Value="Visible" TargetName="ExpandSite"/> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </Page.Resources> 

    <Page.Background> 
     <LinearGradientBrush EndPoint="0.997,0.996" StartPoint="0.002,0.058"> 
      <GradientStop Color="#FF63A6DE" Offset="0"/> 
      <GradientStop Color="#FFC2DEF5" Offset="1"/> 
     </LinearGradientBrush> 
    </Page.Background> 

    <Grid x:Name="LayoutRoot"> 
     <Expander 
      Style="{DynamicResource newExpanderStyle}" 
      Header="Expander" 
      HorizontalAlignment="Left" 
      VerticalAlignment="Top" 
      Background="{DynamicResource NormalBrush}" 
     > 
      <Grid> 
       <Button Content="Hello World"/> 
      </Grid> 
     </Expander> 
    </Grid> 
</Page>