how to create the blue border on checkbox when mouse is over the containing element C# WPF-CodePudding

I have a WrapPanel containing a Label and a CheckBox; when the MouseLeftButtonUp event is triggered on the wrappanel, the checkbox is checked. The idea is to make label and the checkbox look like 1 element.

Now, the CheckBox element has this feature, that when the mouse is hovering over it, it gets surrounded by a blue border. in my case, the checkbox only takes that blue border to itself when the checkbox is directly hovered by the mouse (not the entire wrappanel). I need my checkbox to get this blue border when the mouse is over the wrappanel, not only the checkbox itself.

I tried to call the myCheckbox.Focus(); when the MouseEnter for the wrappanel is triggered, but didn't do the trick.

And I also saw this link on how to checkbox focus border apear when calling CheckBox.Focus() But it doesn't contain a solution either.

Any help is appreciated.

CodePudding user response：

Modify the template of the CheckBox to use a WrapPanel instead of the default Grid:

<CheckBox>
    <TextBlock>Label that wraps with the CheckBox...</TextBlock>
    <CheckBox.Style>
        <Style TargetType="{x:Type CheckBox}">
            <Style.Resources>
                <Style x:Key="FocusVisual">
                    <Setter Property="Control.Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Rectangle Margin="2" StrokeDashArray="1 2" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" SnapsToDevicePixels="true" StrokeThickness="1"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
                <Style x:Key="OptionMarkFocusVisual">
                    <Setter Property="Control.Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Rectangle Margin="14,0,0,0" StrokeDashArray="1 2" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" SnapsToDevicePixels="true" StrokeThickness="1"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
                <SolidColorBrush x:Key="OptionMark.Static.Background" Color="#FFFFFFFF"/>
                <SolidColorBrush x:Key="OptionMark.Static.Border" Color="#FF707070"/>
                <SolidColorBrush x:Key="OptionMark.Static.Glyph" Color="#FF212121"/>
                <SolidColorBrush x:Key="OptionMark.MouseOver.Background" Color="#FFF3F9FF"/>
                <SolidColorBrush x:Key="OptionMark.MouseOver.Border" Color="#FF5593FF"/>
                <SolidColorBrush x:Key="OptionMark.MouseOver.Glyph" Color="#FF212121"/>
                <SolidColorBrush x:Key="OptionMark.Pressed.Background" Color="#FFD9ECFF"/>
                <SolidColorBrush x:Key="OptionMark.Pressed.Border" Color="#FF3C77DD"/>
                <SolidColorBrush x:Key="OptionMark.Pressed.Glyph" Color="#FF212121"/>
                <SolidColorBrush x:Key="OptionMark.Disabled.Background" Color="#FFE6E6E6"/>
                <SolidColorBrush x:Key="OptionMark.Disabled.Border" Color="#FFBCBCBC"/>
                <SolidColorBrush x:Key="OptionMark.Disabled.Glyph" Color="#FF707070"/>
            </Style.Resources>
            <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
            <Setter Property="Background" Value="{StaticResource OptionMark.Static.Background}"/>
            <Setter Property="BorderBrush" Value="{StaticResource OptionMark.Static.Border}"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type CheckBox}">
                        <WrapPanel x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
                            <Border x:Name="checkBoxBorder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                <Grid x:Name="markGrid">
                                    <Path x:Name="optionMark" Data="F1 M 9.97498,1.22334L 4.6983,9.09834L 4.52164,9.09834L 0,5.19331L 1.27664,3.52165L 4.255,6.08833L 8.33331,1.52588e-005L 9.97498,1.22334 Z " Fill="{StaticResource OptionMark.Static.Glyph}" Margin="1" Opacity="0" Stretch="None"/>
                                    <Rectangle x:Name="indeterminateMark" Fill="{StaticResource OptionMark.Static.Glyph}" Margin="2" Opacity="0"/>
                                </Grid>
                            </Border>
                            <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </WrapPanel>
                        <ControlTemplate.Triggers>
                            <Trigger Property="HasContent" Value="true">
                                <Setter Property="FocusVisualStyle" Value="{StaticResource OptionMarkFocusVisual}"/>
                                <Setter Property="Padding" Value="4,-1,0,0"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Background" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.MouseOver.Background}"/>
                                <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.MouseOver.Border}"/>
                                <Setter Property="Fill" TargetName="optionMark" Value="{StaticResource OptionMark.MouseOver.Glyph}"/>
                                <Setter Property="Fill" TargetName="indeterminateMark" Value="{StaticResource OptionMark.MouseOver.Glyph}"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Background" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Disabled.Background}"/>
                                <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Disabled.Border}"/>
                                <Setter Property="Fill" TargetName="optionMark" Value="{StaticResource OptionMark.Disabled.Glyph}"/>
                                <Setter Property="Fill" TargetName="indeterminateMark" Value="{StaticResource OptionMark.Disabled.Glyph}"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter Property="Background" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Pressed.Background}"/>
                                <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Pressed.Border}"/>
                                <Setter Property="Fill" TargetName="optionMark" Value="{StaticResource OptionMark.Pressed.Glyph}"/>
                                <Setter Property="Fill" TargetName="indeterminateMark" Value="{StaticResource OptionMark.Pressed.Glyph}"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="true">
                                <Setter Property="Opacity" TargetName="optionMark" Value="1"/>
                                <Setter Property="Opacity" TargetName="indeterminateMark" Value="0"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="{x:Null}">
                                <Setter Property="Opacity" TargetName="optionMark" Value="0"/>
                                <Setter Property="Opacity" TargetName="indeterminateMark" Value="1"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </CheckBox.Style>
</CheckBox>

CodePudding user response：

If you're open to an alternative (simpler) solution, This is how you should do it: define a custom style for the checkbox and override the Template so to get the WrapPanel and whatever controls you want look as part of the CheckBox..

<Style TargetType="{x:Type CheckBox}" x:Key="myCheckboxStyle">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CheckBox}">
                <WrapPanel>
                    <Label />
                    <!-- other Controls -->
                    <ContentPresenter/>
                </WrapPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Apply the custom style to the checkbox

<CheckBox Style="{StaticResource myCheckboxStyle}" Content="Check Me"/>