¿Cómo modificar el fondo del botón Expander solamente? WPF

Question

Tengo un expansor colocado en una ventana con fondo azul y me gustaría hacer que el botón del expansor sea de otro color que el predeterminado (azul, que está recibiendo de la ventana). Cuando modifico la propiedad de fondo del expansor, cambia todo el expansor, encabezado y todo al nuevo color. Sin embargo, me gustaría que solo el botón cambie. ¿Alguien podría indicarme la propiedad correcta que estoy buscando? Gracias

Answer 1

No solo tiene que reimprimir el expansor ... necesita volver a aplicar el ToggleButton dentro de la plantilla del expansor ... para que pueda unir el conjunto de pinceles de fondo del expansor completamente a través de los visuales del expansor y en los visuales de ToggleButton (usando dos TemplateBindings).

Una cosa que es útil (al menos para mí) cuando estás aprendiendo a modificar las imágenes de los controles WPF es usar los estilos simples ya que estos son mucho más fáciles de copiar y modificar ... que los estilos y plantillas normales completos. .

Para hacerlo, abra Mezclar e ingrese a la Biblioteca de activos (la herramienta de abajo hacia arriba) ... si hace clic en ella verá dos conjuntos de controles: Controles del sistema y Estilos simples. Tome uno de los controles (el que desee) de los Estilos simples y empújelo sobre la superficie de diseño. Luego, puede hacer clic derecho en él, Editar partes de control (Plantilla) y Editar una copia. Esto creará una copia del estilo y plantilla de Estilos simples ... que luego podrá (más fácilmente) modificar al contenido de su corazón.

(Debo señalar en este punto que luego modificaría ese xaml (generado por Blend) tanto en Visual Studio como en Blend ... dando saltos hacia adelante y hacia atrás según sea necesario ... y aprovechando las fortalezas de cada uno: mezcla para su WYSIWYG superficie de diseño ... y Visual Studio para su edición de código y soporte de IntelliSense).

He redactado un xaml rápido que hace lo que estás preguntando y lo incluiré a continuación. Deberías poder soltar este xaml en Kaxaml u otro editor de xaml suelto.

Espero que esto ayude.

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