User Tools

Site Tools


Buttons in XAML

ButtonBase is the base class for all button controls.



Example: A simple button:

<Button Content="OK" Click="Button_Click" />

Example: A button with a Flyout:

<Button Content="Submit" Click="SubmitButton_Click">
        <Flyout Placement="Top" >
            <StackPanel Background="White">
                <TextBlock>More info...</TextBlock>
private void Button_Click(object sender, RoutedEventArgs e)
    // ...

Button vs. event bubbling: PointerPressed and PointerReleased events get swallowed when they originate within a Button. If the goal is to detect taps anywhere on a Page, attach a handler to the Tapped event instead of PointerReleased.


<CheckBox Content="Keep alive" IsThreeState="False" Checked="CheckBox_Checked" />
private void CheckBox_Checked(object sender, RoutedEventArgs args)
    // ...


Example: A HyperlinkButton with a Click event handler:

<HyperlinkButton Click="Button_Click">
    <TextBlock Text="Show more..." />

Example: A HyperlinkButton for navigation to a web page:

<HyperlinkButton Content="Go to Wiki" NavigateUri="" />


Group RadioButtons by putting them inside the same parent container or by setting the GroupName property on each RadioButton to the same value.

    <RadioButton x:Name="Option1" GroupName="Group1" IsThreeState="False" />
    <RadioButton x:Name="Option2" GroupName="Group1" IsThreeState="False" />

Example: RadioButtons with content:

    <RadioButton GroupName="Group1">
        <StackPanel Orientation="Horizontal">
            <SymbolIcon Symbol="Mail" />
            <TextBlock Text="Mail" Margin="8,0,0,0" />
    <RadioButton GroupName="Group1">
        <StackPanel Orientation="Horizontal">
            <SymbolIcon Symbol="Clock" />
            <TextBlock Text="Clock" Margin="8,0,0,0" />
    <RadioButton GroupName="Group1">
        <StackPanel Orientation="Horizontal">
            <SymbolIcon Symbol="Emoji2" />
            <TextBlock Text="Emoji2" Margin="8,0,0,0" />

Another types of icon elements:

  • FontIcon: The icon is based on a glyph from the specified font family.
  • BitmapIcon: The icon is based on a bitmap image file with the specified URI.
  • PathIcon: The icon is based on Path data.
  • SymbolIcon: The icon is based on a glyph from the Segoe MDL2 Assets font as listed in the Symbol enumeration.


The ToggleSwitch control is technically not a button (it derives from Control rather than from ButtonBase) but funcionally it resembles a button.

  • Use the IsOn property to determine the current state of the switch.
  • Use the Toggled event to know when the toggle state has changed.


<ToggleSwitch OnContent="On"
              IsOn="True" />
notes/uwp/buttons.txt · Last modified: 2020/08/26 (external edit)