User Tools

Site Tools


notes:uwp:buttons

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision
Previous revision
notes:uwp:buttons [2017/01/05]
admin created
notes:uwp:buttons [2020/08/26] (current)
Line 1: Line 1:
 ====== Buttons in XAML ====== ====== Buttons in XAML ======
 +
 +//ButtonBase// is the base class for all button controls.
 +
 +<code text>
 +Object
 + └─DependencyObject
 +   └─UIElement 
 +     └─FrameworkElement 
 +       └─Control
 +         └─ContentControl
 +           └─ButtonBase
 +             ├─Button
 +             ├─HyperlinkButton
 +             ├─RepeatButton
 +             └─ToggleButton
 +               ├─CheckBox
 +               └─RadioButton
 +</code>
 +
 +
 +====Button====
 +
 +Example: A simple button:
 +<code xml>
 +<Button Content="OK" Click="Button_Click" />
 +</code>
 +
 +Example: A button with a //Flyout//:
 +<code xml>
 +<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>
 +</code>
 +
 +<code csharp>
 +private void Button_Click(object sender, RoutedEventArgs e)
 +{
 +    // ...
 +}
 +</code>
 +
 +//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====
 +
 +<code xml>
 +<CheckBox Content="Keep alive" IsThreeState="False" Checked="CheckBox_Checked" />
 +</code>
 +
 +<code csharp>
 +private void CheckBox_Checked(object sender, RoutedEventArgs args)
 +{
 +    // ...
 +}
 +</code>
 +
  
 ====HyperlinkButton==== ====HyperlinkButton====
  
-Example: A //HyperlinkButton// with a //Click// event handler specified:+Example: A //HyperlinkButton// with a //Click// event handler:
 <code xml> <code xml>
 <HyperlinkButton Click="Button_Click"> <HyperlinkButton Click="Button_Click">
Line 15: Line 79:
 </code> </code>
  
 +
 +====RadioButton====
 +
 +Group //RadioButtons// by putting them inside the same parent container or by setting the //GroupName// property on each //RadioButton// to the same value.
 +
 +<code xml>
 +<StackPanel>
 +    <RadioButton x:Name="Option1" GroupName="Group1" IsThreeState="False" />
 +    <RadioButton x:Name="Option2" GroupName="Group1" IsThreeState="False" />
 +</StackPanel>
 +</code>
 +
 +Example: //RadioButtons// with content:
 +
 +{{uwp_RadioButton1.png}}
 +
 +<code xml>
 +<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>
 +</code>
 +
 +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.
 +
 +====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:
 +
 +{{uwp_ToggleSwitch1.png}}
 +
 +<code xml>
 +<ToggleSwitch OnContent="On"
 +              OffContent="Off"
 +              IsOn="True" />
 +</code>
  
notes/uwp/buttons.1483650555.txt.gz · Last modified: 2020/08/26 (external edit)