Question

想要将三种状态的中间状态复选框更改为显示字母＆＃39; R＆＃39; 而不是正方形。

你知道怎么做吗？

谢谢！

Answer 1

您必须修改ControlTemplate。添加到Resources模板的CheckBox副本并覆盖触发器<Trigger Property="IsChecked" Value="{x:Null}">

<ControlTemplate TargetType="{x:Type CheckBox}" x:Key="CheckBoxTemplate">
            <BulletDecorator Background="Transparent" SnapsToDevicePixels="true">
                <BulletDecorator.Bullet>
                    <Themes:ClassicBorderDecorator x:Name="CheckMark" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" BorderStyle="Sunken" Background="{TemplateBinding Background}">
                        <Path x:Name="CheckMarkPath" Data="M 0 2.0 L 0 4.8 L 2.5 7.4 L 7.1 2.8 L 7.1 0 L 2.5 4.6 Z" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Height="7" Margin="1,1,1,1" Width="7"/>
                    </Themes:ClassicBorderDecorator>
                </BulletDecorator.Bullet>
                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </BulletDecorator>
            <ControlTemplate.Triggers>
                <Trigger Property="IsChecked" Value="false">
                    <Setter Property="Visibility" TargetName="CheckMarkPath" Value="Hidden"/>
                </Trigger>
                <Trigger Property="IsChecked" Value="{x:Null}">
                    <Setter Property="Stretch" TargetName="CheckMarkPath" Value="Uniform"/>
                    <Setter Property="Data" TargetName="CheckMarkPath">
                        <Setter.Value>
                            <PathGeometry Figures="M16.6875,43.4995803833008L16.6875,67.8745803833008 27.375,67.8745803833008 30.2167949676514,67.6519241333008 32.8359375,66.9839553833008 35.173828125,65.8999710083008 37.171875,64.4292678833008 38.80078125,62.5777053833008 40.03125,60.3511428833008 40.8046875,57.7905960083008 41.0625,54.9370803833008 40.84423828125,52.389720916748 40.189453125,50.138256072998 39.09814453125,48.182689666748 37.5703125,46.5230178833008 35.62939453125,45.200267791748 33.298828125,44.255443572998 30.57861328125,43.688549041748 27.46875,43.4995803833008 16.6875,43.4995803833008z M8.8125,36.3745803833008L28.875,36.3745803833008 33.111328125,36.6499710083008 37.0078125,37.4761428833008 40.48828125,38.8648147583008 43.4765625,40.8277053833008 45.919921875,43.353099822998 47.765625,46.4292678833008 48.9257774353027,50.067943572998 49.3125,54.2808303833008 49.0488243103027,57.6499710083008 48.2578125,60.7261428833008 46.98046875,63.4976272583008 45.2578125,65.9527053833008 43.11328125,68.0796585083008 40.5703125,69.8667678833008 34.40625,72.3745803833008 34.40625,72.5620803833008 37.3359375,74.2730178833008 39.703125,76.5464553833008 41.9296875,79.5230178833008 44.390625,83.3902053833008 57,103.593330383301 47.625,103.593330383301 36.375,84.7495803833008 34.8515625,82.3179397583008 33.375,80.2730178833008 30.3984375,77.2495803833008 27.1171875,75.5386428833008 23.15625,74.9995803833008 16.6875,74.9995803833008 16.6875,103.593330383301 8.8125,103.593330383301 8.8125,36.3745803833008z" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property="IsPressed" Value="true">
                    <Setter Property="Background" TargetName="CheckMark" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                </Trigger>
                <Trigger Property="IsEnabled" Value="false">
                    <Setter Property="Background" TargetName="CheckMark" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                    <Setter Property="Fill" TargetName="CheckMarkPath" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

<CheckBox IsThreeState="True" Template="{StaticResource CheckBoxTemplate}"/>

Answer 2

@goul

input[type="checkbox"] {
    display: none;
}
input[type="checkbox"] + label {
    display: inline-block;
    border: 1px solid #000;
    width: 30px;
    height: 30px;
    position: relative;
}
input[type="checkbox"]:checked + label:after {
    content: 'R';
    display: inline-block;
    font-size: 1.6em;
}

<input type="checkbox" id="checkbox1">
<label for="checkbox1"></label>

三种状态复选框样式更改

2 个答案: