User Tools

Site Tools


notes:uwp:buttons

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
notes:uwp:buttons [2017/01/05]
admin [Button]
notes:uwp:buttons [2020/08/26] (current)
Line 79: 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.1483651644.txt.gz ยท Last modified: 2020/08/26 (external edit)