代码之家  ›  专栏  ›  技术社区  ›  Totty

如何只修改扩展器按钮背景?WPF

  •  3
  • Totty  · 技术社区  · 16 年前

    我在一个蓝色背景的窗口上放置了一个扩展器,我想将扩展器的按钮设置为默认颜色以外的其他颜色(蓝色,它从窗口接收)。当我修改扩展器的background属性时,它会将整个扩展器、header和all更改为新颜色。但是,我只想更改按钮本身。有人能给我指一下我要找的合适的房子吗? 谢谢你

    1 回复  |  直到 16 年前
        1
  •  14
  •   cplotts    16 年前

    你不仅要重新安装扩展器…您需要在扩展器的模板中重新执行ToggleButton。 …这样,您就可以通过扩展器的视觉效果将扩展器上设置的背景画笔模板绑定到ToggleButton的视觉效果中(使用两个模板绑定)。

    当您学习如何修改WPF控件的视觉效果时(至少对我而言)有一点很有用,那就是使用SimpleStyles,因为它们更易于复制和修改…而不是成熟的、普通的样式和模板。

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

    (此时我应该注意,我将在Visual Studio和Blend中修改该XAML(由Blend生成)。必要时来回翻转…并利用各自的优势:混合为其所见即所得的设计表面…以及支持代码编辑和智能感知的Visual Studio。)

    我已经起草了一些快速的XAML,可以满足您的要求,并将其包含在下面。您应该能够在kaxaml或其他松散的xaml编辑器中删除此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>