locked
How can I make check box check only on Box click not on text click RRS feed

  • Question

  • VS2008

    Hi,

    I have some check boxes which are in a LisbBox.

    My problem is when I select a checkbox by clicking on it, obviously the checkbox checks/unchecks.
    I only want the checkbox to check/uncheck when the actual box itself is clicked, and not the text of the checkbox, is this at all possible?


    Thanks

    Tuesday, December 16, 2008 12:52 PM

Answers

  • Use a combination of a CheckBox without any content and a separate TextBlock, like this:

    <Page  
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">  
      <Grid> 
        <StackPanel Orientation="Horizontal">  
          <CheckBox VerticalAlignment="Center"/>  
          <TextBlock Text="You should click on the box!" Margin="2,0,0,0" VerticalAlignment="Center"/>  
        </StackPanel> 
      </Grid> 
    </Page> 

    hth,
    Marcel
    Tuesday, December 16, 2008 1:42 PM
  • Hi,

     

    Here is an example of setting template for CheckBox. You can make CheckBox check only on box not on text.

     

    XAML code:

    <Window

         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

         x:Class="WpfCheckBoxTemplate.Window1"

         xmlns:luna="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Luna">

        <Window.Resources>

            <LinearGradientBrush x:Key="CheckRadioFillNormal">

                <GradientStop Color="#FFD2D4D2" Offset="0"/>

                <GradientStop Color="#FFFFFFFF" Offset="1"/>

            </LinearGradientBrush>

            <LinearGradientBrush x:Key="CheckRadioStrokeNormal">

                <GradientStop Color="#FF004C94" Offset="0"/>

                <GradientStop Color="#FF003C74" Offset="1"/>

            </LinearGradientBrush>

            <Style x:Key="EmptyCheckBoxFocusVisual">

                <Setter Property="Control.Template">

                    <Setter.Value>

                        <ControlTemplate>

                            <Rectangle

                                         Stroke="Black"

                                         StrokeDashArray="1 2"

                                         StrokeThickness="1"

                                         Margin="1"

                                         SnapsToDevicePixels="true"/>

                        </ControlTemplate>

                    </Setter.Value>

                </Setter>

            </Style>

            <Style x:Key="CheckRadioFocusVisual">

                <Setter Property="Control.Template">

                    <Setter.Value>

                        <ControlTemplate>

                            <Rectangle

                                         Stroke="Black"

                                         StrokeDashArray="1 2"

                                         StrokeThickness="1"

                                         Margin="14,0,0,0"

                                         SnapsToDevicePixels="true"/>

                        </ControlTemplate>

                    </Setter.Value>

                </Setter>

            </Style>

            <Style TargetType="{x:Type CheckBox}">

                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>

                <Setter Property="Background" Value="{StaticResource CheckRadioFillNormal}"/>

                <Setter Property="BorderBrush" Value="{StaticResource CheckRadioStrokeNormal}"/>

                <Setter Property="BorderThickness" Value="1"/>

                <Setter Property="FocusVisualStyle" Value="{StaticResource EmptyCheckBoxFocusVisual}"/>

                <Setter Property="Template">

                    <Setter.Value>

                        <ControlTemplate TargetType="{x:Type CheckBox}">

                            <Grid>

                                <Grid.ColumnDefinitions>

                                    <ColumnDefinition Width="Auto"/>

                                    <ColumnDefinition/>

                                </Grid.ColumnDefinitions>

                                <luna:BulletChrome

                                               Background="{TemplateBinding Background}"

                                               BorderBrush="{TemplateBinding BorderBrush}"

                                               BorderThickness="{TemplateBinding BorderThickness}"

                                               IsChecked="{TemplateBinding IsChecked}"

                                               RenderMouseOver="{TemplateBinding IsMouseOver}"

                                               RenderPressed="{TemplateBinding IsPressed}"

                                               Grid.Column="0"/>

                                <ContentPresenter

                                               IsHitTestVisible="False"

                                               HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

                                               Margin="{TemplateBinding Padding}"

                                               VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

                                               SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"

                                               RecognizesAccessKey="True"

                                               Grid.Column="1"/>

                            </Grid>

                            <ControlTemplate.Triggers>

                                <Trigger Property="HasContent" Value="true">

                                    <Setter Property="FocusVisualStyle" Value="{StaticResource CheckRadioFocusVisual}"/>

                                    <Setter Property="Padding" Value="2,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>

        </Window.Resources>

     

        <Grid>

            <CheckBox HorizontalAlignment="Left" VerticalAlignment="Top" Content="CheckBox"/>

        </Grid>

    </Window>

     

    Hope this helps.

     

    Thanks.


    Jim Zhou -MSFT
    Monday, December 22, 2008 10:49 AM

