WPF c# Checkbox clickable area modification - BATCH

Question

I have about 3000 instances of checkboxes that are styled in a way which you can click the entire row and the state of the checkboxes will change.

How do you modify the checkbox so that ONLY the box is click able. I did a good amount of search and arrived at no conclusion.

Thanks

Answer 1

Everything you must do is check which element has been clicked.

In the first solution you should check if OriginalSource is BulletChrome and if it is, you should allow CheckBox to change state, by setting: e.Handled = false; . If you don't allow to change CheckBox state you should set e.Handled to true.

In the second solution you should check if OriginalSource is Border or Path and to make sure that the appropriate element was clicked, we should check names.

You can use PreviewMouseLeftButtonDown event, to determine OriginalSource.

XAML:

<CheckBox Content="test" PreviewMouseLeftButtonDown="CheckBox_PreviewMouseLeftButtonDown"/>

Code-behind:

private void CheckBox_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    if (e.OriginalSource is BulletChrome)
        e.Handled = false;
    else
        e.Handled = true;
}

Or you can create your own CheckBox ControlTemplate ( msdn example ).

You should check in PreviewMouseLeftButtonDown event OriginalSource and allow or deny change CheckBox state.

Example with PreviewMouseLeftButtonDown :

<Window.Resources>
    <Style x:Key="CheckBoxFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border>
                        <Rectangle 
        Margin="15,0,0,0"
        StrokeThickness="1"
        Stroke="#60000000"
        StrokeDashArray="1 2"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <LinearGradientBrush x:Key="NormalBrush" StartPoint="0,0" EndPoint="0,1">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#FFF" Offset="0.0"/>
                <GradientStop Color="#CCC" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="HorizontalNormalBrush" StartPoint="0,0" EndPoint="1,0">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#FFF" Offset="0.0"/>
                <GradientStop Color="#CCC" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="LightBrush" StartPoint="0,0" EndPoint="0,1">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#FFF" Offset="0.0"/>
                <GradientStop Color="#EEE" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="HorizontalLightBrush" StartPoint="0,0" EndPoint="1,0">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#FFF" Offset="0.0"/>
                <GradientStop Color="#EEE" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="DarkBrush" StartPoint="0,0" EndPoint="0,1">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#FFF" Offset="0.0"/>
                <GradientStop Color="#AAA" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="PressedBrush" StartPoint="0,0" EndPoint="0,1">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#BBB" Offset="0.0"/>
                <GradientStop Color="#EEE" Offset="0.1"/>
                <GradientStop Color="#EEE" Offset="0.9"/>
                <GradientStop Color="#FFF" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />
    <SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE" />
    <SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" />
    <SolidColorBrush x:Key="SelectedBackgroundBrush" Color="#DDD" />
    <LinearGradientBrush x:Key="NormalBorderBrush" StartPoint="0,0" EndPoint="0,1">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#CCC" Offset="0.0"/>
                <GradientStop Color="#444" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="HorizontalNormalBorderBrush" StartPoint="0,0" EndPoint="1,0">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#CCC" Offset="0.0"/>
                <GradientStop Color="#444" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="DefaultedBorderBrush" StartPoint="0,0" EndPoint="0,1">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#777" Offset="0.0"/>
                <GradientStop Color="#000" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="PressedBorderBrush" StartPoint="0,0" EndPoint="0,1">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#444" Offset="0.0"/>
                <GradientStop Color="#888" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA" />
    <SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />
    <SolidColorBrush x:Key="LightBorderBrush" Color="#AAA" />
    <SolidColorBrush x:Key="GlyphBrush" Color="#444" />
    <SolidColorBrush x:Key="LightColorBrush" Color="#DDD" />
    <Style x:Key="{x:Type CheckBox}" TargetType="CheckBox">
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="FocusVisualStyle"    Value="{StaticResource CheckBoxFocusVisual}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="CheckBox">
                    <BulletDecorator Background="Transparent" PreviewMouseLeftButtonDown="BulletDecorator_PreviewMouseLeftButtonDown">
                        <BulletDecorator.Bullet>
                            <Border x:Name="chbStyleBorder"  
                              Width="13" 
                              Height="13" 
                              CornerRadius="0" 
                              Background="{StaticResource NormalBrush}"
                              BorderThickness="1"
                              BorderBrush="{StaticResource NormalBorderBrush}">
                                <Path 
                                    Width="7" Height="7" 
                                    x:Name="chbStyleCheckMark"
                                    SnapsToDevicePixels="False" 
                                    Stroke="{StaticResource GlyphBrush}"
                                    StrokeThickness="2"
                                    Data="M 0 0 L 7 7 M 0 7 L 7 0" />
                            </Border>
                        </BulletDecorator.Bullet>
                        <ContentPresenter Margin="4,0,0,0"
                            VerticalAlignment="Top"
                            HorizontalAlignment="Left"
                            RecognizesAccessKey="True" />
                    </BulletDecorator>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="false">
                            <Setter TargetName="chbStyleCheckMark" Property="Visibility" Value="Collapsed"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="{x:Null}">
                            <Setter TargetName="chbStyleCheckMark" Property="Data" Value="M 0 7 L 7 0" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="chbStyleBorder" Property="Background" Value="{StaticResource DarkBrush}" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter TargetName="chbStyleBorder" Property="Background" Value="{StaticResource PressedBrush}" />
                            <Setter TargetName="chbStyleBorder" Property="BorderBrush" Value="{StaticResource PressedBorderBrush}" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter TargetName="chbStyleBorder" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
                            <Setter TargetName="chbStyleBorder" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
                            <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

Code-behind:

private void BulletDecorator_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    if ((e.OriginalSource is Border && ((Border)e.OriginalSource).Name == "chbStyleBorder") || (e.OriginalSource is Path && ((Path)e.OriginalSource).Name == "chbStyleCheckMark"))
        e.Handled = false;
    else
        e.Handled = true;
}