wpf - 如何创建像 Word 选项一样的黄色切换按钮

Question

我正在尝试创建一个菜单，其按钮类似于 Word 中的选项菜单（如下）。

这是我缺少的特定 WPF 控件，还是自定义样式的按钮？我尝试在切换时设置背景，但它看起来不像：

    <ToggleButton>
                <Border>
                    <Border.Style>
                        <Style TargetType="{x:Type Border}">
                            <Setter Property="Background" Value="Transparent"/>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding ElementName=parentButton, Path=IsChecked}" Value="True">
                                    <Setter Property="Background" Value="Orange"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Border.Style>
                    <Label Content="Modify Variations"></Label>
                </Border>

            </ToggleButton>

Answer 1

像这样的模板会帮助你

<Window.Resources>
    <Style TargetType="ToggleButton">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="Padding" Value="10,5,0,5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border x:Name="bord" BorderThickness="{TemplateBinding Property=BorderThickness}" CornerRadius="3">
                        <ContentPresenter VerticalAlignment="{TemplateBinding Property=VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding Property=HorizontalContentAlignment}" Margin="{TemplateBinding Property=Padding}"/>
                    </Border>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="true">
                           <!--put setters here to change button background when IsChecked = true-->
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

请注意，您可以添加其他触发器，例如：IsEnabled, IsMouseOver,IsPressed来自定义您自己的ToggleButton样式

编辑：

您还可以在此处获取 Microsoft Word 主题文件

WPF Office 2010 蓝色主题

Answer 2

你可以这样试试！！！

    <ControlTemplate x:Key="ToggleButtonControlTemplate1" TargetType="{x:Type ToggleButton}">
        <Border x:Name="outerBorder" BorderBrush="Black">
            <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Transparent" Offset="0"/>
                    <GradientStop Color="Transparent" Offset="1"/>
                    <GradientStop Color="Transparent" Offset="0.125"/>
                    <GradientStop Color="Transparent" Offset="0.724"/>
                </LinearGradientBrush>
            </Border.Background>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal"/>
                    <VisualState x:Name="MouseOver">
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" Storyboard.TargetName="outerBorder">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0.004"/>
                            </DoubleAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="outerBorder">
                                <EasingColorKeyFrame KeyTime="0" Value="#FFFDF9E8"/>
                            </ColorAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="outerBorder">
                                <EasingColorKeyFrame KeyTime="0" Value="#FFFDEAA2"/>
                            </ColorAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="outerBorder">
                                <EasingColorKeyFrame KeyTime="0" Value="#FFFDE794"/>
                            </ColorAnimationUsingKeyFrames>                             
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="outerBorder">
                                <EasingColorKeyFrame KeyTime="0" Value="#FFF7D84B"/>
                            </ColorAnimationUsingKeyFrames>
                            <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="outerBorder">
                                <EasingThicknessKeyFrame KeyTime="0" Value="1"/>
                            </ThicknessAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.CornerRadius)" Storyboard.TargetName="outerBorder">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <CornerRadius>5</CornerRadius>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Pressed"/>
                    <VisualState x:Name="Disabled"/>
                </VisualStateGroup>
                <VisualStateGroup x:Name="CheckStates">
                    <VisualState x:Name="Checked">
                        <Storyboard>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="innerBorder">
                                <EasingColorKeyFrame KeyTime="0" Value="#FFFFE48A"/>
                            </ColorAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="innerBorder">
                                <EasingColorKeyFrame KeyTime="0" Value="#FFC2762B"/>
                            </ColorAnimationUsingKeyFrames>
                            <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="innerBorder">
                                <EasingThicknessKeyFrame KeyTime="0" Value="2"/>
                            </ThicknessAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.CornerRadius)" Storyboard.TargetName="innerBorder">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <CornerRadius>5</CornerRadius>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Unchecked"/>
                    <VisualState x:Name="Indeterminate"/>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Border x:Name="innerBorder" Background="Transparent" BorderBrush="Black">
                <TextBlock TextWrapping="Wrap" Text="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
        </Border>
    </ControlTemplate>

</Window.Resources>

<Grid x:Name="LayoutRoot">
    <ToggleButton Content="ToggleButton" Margin="172,145,93,147" Template="{DynamicResource ToggleButtonControlTemplate1}" />
</Grid>