Шаблон флажка в WPF

#wpf #templates #checkbox

#wpf #шаблоны #флажок

Вопрос:

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

Ответ №1:

просто взгляните на этот xaml

 <Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300"  >
<Window.Resources>
    <Style x:Key="CheckBoxFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border>
                        <Rectangle Margin="15,0,0,0" Stroke="#60000000" StrokeThickness="1" StrokeDashArray="1 2"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!-- PressedBrush is used for Pressed in Button, Radio Button, CheckBox -->
    <LinearGradientBrush x:Key="PressedBrush" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#BBB" Offset="0.0"/>
        <GradientStop Color="#EEE" Offset="0.1"/>
        <GradientStop Color="#EEE" Offset="0.9"/>
        <GradientStop Color="#FFF" Offset="1.0"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="PressedBorderBrush" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#444" Offset="0.0"/>
        <GradientStop Color="#888" Offset="1.0"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="NormalBrush" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#EEE" Offset="0.0"/>
        <GradientStop Color="#CCC" Offset="1.0"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="GlyphBrush" Color="#444"/>
    <LinearGradientBrush x:Key="NormalBorderBrush" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#CCC" Offset="0.0"/>
        <GradientStop Color="#444" Offset="1.0"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="MouseOverBrush" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#FFF" Offset="0.0"/>
        <GradientStop Color="#AAA" Offset="1.0"/>
    </LinearGradientBrush>
    <!-- Simple CheckBox -->
    <Style x:Key="CheckBoxStyle1" TargetType="{x:Type CheckBox}">
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="FocusVisualStyle" Value="{DynamicResource CheckBoxFocusVisual}"/>
        <Setter Property="Background" Value="{DynamicResource NormalBrush}"/>
        <Setter Property="BorderBrush" Value="{DynamicResource NormalBorderBrush}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type CheckBox}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <!-- BulletDecorator is used to provide baseline alignment between the checkmark and the Content -->
                        <BulletDecorator  x:Name="test" Grid.Column="0">
                            <BulletDecorator.Bullet>
                                <Grid Width="13" Height="13">
                                    <Border x:Name="Border" 
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="{TemplateBinding BorderThickness}"/>
                                    <Path x:Name="CheckMark" Stroke="{DynamicResource GlyphBrush}" 
                                StrokeThickness="2" 
                                SnapsToDevicePixels="False" Data="M 0 0 L 13 13 M 0 13 L 13 0"/>
                                </Grid>
                            </BulletDecorator.Bullet>
                        </BulletDecorator>
                        <ContentPresenter Grid.Column="1" 
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                    Margin="{TemplateBinding Padding}" 
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                    RecognizesAccessKey="True"/>

                    </Grid>
                    <!-- This uses Visibility to hide and show the CheckMark on IsChecked -->
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="false">
                            <Setter Property="Visibility" Value="Collapsed" TargetName="CheckMark"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Background" Value="{DynamicResource MouseOverBrush}" TargetName="Border"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Background" Value="{DynamicResource PressedBrush}" TargetName="Border"/>
                            <Setter Property="BorderBrush" Value="{DynamicResource PressedBorderBrush}" TargetName="Border"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Background" Value="gray" TargetName="Border"/>
                            <Setter Property="BorderBrush" Value="black" TargetName="Border"/>
                        </Trigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</Window.Resources>

<Grid x:Name="LayoutRoot">
    <CheckBox HorizontalAlignment="Left" 
    Margin="0,5,0,0" Style="{DynamicResource CheckBoxStyle1}" 
    VerticalAlignment="Top" Width="182" Height="17" 
    Content="Disabled" IsEnabled="False" IsChecked="True"  />
    <CheckBox HorizontalAlignment="Left" 
    Margin="125,5,0,0" Style="{DynamicResource CheckBoxStyle1}" 
    VerticalAlignment="Top" Width="182" Height="17" 
    Content="Active" IsEnabled="true" />
</Grid>
  

Комментарии:

1. Это работает именно так, как я хотел… Большое спасибо Кишоре …:)@Kishore

Ответ №2:

У меня была такая же проблема, и я придумал довольно глупое решение:

 <StackPanel  Orientation="Vertical"  >
        <TextBlock Text="Set Global Edition" TextWrapping="Wrap" HorizontalAlignment="Center" />
        <CheckBox x:Name="GlobalEdition" IsChecked="{Binding IsGlobal}" HorizontalAlignment="Center" />
</StackPanel>
  

Поскольку текстовый блок и флажок разделены, изменение состояния флажка не повлияет на прикрепленный к нему текст.

(Если я хорошо помню, текстовое поле не меняет свой внешний вид, если отключено, возможно, вы могли бы попробовать использовать текстовое поле вместо метки)

Комментарии:

1. Ну, я попробовал с текстовым полем, и с этим тоже не повезло. На самом деле я пишу шаблон для него, и все это отключается, когда отключается флажок. @Damascus

2. Вы помещаете текстовое поле в флажок? Поскольку это может быть проблемой, если установить флажок, это, несомненно, будет связано с состоянием флажка (на самом деле, именно поэтому я поместил два отдельных элемента управления в StackPanel вместо добавления текстового блока в флажок, который, как вы только что видели, таким образом не работает)

3. В шаблоне я снова поместил и текстовое поле, и флажок. @Damascus

4. Что ж, если вы объявите презентацию содержимого вместо текстового поля и свяжете свойство содержимого со свойством содержимого checkbox, вы можете выполнить задачу. Приведенный выше ответ поможет вам узнать больше об этом. Спасибо всем за ответ @Damascus, @Кишоре Кумар

5. Приведенный выше код просто дал мне подсказку, как найти решение моей проблемы. Решение простое. Просто замените текстовое поле в шаблоне на ContentPresenter. Я думаю, что это решение очень простое.:)@Damascus