How to Click a ToggleSwitch control inside a Button content without triggering the Button click event

Question

In a WPF project I have the following scenario:

• I'm using MahApps.Metro framework.
• I have a button that navigates to some page.
• The button has a ToggleSwitch control inside its content.

Whenever I click the ToggleSwitch, the parent Button click event is triggered. How to prevent this behaviour?

<Button x:Name="btn1" Height="40" BorderThickness="0" Width="auto" HorizontalAlignment="Stretch" Margin="0,0,0,0" Style="{DynamicResource SquareButtonStyle}" Click="Button_Click">
       <Grid Margin="0,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <Grid.ColumnDefinitions>
                       <ColumnDefinition Width="50" />
                       <ColumnDefinition Width="100" />
                       <ColumnDefinition Width="*" />
                       <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <TextBlock VerticalAlignment="Center" Width="auto" Grid.Column="1">Services</TextBlock>
            <Controls:ToggleSwitch Grid.Column="3" x:Name="enabledSwitch4"
                                    VerticalAlignment="Center"
                                    Width="Auto"
                                    Style="{StaticResource MahApps.Metro.Styles.ToggleSwitch.Win10}"
                                    OnLabel="" OffLabel=""
                                    IsChecked="True" HorizontalAlignment="Center" />
        </Grid>
</Button>

Answer 1

You can handle/prevent this at the Button's click event.

private async void ButtonClick(object sender, RoutedEventArgs e)
{
    if (e.OriginalSource != sender)
    {
        // do nothing if clicked the ToggleSwitch
        e.Handled = true;
    }
    else
    {
        // handle the button click action
        await this.ShowMessageAsync(string.Empty, "Yeah, you clicked the real button!");
    }
}