Question

我的应用程序将在具有触摸风格的计算机上运行，由驾驶员在驾驶时操作。我正在制作更大的图形元素，这样它们就可以被像我自己和更大的香肠手指一样的人操作。

我有一个需要出现在屏幕上的CheckBox。我需要缩放复选框的大小和复选标记。我尝试通过右键单击并选择Edit Tempate |来编辑Expression Blend中Checkbox的模板编辑副本。我设置了副本，因此它适用于所有复选框。

我能够通过模板绑定它的高度和尺寸来使盒子更大。 width属性到控件的ActualHeight。但是，复选标记没有因此而增长，位于左上角。至少可以说它看起来不对。

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

<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的模板。 “编辑当前”和“编辑副本”选项已禁用。

我如何完成我想做的事？

贝

Answer 1

默认的XAML可以找到BulletDecorator的组成示例here on MSDN。该页面上几乎整个XAML块都处理BulletDecorator的外观和行为。

XAML的核心是两个Path个对象。第一个用于复选标记，第二个用于不确定标记（尽管名称'InderminateMark'在示例XAML中拼写错误。幸运的是，在CheckBox示例中，它的拼写始终是错误的，所以没关系。

            <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主题here.

Answer 2

不完美，但它确实有效。您设置TextBlock的样式（例如FontSize，Height ...），并使用TextBlock增加复选标记。

<StackPanel Name="CheckBoxPanel" Orientation="Horizontal">
    <Viewbox Height="{Binding Path=ActualHeight, ElementName=CheckBoxPanel}">
        <CheckBox />
    </Viewbox>
    <TextBlock /> <!-- for CheckBox Content -->
</StackPanel>

Answer 3

您正在寻找的是路径，它实际上是复选标记，需要对其进行编辑。如果你查看了this article关于WPF中自定义复选框工作的部分，它基本上向你展示了如何做到这一点非常简单。如果你想进一步的例子，我可以在今天稍后的工作后快速地踢出一个。干杯！

Answer 4

如果更改大小，则还必须更改路径，路径固定为大小。如果您已经有路径并且只想缩放它，则可以按比例增加所有数值。

我最近需要将MSDN的示例自定义复选框[x]样式更改为刻度线（https://msdn.microsoft.com/en-us/library/ms752319(v=vs.85).aspx），此处路径位于之前和之后。

original path checkbox

<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>

enter image description here

<Path Visibility="Collapsed"
    Width="9"
    Height="9"
    x:Name="CheckMark"
    SnapsToDevicePixels="False"
    StrokeThickness="2"
    Data="M 1 4.5 L 4 7.5 M 4 7.5 L 8 1">
    <Path.Stroke>
        <SolidColorBrush Color="{DynamicResource GlyphColor}" />
    </Path.Stroke>
</Path>

这两个示例都有一条路径，其中两条线使用XY坐标作为其起点和终点位置。请注意，在第一张图像中，数字范围为0到7，大小为7x7。另请注意在第二张图片（勾号）中我将尺寸增加到9x9。

我所做的只是调整每行的起始和结束vector2位置的数字以获得刻度形状。

手动编辑的替代方法是下载免费版的“Microsoft Expression Design 4”。然后，您可以创建所需大小的新图像，然后使用EXPORT函数并选择XAML文件格式，然后检查生成的文件并从中获取路径。

更改复选框的大小及其中的复选标记

4 个答案: