Como modificar apenas Expander fundo botão? WPF
Pergunta
Eu tenho um Expander colocado em uma janela com um fundo azul e eu gostaria de fazer o botão para o expansor outra cor diferente do padrão (azul, que ele está recebendo a partir da janela). Quando eu modificar a propriedade do expansor de fundo muda o expansor inteiro, cabeçalho e tudo para a nova cor. No entanto, gostaria apenas o próprio botão para mudar. Alguém poderia me aponte para o direito de propriedade que estou procurando? Obrigado
Solução
Você não só tem que retemplate o Expander ... você precisa retemplate o ToggleButton dentro do template do Expander ... para que você possa template ligam o conjunto escova de fundo sobre o Expander todo o caminho para baixo através de recursos visuais do expansor e para o visual do ToggleButton (usando dois TemplateBindings).
Uma coisa que é útil (pelo menos para mim) quando você está aprendendo como modificar o visual dos controles WPF é usar os SimpleStyles como estes são muito mais fáceis de copiar e modificar ... do que o de pleno direito, normal, estilos e modelos.
Para fazer isso, abra o Blend e ir para a biblioteca de ativos (parte inferior mais ferramenta) ... se você clicar em que você vai ver dois conjuntos de controles: Controles do sistema e estilos simples. Grab um dos controles (qualquer um que você quer) dos estilos simples e plunk-lo para baixo na superfície de design. Depois, você pode clique direito sobre ele, Edit Control Parts (modelo), e edite uma cópia. Isto irá criar uma cópia do estilo estilos simples e modelo ... que você pode então (mais facilmente) modificar a seu índice dos corações.
(Devo observar neste ponto que eu gostaria, em seguida, modificar esse xaml (gerados por mistura) em ambos os Visual Studio e Mistura ... lançando frente e para trás, conforme necessário ... e aproveitando os pontos fortes de cada um: Mistura por sua superfície de design WYSIWYG ... e Visual Studio para a sua edição de código e suporte IntelliSense.)
I elaboraram-se algumas xaml rápidas que faz o que você está pedindo e vai incluí-lo abaixo. Você deve ser capaz de deixar cair este xaml em Kaxaml ou outro editor de XAML livre.
Espero que isso ajude.
<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>