如何仅修改扩展器按钮背景?WPF [英] How to modify Expander button background only? WPF

问题描述

我在一个蓝色背景的窗口上放置了一个扩展器，我想让扩展器的按钮与默认颜色(蓝色，它从窗口接收到的颜色)不同.当我修改扩展器的背景属性时，它会将整个扩展器、标题和所有内容更改为新颜色.但是，我只想更改按钮本身.谁能指出我正在寻找的正确财产?谢谢

I have an Expander placed on a window with a blue background and I would like to make the button for the expander another color than the default (blue, which it is receiving from the window). When I modify the background property of the expander it changes the entire expander, header and all to the new color. However, I would like only the button itself to change. Could anyone point me to the right property that I am looking for? Thank you

推荐答案

您不仅需要重新模板化扩展器 ... 您还需要重新模板化扩展器模板中的 ToggleButton ... 以便您可以模板绑定扩展器上的背景画笔集，一直向下贯穿扩展器的视觉效果并进入切换按钮的视觉效果(使用两个模板绑定).

You not only have to retemplate the Expander ... you need to retemplate the ToggleButton within the Expander's template ... so that you can template bind the Background brush set on the Expander all the way down through the Expander's visuals and into the ToggleButton's visuals (using two TemplateBindings).

当您学习如何修改 WPF 控件的视觉效果时，有用的一件事(至少对我而言)是使用 SimpleStyles，因为它们比完全成熟的普通样式更容易复制和修改……风格与模板.

One thing that is helpful (at least for me) when you are learning how to modify the visuals of the WPF controls is to use the SimpleStyles as these are much easier to copy and modify ... than the full fledged, normal styles & templates.

为此，打开 Blend 并进入资产库(最底部的工具)...如果单击它，您将看到两组控件:系统控件和简单样式.从 Simple Styles 中获取一个控件(无论你想要哪个)，然后将它放在设计图面上.然后，您可以右键单击它，编辑控制部件(模板)，然后编辑副本.这将创建简单样式样式和模板的副本......然后您可以(更轻松地)修改您的内容.

To do this, open up Blend and go into the Asset Library (the bottom most tool) ... if you click on that you will see two sets of controls: System Controls and Simple Styles. Grab one of the controls (whichever one you want) from the Simple Styles and plunk it down on the design surface. Then, you can right click on it, Edit Control Parts (Template), and Edit a Copy. This will create a copy of the Simple Styles style and template ... which you can then (more easily) modify to your hearts content.

(此时我应该注意，然后我将在 Visual Studio 和 Blend 中修改该 xaml(由 Blend 生成)......根据需要来回翻转......并利用每个的优势:Blend其所见即所得的设计界面……以及 Visual Studio 的代码编辑和智能感知支持.)

(I should note at this point that I would then modify that xaml (generated by Blend) in both Visual Studio and Blend ... flipping back and forth as necessary ... and taking advantage of the strengths of each: Blend for its WYSIWYG design surface ... and Visual Studio for its code editing and IntelliSense support.)

我已经起草了一些快速的 xaml，可以满足您的要求，并将包含在下面.您应该可以在 Kaxaml 或其他松散的 xaml 编辑器中删除此 xaml.

I have drafted up some quick xaml that does what you are asking and will include it below. You should be able to drop this xaml in Kaxaml or another loose xaml editor.

希望这会有所帮助.

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

这篇关于如何仅修改扩展器按钮背景?WPF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！