Non clickable checkbox when applying style - xaml

Question

I have made plenty of styles and they all work (so the issue is not with the ResourceDictionary or binding to the style), but when i try to use this style for a checkbox it goes into a state where the user can't interact with it.
I'm attempting to set a style on a standard CheckBox:
<CheckBox Content="Some Cool Checkbox" Style="{StaticResource MaterialDesignCheckBox}" />
This is the style I'm trying to apply:
<Style x:Key="MaterialDesignCheckBox" TargetType="CheckBox">
<Setter Property="Background" Value="{ThemeResource CheckBoxBackgroundUnchecked}" />
<Setter Property="Foreground" Value="{ThemeResource CheckBoxForegroundUnchecked}" />
<Setter Property="BorderBrush" Value="{ThemeResource CheckBoxBorderBrushUnchecked}" />
<Setter Property="Padding" Value="8,5,0,0" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="MinWidth" Value="120" />
<Setter Property="MinHeight" Value="32" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="FocusVisualMargin" Value="-7,-3,-7,-3" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="CheckBox">
<Grid
x:Name="RootGrid"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Viewbox
Width="25"
Height="25"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
FlowDirection="LeftToRight">
<Canvas Width="25" Height="25">
<Path
x:Name="Graphic"
Data="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z"
Fill="{ThemeResource MaterialDesignCheckBoxOff}" />
<Ellipse
x:Name="InteractionEllipse"
Canvas.Left="12"
Canvas.Top="12"
Width="0"
Height="0"
Fill="{TemplateBinding Foreground}"
IsHitTestVisible="False"
Opacity="0"
RenderTransformOrigin="0.5,0.5">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform />
<TranslateTransform />
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
</Canvas>
</Viewbox>
<ContentPresenter
x:Name="ContentPresenter"
Grid.Column="1"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
TextWrapping="Wrap" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
When applying the style the checkbox becomes unclickable, but with the correct look:
So in short i need help with figuring out how to keep the look but also make it clickable.

Answer 1

Non clickable checkbox when applying style
For add the clickable status, you need to specify the visual behavior for Checkbox. For example,
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter Target="CheckGlyph.Opacity" Value="1"/>
</VisualState.Setters>
<!-- This Storyboard is equivalent to the Setter. -->
<!--<Storyboard>
<DoubleAnimation Duration="0" To="1"
Storyboard.TargetName="CheckGlyph" Storyboard.TargetProperty="Opacity"/>
</Storyboard>-->
</VisualState>
<VisualState x:Name="Unchecked"/>
<VisualState x:Name="Indeterminate">
<VisualState.Setters>
<Setter Target="IndeterminateGlyph.Opacity" Value="1"/>
</VisualState.Setters>
<!-- This Storyboard is equivalent to the Setter. -->
<!--<Storyboard>
<DoubleAnimation Duration="0" To="1"
Storyboard.TargetName="IndeterminateGlyph" Storyboard.TargetProperty="Opacity"/>
</Storyboard>-->
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
For detail tutorial please refer Specify the visual behavior of a control.

Answer 2

Solved the issue by doing this:
<Style x:Key="MaterialDesignCheckBox" TargetType="CheckBox">
<Setter Property="Background" Value="{ThemeResource CheckBoxBackgroundUnchecked}" />
<Setter Property="Foreground" Value="{ThemeResource CheckBoxForegroundUnchecked}" />
<Setter Property="BorderBrush" Value="{ThemeResource CheckBoxBorderBrushUnchecked}" />
<Setter Property="Padding" Value="8,5,0,0" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="MinWidth" Value="120" />
<Setter Property="MinHeight" Value="32" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="FocusVisualMargin" Value="-7,-3,-7,-3" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="CheckBox">
<Border
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle
x:Name="NormalRectangle"
Grid.Column="0"
Width="20"
Height="20"
Fill="Transparent"
RadiusX="2"
RadiusY="2"
Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"
UseLayoutRounding="False" />
<Path
x:Name="CheckGlyph"
Grid.Column="0"
Width="16"
Height="14"
Fill="{ThemeResource MaterialDesignCheckBoxOff}"
Opacity="0"
Stretch="Fill"
Stroke="{StaticResource MaterialDesignCheckBoxOff}"
StrokeThickness="1.5">
<Path.Data>
<GeometryGroup>
<LineGeometry StartPoint="0,0" EndPoint="100,100" />
<LineGeometry StartPoint="100,0" EndPoint="0,100" />
</GeometryGroup>
</Path.Data>
</Path>
<Ellipse
x:Name="IndeterminateGlyph"
Grid.Column="1"
Width="8"
Height="8"
Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
Opacity="0"
UseLayoutRounding="False" />
<ContentPresenter
x:Name="ContentPresenter"
Grid.Column="1"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter Target="CheckGlyph.Opacity" Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Indeterminate">
<VisualState.Setters>
<Setter Target="IndeterminateGlyph.Opacity" Value="1" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>