WPF. Prevent checkbox inside button from firing click event - wpf

Question

I have a button with a checkbox inside in WPF. I want to be able to check the checkbox without firing the click event of the button.
My problem is that, currently, the click event is fired whether I press the checkbox itself or its label, behavior I don't want. I only want to raise the click event if I press somewhere in the red zone.
Is there a way to prevent this?
This is my code by now:
Style for the checkbox:
<Style x:Key="FilledCheckBox" TargetType="{x:Type CheckBox}">
<Setter Property="Foreground" Value="Gray"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<BulletDecorator Background="Transparent">
<BulletDecorator.Bullet>
<Border x:Name="Border"
Width="15"
Height="15"
CornerRadius="1"
BorderThickness="1">
<Border.BorderBrush>
<SolidColorBrush Color="Gray"/>
</Border.BorderBrush>
<Border.Background>
<SolidColorBrush Color="White"/>
</Border.Background>
</Border>
</BulletDecorator.Bullet>
<ContentPresenter Margin="5,0,0,0"
VerticalAlignment="Top"
HorizontalAlignment="Left"
RecognizesAccessKey="True" />
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" TargetName="Border" Value="Green"/>
<Setter Property="BorderBrush" TargetName="Border" Value="Green"/>
<Setter Property="Foreground" Value="Green"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Style for the button (with the checkbox inside):
<Style x:Key="RoundCornerButtonWithCheck" TargetType="{x:Type Button}">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Width" Value="120"/>
<Setter Property="Height" Value="30"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Button.Effect">
<Setter.Value>
<DropShadowEffect Color="Black" Direction="280" ShadowDepth="2" BlurRadius="5" Opacity="0.2" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid x:Name="grid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border x:Name="border" CornerRadius="15" BorderBrush="Black" BorderThickness="0" Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"
TextElement.FontWeight="SemiBold">
</ContentPresenter>
</Border>
<CheckBox x:Name="checkbox" Grid.Column="0" VerticalAlignment="Center" Margin="20,0,0,0" Style="{StaticResource FilledCheckBox}"></CheckBox>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" TargetName="border">
<Setter.Value>
<SolidColorBrush Color="Gold" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="border" Value="#FF33962B"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="grid" Value="0.25"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The button in the template:
<Button Name="deleteButton" Style="{StaticResource RoundCornerButtonWithCheck}" Content="{Binding Source={x:Static localization:Resources.Delete}, Converter={StaticResource CharacterCasingConverter}}" VerticalAlignment="Center" HorizontalAlignment="Left" Background="Red" Foreground="White" Margin="80,0,80,30" Click="DeleteClick"></Button>

Answer 1

Is there a way to prevent this?
You can't really prevent the built-in Button control itself from handling the click without cancelling the PreviewMouseLeftButtonDown event but you can implement the event handler to ignore clicks on the CheckBox:
private void SaveClick(object sender, RoutedEventArgs e)
{
if (!(e.OriginalSource is CheckBox))
{
//handle click outside the CheckBox...
}
}