eventstogglebuttonmahapps.metroeventtrigger

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


In a WPF project I have the following scenario:

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

MahApps.Metro framework controls event priority

<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>

Solution

  • 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!");
        }
    }
    

    enter image description here