Skip to content

Commit

Permalink
feat(ToggleButton): add sample page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Arieldelossantos
Arieldelossantos committed Sep 12, 2023
1 parent f2ee784 commit 6c56989
Show file tree
Hide file tree
Showing 2 changed files with 138 additions and 0 deletions.
125 changes: 125 additions & 0 deletions Uno.Gallery/Uno.Gallery.Shared/Views/SamplePages/ToggleButtonSamplePage.xaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
<Page x:Class="Uno.Gallery.Views.Samples.ToggleButtonSamplePage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Uno.Gallery"
xmlns:smtx="using:ShowMeTheXAML"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:um="using:Uno.Material"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<local:SamplePageLayout>

<local:SamplePageLayout.FluentTemplate>
<DataTemplate>
<smtx:XamlDisplay UniqueKey="ToggleButtonSamplePage_Fluent"
smtx:XamlDisplayExtensions.Header="Default"
smtx:XamlDisplayExtensions.IgnorePath="XamlDisplay\StackPanel">
<StackPanel Spacing="20">
<ToggleButton Foreground="{ThemeResource OnBackgroundBrush}">
<ToggleButton.Content>
<FontIcon Glyph="&#xE160;" />
</ToggleButton.Content>
<um:ControlExtensions.AlternateContent>
<FontIcon Glyph="&#xE132;" />
</um:ControlExtensions.AlternateContent>
</ToggleButton>

<ToggleButton Foreground="{ThemeResource OnBackgroundBrush}"
IsChecked="True">
<ToggleButton.Content>
<FontIcon Glyph="&#xE160;" />
</ToggleButton.Content>
<um:ControlExtensions.AlternateContent>
<FontIcon Glyph="&#xE132;" />
</um:ControlExtensions.AlternateContent>
</ToggleButton>

<ToggleButton IsEnabled="False">
<ToggleButton.Content>
<FontIcon Glyph="&#xE160;" />
</ToggleButton.Content>
<um:ControlExtensions.AlternateContent>
<FontIcon Glyph="&#xE132;" />
</um:ControlExtensions.AlternateContent>
</ToggleButton>

<ToggleButton IsEnabled="False"
IsChecked="True">
<ToggleButton.Content>
<FontIcon Glyph="&#xE160;" />
</ToggleButton.Content>
<um:ControlExtensions.AlternateContent>
<FontIcon Glyph="&#xE132;" />
</um:ControlExtensions.AlternateContent>
</ToggleButton>
</StackPanel>
</smtx:XamlDisplay>
</DataTemplate>
</local:SamplePageLayout.FluentTemplate>

<local:SamplePageLayout.MaterialTemplate>
<DataTemplate>
<StackPanel Margin="12,0">
<!-- ToggleButton Icon Unchecked -->
<smtx:XamlDisplay Margin="12,0"
UniqueKey="ToggleButtonSamplePage_IconUnchecked">
<ToggleButton Style="{StaticResource IconToggleButtonStyle}">
<ToggleButton.Content>
<FontIcon Glyph="&#xE160;" />
</ToggleButton.Content>
<um:ControlExtensions.AlternateContent>
<FontIcon Glyph="&#xE132;" />
</um:ControlExtensions.AlternateContent>
</ToggleButton>
</smtx:XamlDisplay>

<!-- ToggleButton Icon Checked -->
<smtx:XamlDisplay Margin="12,0"
UniqueKey="ToggleButtonSamplePage_IconChecked">
<ToggleButton IsChecked="True"
Style="{StaticResource IconToggleButtonStyle}">
<ToggleButton.Content>
<FontIcon Glyph="&#xE160;" />
</ToggleButton.Content>
<um:ControlExtensions.AlternateContent>
<FontIcon Glyph="&#xE132;" />
</um:ControlExtensions.AlternateContent>
</ToggleButton>
</smtx:XamlDisplay>

<!-- ToggleButton Unchecked Disabled -->
<smtx:XamlDisplay Margin="12,0"
UniqueKey="ToggleButtonSamplePage_IconUncheckedDisabled">
<ToggleButton IsEnabled="False"
Style="{StaticResource IconToggleButtonStyle}">
<ToggleButton.Content>
<FontIcon Glyph="&#xE160;" />
</ToggleButton.Content>
<um:ControlExtensions.AlternateContent>
<FontIcon Glyph="&#xE132;" />
</um:ControlExtensions.AlternateContent>
</ToggleButton>
</smtx:XamlDisplay>

<!-- ToggleButton Icon Checked Disabled -->
<smtx:XamlDisplay Margin="12,0"
UniqueKey="ToggleButtonSamplePage_IconCheckedDisabled">
<ToggleButton IsChecked="True"
IsEnabled="False"
Style="{StaticResource IconToggleButtonStyle}">
<ToggleButton.Content>
<FontIcon Glyph="&#xE160;" />
</ToggleButton.Content>
<um:ControlExtensions.AlternateContent>
<FontIcon Glyph="&#xE132;" />
</um:ControlExtensions.AlternateContent>
</ToggleButton>
</smtx:XamlDisplay>
</StackPanel>
</DataTemplate>
</local:SamplePageLayout.MaterialTemplate>
</local:SamplePageLayout>
</Grid>
</Page>
13 changes: 13 additions & 0 deletions Uno.Gallery/Uno.Gallery.Shared/Views/SamplePages/ToggleButtonSamplePage.xaml.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
using Microsoft.UI.Xaml.Controls;

namespace Uno.Gallery.Views.Samples
{
[SamplePage(SampleCategory.UIComponents, "ToggleButton", Description = "Represents a control that a user can select (check) or clear (uncheck). Base class for controls that can switch states, such as CheckBox and RadioButton.", DocumentationLink = "https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.primitives.togglebutton?view=winrt-22621")]
public sealed partial class ToggleButtonSamplePage : Page
{
public ToggleButtonSamplePage()
{
this.InitializeComponent();
}
}
}

0 comments on commit 6c56989

Please sign in to comment.