Изменение размера флажка и галочки в нем

Question

Мое приложение будет работать на компьютерах с сенсорными очками, которыми управляют сотрудники милиции во время вождения. Я делаю все графические элементы более крупными, чтобы их можно было использовать людьми с колбасными пальцами, такими как мои собственные и больше.

У меня есть CheckBox, который должен появиться на экране. Мне нужно масштабировать размер флажка и галочку больше. Я попытался изменить шаблон флажка в Expression Blend, щелкнув правой кнопкой мыши и выбрав Edit Tempate | Редактирование копии. Я установил копию, чтобы она применима ко всем флажкам.

Я смог сделать коробку больше по шаблону, привязав к ней высоту & Свойства ширины для 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 для по умолчанию a приведенный пример 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> 

Как отметил НВ в комментариях, тем WPF по умолчанию можно найти here.

Answer 2

Что вы ищете является Путь, что на самом деле является галочка и нужно будет отредактировать его. Если вы посмотрите раздел this article о пользовательской работе флажка в WPF, он показывает вам, как это сделать довольно просто. Если вам нужен еще один пример, я могу быстро вытащить из игры довольно быстро после работы чуть позже. Ура!

Answer 3

Не идеально, но это работает. Вы стилизации TextBlock (например FontSize, высота ...) и галочка растет с TextBlock.

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

Answer 4

Если вы измените размер, вам придется также изменить путь, пути будут привязаны к размеру. Если у вас уже есть путь и вы хотите масштабировать его, вы можете пропорционально увеличить все числовые значения.

Недавно мне нужно было изменить собственный стиль MSDN в стиле [x] в галочке (https://msdn.microsoft.com/en-us/library/ms752319(v=vs.85).aspx), и здесь путь до и после.

<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="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 coodinates для их начальной и конечной позиции. Обратите внимание, что в первом изображении цифры варьируются от 0 до 7, а размер 7x7. Также обратите внимание, что во втором изображении (тик) я увеличил размер до 9x9.

Все, что я сделал, чтобы настроить их для начала и конца vector2 позиций каждой строки, чтобы получить форму галочки.

Альтернатива ручному редактированию - загрузить бесплатную версию «Microsoft Expression Design 4». Затем вы можете создать новое изображение с требуемым размером, затем использовать функцию EXPORT и выбрать формат файла XAML, а затем проверить полученный файл и выбрать путь от него.