自定义复选框内容不可见答案

【问题标题】：Custom CheckBox Content is not visible自定义复选框内容不可见
【发布时间】：2014-01-16 07:09:38
【问题描述】：

我只是盯着 C# WPF 应用程序，我已经制作了一个自定义复选框。问题是复选框边框只能有 1 个孩子，所以我必须将路径和 contentPresenter 放入网格中。我的问题是内容（复选框文本）不可见...感谢您的帮助。

这是我的代码：

<Style TargetType="CheckBox">
    <Setter Property="FontSize" Value="11" />
    <Setter Property="FontFamily" Value="Moire Light" />
    <Setter Property="Foreground" Value="Yellow"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CheckBox}">
                <Border x:Name="bg" BorderBrush="Yellow" BorderThickness="1" CornerRadius="1" Width="15" Height="15" Background="Purple">
                    <Grid>
                        <ContentPresenter Margin="4,0,0,0"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Left"
                        />
                        <Path x:Name="CheckMark"
                          Width="8"
                          Height="8"
                          HorizontalAlignment="Center"
                          VerticalAlignment="Center"
                          Data="M 0 0 L 8 8 M 0 8 L 8 0"
                          Stretch="Fill"
                          Stroke="Yellow"
                          StrokeEndLineCap="Round"
                          StrokeStartLineCap="Round"
                          StrokeThickness="1" />
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="false">
                        <Setter TargetName="CheckMark" Property="Visibility" Value="Collapsed" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

【问题讨论】：

标签： c# wpf

【解决方案1】：

这是你的CheckBox：

有一些事情不正确，检查控件时没有触发，可见性应该隐藏而不是折叠。我还定义了内容对齐以使用模板中的值，如原始CheckBox

注意：我使用了具有自动宽度的网格列，但 @HighCore 是正确的，DockPanel 更好。

<Window x:Class="WpfApplication4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>

        <Style TargetType="CheckBox" x:Key="myCheckBoxStyle">
    <Setter Property="FontSize" Value="11" />
    <Setter Property="FontFamily" Value="Moire Light" />
    <Setter Property="Foreground" Value="Yellow"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CheckBox}">
                <Border x:Name="bg" BorderBrush="Yellow" BorderThickness="1" CornerRadius="1"  Background="Purple">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="1*"/>
                        </Grid.ColumnDefinitions>
                        <Path x:Name="CheckMark"
                            Width="8"
                            Height="8"
                            Data="M 0 0 L 8 8 M 0 8 L 8 0"
                            Stretch="Fill"
                            Stroke="Yellow"
                            StrokeEndLineCap="Round"
                            StrokeStartLineCap="Round"
                            StrokeThickness="1" Grid.ColumnSpan="1" Margin="2" />
                        <ContentPresenter Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        />
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="False">
                        <Setter Property="Visibility" TargetName="CheckMark" Value="Hidden"/>
                    </Trigger>
                    <Trigger Property="IsChecked" Value="True">
                            <Setter Property="Visibility" TargetName="CheckMark" Value="Visible"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
    </Window.Resources>
    <Grid  >
        <CheckBox Content="CheckBox" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10,0,0" Height="58.31" Width="141.317" IsChecked="True" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Style="{DynamicResource myCheckBoxStyle}"/>
        <CheckBox Content="CheckBox" HorizontalAlignment="Left" Height="43.31" Margin="334,95.935,0,0" VerticalAlignment="Top" Width="116" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
        <CheckBox Content="CheckBox" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="34,89,0,0" Height="58.31" Width="141.317" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Style="{DynamicResource myCheckBoxStyle}"/>
        <CheckBox Content="CheckBox" HorizontalAlignment="Left" Height="43.31" Margin="349,16.935,0,0" VerticalAlignment="Top" Width="116" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" IsChecked="True"/>

    </Grid>
</Window>

此外，我强烈建议您在 Blend 中编辑您的模板，这会使事情变得更容易。

【讨论】：

就像@Sheridan 所说的那样... +1 为图像做出努力
@TheMatto... 是的，但我实际上对帖子投了赞成票，而不仅仅是说 +1。

【解决方案2】：

改用DockPanel：

 <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type CheckBox}">
                        <DockPanel>
                            <Border x:Name="bg" BorderBrush="Yellow" BorderThickness="1" CornerRadius="1" Width="15" Height="15" Background="Purple"
                                    DockPanel.Dock="Left">
                                <Path x:Name="CheckMark"
                                          Width="8"
                                          Height="8"
                                          VerticalAlignment="Center"
                                          Data="M 0 0 L 8 8 M 0 8 L 8 0"
                                          Stretch="Fill"
                                          Stroke="Yellow"
                                          StrokeEndLineCap="Round"
                                          StrokeStartLineCap="Round"
                                          StrokeThickness="1" />
                            </Border>

                            <ContentPresenter Margin="4,0,0,0"
                                              VerticalAlignment="Center"/>

                        </DockPanel>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="false">
                                <Setter TargetName="CheckMark" Property="Visibility" Value="Collapsed" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

【讨论】：