如何为 WPF 创建锁定/解锁复选框答案

【问题标题】：How to create a Lock / Unlocked checkbox for WPF如何为 WPF 创建锁定/解锁复选框
【发布时间】：2013-05-27 19:23:25
【问题描述】：

我有以下风格

<Style x:Key="LockBox" TargetType="CheckBox">
    <Style.Triggers>
        <Trigger Property="IsChecked" Value="True">
            <!-- Locked -->
            <Setter Property="Content" Value="&#x1f512;" />
        </Trigger>
        <Trigger Property="IsChecked" Value="False">
            <!-- Unlocked -->
            <Setter Property="Content" Value="&#x1f513;" />
        </Trigger>
    </Style.Triggers>
</Style>

这会将 unicode 锁定/解锁符号设置为复选框内容。然而我想将锁定/解锁符号放在图像所在的位置。如何这样做？

【问题讨论】：

“图片在哪里” - 你说的是哪张图片？实际的复选标记？如果是这样，您需要编辑 CheckBox 模板，控件的那部分将是 ToggleButton，您需要在其中相应地设置它的 Content。
我认为他希望将复选标记替换为锁定/解锁图标。要达到这个目标，您必须编辑 CheckBox ControlTemplate。
@Viv 实际上你是对的，我最终只是使用了一个切换按钮并在内容上使用了一个样式触发器。仍然对于我提出的具体问题，史蒂文的回答作为参考非常有用。

标签： wpf checkbox styles

【解决方案1】：

这是一个完整的 ControlTemplate 示例，您可以使用它来实现您的目标。

<ControlTemplate x:Key="CheckBoxTemplate" TargetType="{x:Type CheckBox}">
    <Grid Background="{TemplateBinding Background}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="24" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid
            Grid.Column="0" Grid.Row="0"
            Width="24" Height="24"
            VerticalAlignment="Center">
            <TextBlock Text="&#x1f512;" Name="LockedIcon" Visibility="Hidden" />
            <TextBlock Text="&#x1f513;" Name="UnlockedIcon" Visibility="Hidden"/>
            </Grid>
        <Border 
            x:Name="WhiteSpaceBorder"
            Grid.Column="1" Grid.Row="0" 
            Width="8" 
            Visibility="Visible"/>
        <ContentPresenter 
            Grid.Column="2" Grid.Row="0"
            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
            Margin="{TemplateBinding Padding}"
            RecognizesAccessKey="True" 
            TextBlock.Foreground="{TemplateBinding Foreground}"/>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsChecked" Value="True">
            <!-- Locked -->
            <Setter Property="Visibility" TargetName="LockedIcon" Value="Visible" />
        </Trigger>
        <Trigger Property="IsChecked" Value="False">
            <!-- Unlocked -->
            <Setter Property="Visibility" TargetName="UnlockedIcon" Value="Visible" />
        </Trigger>
        <Trigger Property="Content" Value="{x:Null}">
            <Setter Property="Visibility" TargetName="WhiteSpaceBorder" Value="Collapsed"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

【讨论】：

即使在这种情况下，我宁愿 ControlTemplate Trigger 修改 TextBlock 的 Text 而不是使用 2 个单独的 TextBlock 并切换可见性。一个是因为这样你只需要 1 个Trigger。其次，因为它为您提供了一些可扩展性，如果您将来有一个三态，则不需要在旧的Trigger 上添加另一个Visibility 切换并回溯，只需相应地设置Text。最后，xaml 元素越少越好。当触发器很好地实现它时，在这里有一个相互排斥的TextBlock 毫无意义......只是我的看法。