带有 TextBlock 和复选框的 XAML ToggleButton答案

【问题标题】：XAML ToggleButton with TextBlock and a Checkbox带有 TextBlock 和复选框的 XAML ToggleButton
【发布时间】：2014-08-01 14:05:07
【问题描述】：

我正在尝试创建一个带有 TextBox 和 CheckBox 的 WPF ToggleButton 作为它的控件模板。

这是我目前所拥有的：

    <Style TargetType="{x:Type ToggleButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <StackPanel Orientation="Horizontal">
                    <TextBlock x:Name="toggleButtonTextBlock" 
                               Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type ToggleButton}}, Path=Content}"/>
                    <CheckBox  x:Name="toggleButtonCheckBox" VerticalAlignment="Center" Margin="2" 
                               IsChecked="{Binding RelativeSource={RelativeSource AncestorType={x:Type ToggleButton}}, Path=IsChecked, Mode=TwoWay}" >
                    </CheckBox>
                </StackPanel>
                <ControlTemplate.Triggers>
                    <Trigger Property="ToggleButton.IsChecked" Value="True">
                        <Setter TargetName="toggleButtonTextBlock" Property="TextDecorations" Value="Underline"/>
                        <Setter TargetName="toggleButtonCheckBox" Property="IsChecked" Value="True"/>
                    </Trigger>
                    <Trigger Property="ToggleButton.IsChecked" Value="False">
                        <Setter TargetName="toggleButtonTextBlock" Property="TextDecorations" Value="{x:Null}"/>
                        <Setter TargetName="toggleButtonCheckBox" Property="IsChecked" Value="False"/>
                    </Trigger>
                    <Trigger Property="ToggleButton.IsChecked" Value="{x:Null}">
                        <Setter TargetName="toggleButtonTextBlock" Property="TextDecorations" Value="{x:Null}"/>
                        <Setter TargetName="toggleButtonCheckBox" Property="IsChecked" Value="False"/>
                    </Trigger>
                    <Trigger Property="ToggleButton.IsMouseOver" Value="True">
                        <Setter TargetName="toggleButtonTextBlock" Property="TextDecorations" Value="Underline"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

如果我单击 ToggleButton 的文本，则该文本会正确加下划线并选中 CheckBox。但是如果我单击 CheckBox，文本没有正确下划线（并且 ToggleButton 没有更改为 IsChecked=True）。

如何在单击 CheckBox 时将 ToggleButton 设为 IsChecked=True（并为文本加下划线）？

我想应该很简单，但对 XAML 相当缺乏经验，这似乎超出了我的理解范围。

感谢您的帮助

【问题讨论】：

标签： c# wpf xaml

【解决方案1】：

您可以简化触发器。在 WPF 中，如果触发器的计算结果为 false，则目标元素/属性将返回到其先前的状态。您对toggleButtonCheckBox 的绑定足以在ToggleButton 上设置IsChecked 属性；你不需要在触发器中设置它。

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="ToggleButton">
            <StackPanel Orientation="Horizontal">
                <TextBlock x:Name="toggleButtonTextBlock" 
                           Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type ToggleButton}}, Path=Content}"/>
                <CheckBox x:Name="toggleButtonCheckBox" 
                          VerticalAlignment="Center" 
                          Margin="2" 
                          IsChecked="{Binding RelativeSource={RelativeSource AncestorType={x:Type ToggleButton}}, Path=IsChecked, Mode=TwoWay}" >
                </CheckBox>
            </StackPanel>
            <ControlTemplate.Triggers>
                <!-- Will return to previous state if false -->
                <Trigger Property="ToggleButton.IsChecked" Value="True">
                    <Setter TargetName="toggleButtonTextBlock" 
                            Property="TextDecorations" 
                            Value="Underline"/>
                </Trigger>
                <Trigger Property="ToggleButton.IsMouseOver" Value="True">
                    <Setter TargetName="toggleButtonTextBlock" 
                            Property="TextDecorations"
                            Value="Underline"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>

【讨论】：