WPF按钮样式

时间:2018-08-15 13:11:15

标签: wpf button

我有一种样式:为切换按钮定义了“ MinorBusinessAreaToggleButtonStyle”,并且我想合并“ ToggleButton.Style”,但是我不了解如何将“ ToggleButton.Style”组合到“ MinorBusinessAreaToggleButtonStyle”样式中。

<Style x:Key="MinorBusinessAreaToggleButtonStyle" TargetType="ToggleButton" BasedOn="{StaticResource ToggleButton_Style_Base}">
        <Setter Property="Margin" Value="10 0 0 5"/>
        <Setter Property="Padding" Value="8 0 8 0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border Background="{TemplateBinding Background}"
                            CornerRadius="5" 
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}" >
                        <ContentPresenter 
                            Margin="{TemplateBinding Padding}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>


                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="Foreground" Value="{DynamicResource Gold}"/>

                        </Trigger>
                        <Trigger Property="IsChecked" Value="False">
                            <Setter Property="Foreground" Value="Gray"/>

                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

我想将以下内容纳入上述样式:

<ToggleButton.Style>
            <Style TargetType="{x:Type ToggleButton}">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="False">
                        <Setter Property="Background" Value="HotPink" />
                        <Setter Property="Opacity" Value="1.0" />
                    </Trigger>
                    <EventTrigger RoutedEvent="MouseLeave">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.2" To="1"></DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="MouseEnter">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.2" To="0.2"></DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Style.Triggers>
            </Style>
        </ToggleButton.Style>

1 个答案:

答案 0 :(得分:1)

使用Style将第二个x:Key定义为资源。您可能需要根据需要将其基于ToggleButton_Style_Base

<Style x:Key="FirstStyle" TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource ToggleButton_Style_Base}">
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="False">
            <Setter Property="Background" Value="HotPink" />
            <Setter Property="Opacity" Value="1.0" />
        </Trigger>
        <EventTrigger RoutedEvent="MouseLeave">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.2" To="1"></DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="MouseEnter">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.2" To="0.2"></DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Style.Triggers>
</Style>

然后可以将示例中的第一种样式基于第二种样式:

<Style x:Key="MinorBusinessAreaToggleButtonStyle" TargetType="ToggleButton" BasedOn="{StaticResource FirstStyle}">
...

如果在同一文件中定义Styles,请确保以正确的顺序定义它们。即是ToggleButton_Style_Base,然后是FirstStyle,然后是MinorBusinessAreaToggleButtonStyle

您可以通过设置ToggleButton属性将任何样式应用于Style

<ToggleButton Style="{StaticResource FirstStyle}" ... />