wpf - Cambiar el tamaño de una casilla de verificación y la marca de verificación en ella

templates checkbox

Question

Mi aplicación se ejecutará en computadoras con pantallas táctiles, operadas por agentes de policía mientras conducen. Estoy ampliando todos los elementos gráficos para que puedan ser operados por personas con dedos de salchicha como los míos y más grandes.

Tengo un CheckBox que debe aparecer en una pantalla. Necesito ampliar el tamaño de la casilla de verificación y la marca de verificación más grande. Intenté editar la plantilla de Checkbox en Expression Blend haciendo clic derecho y eligiendo Editar Tempate | Edita una copia. Configuré la copia para que se aplique a todas las casillas de verificación.

Pude agrandar la caja mediante la plantilla vinculando sus propiedades de altura y ancho con la Altura real del control. Sin embargo, la marca de verificación no creció como resultado de eso y está en la esquina superior izquierda. No se ve bien, por decir lo menos.

Cuando edité la plantilla, aquí está la Xaml que obtuve:

<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 no me permitirá ecitar la plantilla de BulletChrome. Las opciones Editar actual y Editar una copia están deshabilitadas.

¿Cómo logro lo que quiero hacer?

Tony

Answer 1

Lo que está buscando es la ruta de acceso que realmente es la marca de verificación y deberá editarla. Si revisa la sección de este artículo sobre el trabajo de casillas personalizadas en WPF, básicamente le muestra cómo hacerlo de manera bastante simple. Si desea más ejemplos, puedo patear uno muy rápido después del trabajo un poco más tarde hoy. ¡Aclamaciones!

Answer 2

El XAML para el ejemplo predeterminado creado de un BulletDecorator se puede encontrar aquí en MSDN . Casi todo el fragmento de XAML en esa página trata de la apariencia y el comportamiento de BulletDecorator .

En el corazón de todo lo que XAML son dos objetos Path . El primero para la marca de verificación, y el segundo para la marca indeterminada (aunque el nombre ''InderminateMark'' se deletrea incorrectamente en la muestra XAML. Afortunadamente, se escribe de manera consistente incorrecta en todas partes en el ejemplo de CheckBox, así que está bien.

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

Como señaló HB en los comentarios, los temas predeterminados de WPF se pueden encontrar aquí.

Answer 3

Si cambia el tamaño, también deberá cambiar la ruta, las rutas se fijarán al tamaño. Si ya tiene un camino y solo quiere escalarlo, puede aumentar todos los valores numéricos proporcionalmente.

Recientemente necesité cambiar el estilo de casilla de verificación personalizado de ejemplo de MSDN [x] en una marca ( https://msdn.microsoft.com/en-us/library/ms752319(v=vs.85).aspx ), y aquí la ruta es antes y después.

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

Ambos ejemplos tienen una ruta con dos líneas que usan coeodinatos XY para su posición inicial y final. Observe que en la primera imagen los números van de 0 a 7 y el tamaño es 7x7. También tenga en cuenta que en la segunda imagen (la marca) aumenté el tamaño a 9x9.

Todo lo que hice para hacer esto fue ajustar los números para las posiciones inicial y final vector2 de cada línea para obtener la forma de tic.

Una alternativa a la edición manual es descargar la versión gratuita de ''Microsoft Expression Design 4''. Luego puede hacer una nueva imagen con el tamaño deseado, luego usar la función EXPORTAR y seleccionar un formato de archivo XAML, luego verificar el archivo producido y tomar la ruta desde él.

Answer 4

No es perfecto, pero funciona. Usted estilo el TextBlock (por ejemplo, FontSize, Height ...) y la marca de verificación crece con el TextBlock.

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