User Tools

Site Tools


notes:uwp:buttons

Buttons in XAML

ButtonBase is the base class for all button controls.

Object
 └─DependencyObject
   └─UIElement 
     └─FrameworkElement 
       └─Control
         └─ContentControl
           └─ButtonBase
             ├─Button
             ├─HyperlinkButton
             ├─RepeatButton
             └─ToggleButton
               ├─CheckBox
               └─RadioButton

Button

Example: A simple button:

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

Example: A button with a Flyout:

<Button Content="Submit" Click="SubmitButton_Click">
    <Button.Flyout>
        <Flyout Placement="Top" >
            <StackPanel Background="White">
                <TextBlock>Submit</TextBlock>
                <TextBlock>More info...</TextBlock>
            </StackPanel>
        </Flyout>
    </Button.Flyout>
</Button>
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

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

HyperlinkButton

Example: A HyperlinkButton with a Click event handler:

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

Example: A HyperlinkButton for navigation to a web page:

<HyperlinkButton Content="Go to Wiki" NavigateUri="http://www.wbswiki.com" />

RadioButton

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

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

Example: RadioButtons with content:

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

ToggleSwitch

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.

Example:

<ToggleSwitch OnContent="On"
              OffContent="Off"
              IsOn="True" />
notes/uwp/buttons.txt · Last modified: 2017/02/14 by admin