Как изменить только фон кнопки Expander? WPF

Question

У меня есть Expander, помещенный в окно с синим фоном, и я хотел бы сделать кнопку для экспандера другим цветом, чем по умолчанию (синий, который он получает из окна). Когда я изменяю свойство background экспандера, оно меняет весь экспандер, заголовок и все на новый цвет. Однако хотелось бы изменить только саму кнопку. Может ли кто-нибудь указать мне подходящую недвижимость, которую я ищу? Спасибо

Answer 1

Вам нужно не только повторно шаблонировать Expander ... вы должны повторно шаблонировать ToggleButton в шаблоне Expander ... так, чтобы вы могли полностью связать шаблон с кистью Background, установленной на Expander. вниз через визуальные элементы Expander и в визуальные элементы ToggleButton (используя два TemplateBindings).

Одна вещь, которая полезна (по крайней мере для меня), когда вы изучаете, как изменить визуальные элементы управления WPF, - это использовать SimpleStyles, поскольку их гораздо проще копировать и изменять ..., чем полноценные, обычные стили & amp; шаблоны.

Для этого откройте Blend и перейдите в библиотеку активов (самый нижний инструмент) ... если вы нажмете на нее, вы увидите два набора элементов управления: системные элементы управления и простые стили. Возьмите один из элементов управления (тот, который вы хотите) от простых стилей и вставьте его на поверхность дизайна. Затем вы можете щелкнуть по нему правой кнопкой мыши, изменить элементы управления (шаблон) и отредактировать копию. Это создаст копию стиля и шаблона «Простые стили», которые затем (более легко) можно будет изменить в соответствии с содержанием вашего сердца.

(в этот момент я должен отметить, что я бы затем изменил этот xaml (созданный Blend) как в Visual Studio, так и в Blend ... переворачивая его по мере необходимости ... и используя преимущества каждого из них: Blend для его WYSIWYG дизайна поверхности ... и Visual Studio для его редактирования кода и поддержки IntelliSense.)

Я подготовил несколько быстрых 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>