更改复选框的大小及其中的复选标记 [英] Changing the size of a checkbox and the check mark in it

问题描述

我的应用程序将在具有触摸屏的计算机上运行，​​由驾驶员在驾驶时操作。我使所有的图形元素更大，所以他们可以用香肠手指像我自己和更大的人操作。

My application will be run on computers with touch sceens, operated by police officers while driving. I'm making all of the graphical elements larger so they can be operated by people with sausage fingers like my own and bigger.

我有一个复选框，需要出现在屏幕上。我需要缩放复选框的大小和复选标记更大。我试图通过右键单击并选择编辑Tempate |编辑表达式混合中的复选框的模板编辑副本。我设置了副本，所以它将应用于所有复选框。

I've got a CheckBox that needs to appear on a screen. I need to scale the size of the check box and the check mark bigger. I tried editing the template for the Checkbox in Expression Blend by right-clicking and choosing Edit Tempate | Edit a Copy. I set up the copy so it would apply to all check boxes.

我可以通过模板绑定更大的框架的高度& width属性设置为控件的ActualHeight。但是，复选标记没有增长，因此在左上角。

I was able to make the box bigger by template binding it's height & width properties to the control's ActualHeight. However, the check mark did not grow as a result of that and is in the upper left corner. It doesn't look right, to say the least.

当我编辑模板时，这里是Xaml我回来了：

When I edited the template, here's the Xaml I got back:

<Style TargetType="{x:Type CheckBox}">
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="Background" Value="{StaticResource CheckBoxFillNormal}"/>
    <Setter Property="BorderBrush" Value="{StaticResource CheckBoxStroke}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="FocusVisualStyle" Value="{StaticResource EmptyCheckBoxFocusVisual}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CheckBox}">
                <BulletDecorator Background="Transparent" SnapsToDevicePixels="true">
                    <BulletDecorator.Bullet>
                        <Microsoft_Windows_Themes:BulletChrome BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" IsChecked="{TemplateBinding IsChecked}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="{TemplateBinding ActualHeight}" Height="{TemplateBinding ActualHeight}"/>
                    </BulletDecorator.Bullet>
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </BulletDecorator>
                <ControlTemplate.Triggers>
                    <Trigger Property="HasContent" Value="true">
                        <Setter Property="FocusVisualStyle" Value="{StaticResource CheckRadioFocusVisual}"/>
                        <Setter Property="Padding" Value="4,0,0,0"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Expression Blend不会让我决定BulletChrome的模板。

Expression Blend will not let me ecit the BulletChrome's template. The Edit Current and Edit a Copy choices are disabled.

如何完成我想要的操作？

How do I accomplish what I want to do?

Tony

推荐答案

XAML 默认是 BulletDecorator 可在在MSDN上找到 。几乎该页上的所有XAML块都处理了 BulletDecorator 的外观和行为。

The XAML for the default a made up example of a BulletDecorator can be found here on MSDN. Almost the entire chunk of XAML on that page deals with the appearance and behavior of the BulletDecorator.

的所有XAML是两个 Path 对象。第一个用于复选标记，第二个用于不确定标记（虽然名称InderminateMark在样例XAML中拼写错误。幸运的是，它在CheckBox示例中的拼写始终是错误的，因此可以。

At the heart of all that XAML are two Path objects. The first for the checkmark, and the second for the indeterminate mark (though the name 'InderminateMark' is spelled wrong in the sample XAML. Fortunately, it's spelled consistently wrong everywhere in the CheckBox example, so it's OK.

            <Path Visibility="Collapsed"
                  Width="7"
                  Height="7"
                  x:Name="CheckMark"
                  SnapsToDevicePixels="False"
                  StrokeThickness="2"
                  Data="M 0 0 L 7 7 M 0 7 L 7 0">
              <Path.Stroke>
                <SolidColorBrush Color="{DynamicResource GlyphColor}" />
              </Path.Stroke>
            </Path>
            <Path Visibility="Collapsed"
                  Width="7"
                  Height="7"
                  x:Name="InderminateMark"
                  SnapsToDevicePixels="False"
                  StrokeThickness="2"
                  Data="M 0 7 L 7 0">
              <Path.Stroke>
                <SolidColorBrush Color="{DynamicResource GlyphColor}" />
              </Path.Stroke>
            </Path>

正如H.B.在注释中，可以找到默认的WPF主题

As pointed out by H.B. in the comments, the default WPF themes can be found here.

这篇关于更改复选框的大小及其中的复选标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！