All replies

  • Use a combination of a CheckBox without any content and a separate TextBlock, like this:

    <Page  
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">  
      <Grid> 
        <StackPanel Orientation="Horizontal">  
          <CheckBox VerticalAlignment="Center"/>  
          <TextBlock Text="You should click on the box!" Margin="2,0,0,0" VerticalAlignment="Center"/>  
        </StackPanel> 
      </Grid> 
    </Page> 

    hth,
    Marcel
    Tuesday, December 16, 2008 1:42 PM
  • Hi,

     

    Here is an example of setting template for CheckBox. You can make CheckBox check only on box not on text.

     

    XAML code:

    <Window

         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

         x:Class="WpfCheckBoxTemplate.Window1"

         xmlns:luna="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Luna">

        <Window.Resources>

            <LinearGradientBrush x:Key="CheckRadioFillNormal">

                <GradientStop Color="#FFD2D4D2" Offset="0"/>

                <GradientStop Color="#FFFFFFFF" Offset="1"/>

            </LinearGradientBrush>

            <LinearGradientBrush x:Key="CheckRadioStrokeNormal">

                <GradientStop Color="#FF004C94" Offset="0"/>

                <GradientStop Color="#FF003C74" Offset="1"/>

            </LinearGradientBrush>

            <Style x:Key="EmptyCheckBoxFocusVisual">

                <Setter Property="Control.Template">

                    <Setter.Value>

                        <ControlTemplate>

                            <Rectangle

                                         Stroke="Black"

                                         StrokeDashArray="1 2"

                                         StrokeThickness="1"

                                         Margin="1"

                                         SnapsToDevicePixels="true"/>

                        </ControlTemplate>

                    </Setter.Value>

                </Setter>

            </Style>

            <Style x:Key="CheckRadioFocusVisual">

                <Setter Property="Control.Template">

                    <Setter.Value>

                        <ControlTemplate>

                            <Rectangle

                                         Stroke="Black"

                                         StrokeDashArray="1 2"

                                         StrokeThickness="1"

                                         Margin="14,0,0,0"

                                         SnapsToDevicePixels="true"/>

                        </ControlTemplate>

                    </Setter.Value>

                </Setter>

            </Style>

            <Style TargetType="{x:Type CheckBox}">

                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>

                <Setter Property="Background" Value="{StaticResource CheckRadioFillNormal}"/>

                <Setter Property="BorderBrush" Value="{StaticResource CheckRadioStrokeNormal}"/>

                <Setter Property="BorderThickness" Value="1"/>

                <Setter Property="FocusVisualStyle" Value="{StaticResource EmptyCheckBoxFocusVisual}"/>

                <Setter Property="Template">

                    <Setter.Value>

                        <ControlTemplate TargetType="{x:Type CheckBox}">

                            <Grid>

                                <Grid.ColumnDefinitions>

                                    <ColumnDefinition Width="Auto"/>

                                    <ColumnDefinition/>

                                </Grid.ColumnDefinitions>

                                <luna:BulletChrome

                                               Background="{TemplateBinding Background}"

                                               BorderBrush="{TemplateBinding BorderBrush}"

                                               BorderThickness="{TemplateBinding BorderThickness}"

                                               IsChecked="{TemplateBinding IsChecked}"

                                               RenderMouseOver="{TemplateBinding IsMouseOver}"

                                               RenderPressed="{TemplateBinding IsPressed}"

                                               Grid.Column="0"/>

                                <ContentPresenter

                                               IsHitTestVisible="False"

                                               HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

                                               Margin="{TemplateBinding Padding}"

                                               VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

                                               SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"

                                               RecognizesAccessKey="True"

                                               Grid.Column="1"/>

                            </Grid>

                            <ControlTemplate.Triggers>

                                <Trigger Property="HasContent" Value="true">

                                    <Setter Property="FocusVisualStyle" Value="{StaticResource CheckRadioFocusVisual}"/>

                                    <Setter Property="Padding" Value="2,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>

        </Window.Resources>

     

        <Grid>

            <CheckBox HorizontalAlignment="Left" VerticalAlignment="Top" Content="CheckBox"/>

        </Grid>

    </Window>

     

    Hope this helps.

     

    Thanks.


    Jim Zhou -MSFT
    Monday, December 22, 2008 10:49 AM