6f7db1c20c
* Added IconRepeatButton (#812) * Replaced control-specific PART_RootPanel workaround with AffectsArrange call fixing ReversibleStackPanel for the whole application. * Added IconToggleButton (#812) * Split IconRepeatButton into separate XAML file. * Added IconSplitButton (#812) * Added BindableClasses utility to allow propagating Classes property between controls. Avalonia currently doesn't support binding from Classes property, and binding to Classes property is heavily restricted. * Added IconToggleSplitButton (#812) * Fixed tab order in IconSplitButton and IconToggleSplitButton (DockPanel messes up tab order, TabIndex is global and makes it even worse, so just switched to Grid). * Added IconDropDownButton (#812) * Fixed IconPlacement inheritance. * Added redesigned IconButton demo section (#812) * Fixed spacing issues * Added redesigned demo sections for the newly added icon buttons (#812) * Replaced BindableClasses with ClassHelper. Fixed styling of default solid split icon buttons. (#812) * Replaced IIconButton with attached-like property getters and PseudolassesExtensions.Set(Classes); fixed arrow alignments in top/bottom split icon buttons (#812) * Applied fixes suggested by Copilot in code review (#812) * Fixed incorrect base type of IconDropDownButton (#812) * Fixed IconSplitButton and IconToggleSplitButton styles (#812) * Fixed secondary button color in checked state * Fixed applying of CornerRadius * Changed secondary button to square * Simplified template * Disabled demo of Colorful theme for IconSplitButton and IconToggleSplitButton
682 lines
58 KiB
XML
682 lines
58 KiB
XML
<UserControl
|
||
x:Class="Ursa.Demo.Pages.IconButtonDemo"
|
||
xmlns="https://github.com/avaloniaui"
|
||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||
xmlns:u="https://irihi.tech/ursa"
|
||
xmlns:vm="clr-namespace:Ursa.Demo.ViewModels"
|
||
xmlns:common="clr-namespace:Ursa.Common;assembly=Ursa"
|
||
d:DesignHeight="NaN"
|
||
d:DesignWidth="1200"
|
||
x:DataType="vm:IconButtonDemoViewModel"
|
||
mc:Ignorable="d">
|
||
<Design.DataContext>
|
||
<vm:IconButtonDemoViewModel />
|
||
</Design.DataContext>
|
||
<Control.Styles>
|
||
<Style Selector="u|IconDropDownButton, u|IconSplitButton, u|IconToggleSplitButton">
|
||
<Setter Property="Button.Flyout">
|
||
<MenuFlyout Placement="BottomEdgeAlignedRight">
|
||
<MenuItem Header="Submit All" />
|
||
<MenuItem Header="Submit Updated" />
|
||
</MenuFlyout>
|
||
</Setter>
|
||
</Style>
|
||
<Style Selector="Label">
|
||
<Setter Property="VerticalContentAlignment" Value="Center" />
|
||
</Style>
|
||
<Style Selector="ToggleSwitch">
|
||
<Setter Property="Theme" Value="{StaticResource SimpleToggleSwitch}" />
|
||
</Style>
|
||
<Style Selector="TextBlock.Header">
|
||
<Setter Property="Theme" Value="{StaticResource TitleTextBlock}" />
|
||
<Setter Property="VerticalAlignment" Value="Center" />
|
||
</Style>
|
||
<Style Selector="u|EnumSelector.IconPlacement">
|
||
<Setter Property="EnumType" Value="common:Position" />
|
||
<Setter Property="Value" Value="{x:Static common:Position.Left}" />
|
||
</Style>
|
||
</Control.Styles>
|
||
<ScrollViewer>
|
||
<StackPanel Margin="20" Spacing="8" HorizontalAlignment="Left">
|
||
|
||
<HeaderedContentControl Theme="{StaticResource GroupBox}">
|
||
<HeaderedContentControl.Header>
|
||
<DockPanel>
|
||
<StackPanel DockPanel.Dock="Right" Orientation="Horizontal" Spacing="8" TextElement.FontWeight="Normal">
|
||
<Label Content="Loading" />
|
||
<ToggleSwitch x:Name="chkIsIconButtonLoading" />
|
||
<Label Content="Icon" Margin="16 0 0 0" />
|
||
<u:EnumSelector x:Name="selIconButtonIconPlacement" Classes="IconPlacement" />
|
||
</StackPanel>
|
||
<TextBlock Text="IconButton / IconRepeatButton" Classes="Header H6" />
|
||
</DockPanel>
|
||
</HeaderedContentControl.Header>
|
||
<Control.Styles>
|
||
<Style Selector="u|IconButton">
|
||
<Setter Property="IsLoading" Value="{Binding #chkIsIconButtonLoading.IsChecked}" />
|
||
<Setter Property="IconPlacement" Value="{Binding #selIconButtonIconPlacement.Value}" />
|
||
</Style>
|
||
</Control.Styles>
|
||
<Panel>
|
||
<StackPanel Spacing="8">
|
||
|
||
<TextBlock Text="Kind" FontWeight="Bold" />
|
||
<WrapPanel Orientation="Horizontal" ItemSpacing="8" LineSpacing="8">
|
||
<u:IconButton Icon="🐼" />
|
||
<u:IconButton Content="Text" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Text with icon" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Loading" IsLoading="True" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Disabled" IsEnabled="False" />
|
||
</WrapPanel>
|
||
|
||
<TextBlock Text="Size" FontWeight="Bold" />
|
||
<WrapPanel Orientation="Horizontal" ItemSpacing="8" LineSpacing="8">
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Large" Classes="Large" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Default" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Small" Classes="Small" />
|
||
</WrapPanel>
|
||
|
||
<TextBlock Text="Theme" FontWeight="Bold" />
|
||
<WrapPanel ItemSpacing="8">
|
||
<Label Content="Light" Width="80"
|
||
ToolTip.Tip="Default theme" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Default" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Primary" Classes="Primary" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Secondary" Classes="Secondary" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Tertiary" Classes="Tertiary" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Success" Classes="Success" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Warning" Classes="Warning" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Danger" Classes="Danger" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Disabled" Classes="Danger" IsEnabled="False" />
|
||
</WrapPanel>
|
||
<WrapPanel ItemSpacing="8">
|
||
<Label Content="Solid" Width="80"
|
||
ToolTip.Tip="SolidIconButton / SolidIconRepeatButton theme" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Default" Theme="{DynamicResource SolidIconButton}" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Primary" Classes="Primary" Theme="{DynamicResource SolidIconButton}" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Secondary" Classes="Secondary" Theme="{DynamicResource SolidIconButton}" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Tertiary" Classes="Tertiary" Theme="{DynamicResource SolidIconButton}" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Success" Classes="Success" Theme="{DynamicResource SolidIconButton}" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Warning" Classes="Warning" Theme="{DynamicResource SolidIconButton}" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Danger" Classes="Danger" Theme="{DynamicResource SolidIconButton}" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Disabled" Classes="Danger" Theme="{DynamicResource SolidIconButton}" IsEnabled="False" />
|
||
</WrapPanel>
|
||
<WrapPanel ItemSpacing="8">
|
||
<Label Content="Outline" Width="80"
|
||
ToolTip.Tip="OutlineIconButton / OutlineIconRepeatButton theme" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Default" Theme="{DynamicResource OutlineIconButton}" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Primary" Classes="Primary" Theme="{DynamicResource OutlineIconButton}" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Secondary" Classes="Secondary" Theme="{DynamicResource OutlineIconButton}" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Tertiary" Classes="Tertiary" Theme="{DynamicResource OutlineIconButton}" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Success" Classes="Success" Theme="{DynamicResource OutlineIconButton}" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Warning" Classes="Warning" Theme="{DynamicResource OutlineIconButton}" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Danger" Classes="Danger" Theme="{DynamicResource OutlineIconButton}" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Disabled" Classes="Danger" Theme="{DynamicResource OutlineIconButton}" IsEnabled="False" />
|
||
</WrapPanel>
|
||
<WrapPanel ItemSpacing="8">
|
||
<Label Content="Borderless" Width="80"
|
||
ToolTip.Tip="BorderlessIconButton / BorderlessIconRepeatButton theme" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Default" Theme="{DynamicResource BorderlessIconButton}" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Primary" Classes="Primary" Theme="{DynamicResource BorderlessIconButton}" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Secondary" Classes="Secondary" Theme="{DynamicResource BorderlessIconButton}" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Tertiary" Classes="Tertiary" Theme="{DynamicResource BorderlessIconButton}" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Success" Classes="Success" Theme="{DynamicResource BorderlessIconButton}" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Warning" Classes="Warning" Theme="{DynamicResource BorderlessIconButton}" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Danger" Classes="Danger" Theme="{DynamicResource BorderlessIconButton}" />
|
||
<u:IconButton Icon="{StaticResource SemiIconCamera}" Content="Disabled" Classes="Danger" Theme="{DynamicResource BorderlessIconButton}" IsEnabled="False" />
|
||
</WrapPanel>
|
||
|
||
<TextBlock Text="Theme – Colorful (AI style)" FontWeight="Bold" />
|
||
<WrapPanel ItemSpacing="8">
|
||
<Label Content="Light" Width="80"
|
||
ToolTip.Tip="Default theme" />
|
||
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Content="Primary" Classes="Colorful Primary" />
|
||
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Content="Tertiary" Classes="Colorful Tertiary" />
|
||
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Content="Disabled" Classes="Colorful Danger" IsEnabled="False" />
|
||
<Label Content="Solid" Width="80" Margin="20 0 0 0"
|
||
ToolTip.Tip="SolidIconButton / SolidIconRepeatButton theme" />
|
||
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Content="Primary" Classes="Colorful Primary" Theme="{DynamicResource SolidIconButton}" />
|
||
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Content="Tertiary" Classes="Colorful Tertiary" Theme="{DynamicResource SolidIconButton}" />
|
||
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Content="Disabled" Classes="Colorful Danger" Theme="{DynamicResource SolidIconButton}" IsEnabled="False" />
|
||
</WrapPanel>
|
||
<WrapPanel ItemSpacing="8">
|
||
<Label Content="Outline" Width="80"
|
||
ToolTip.Tip="OutlineIconButton / OutlineIconRepeatButton theme" />
|
||
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Content="Primary" Classes="Colorful Primary" Theme="{DynamicResource OutlineIconButton}" />
|
||
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Content="Tertiary" Classes="Colorful Tertiary" Theme="{DynamicResource OutlineIconButton}" />
|
||
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Content="Disabled" Classes="Colorful Danger" Theme="{DynamicResource OutlineIconButton}" IsEnabled="False" />
|
||
<Label Content="Borderless" Width="80" Margin="20 0 0 0"
|
||
ToolTip.Tip="BorderlessIconButton / BorderlessIconRepeatButton theme" />
|
||
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Content="Primary" Classes="Colorful Primary" Theme="{DynamicResource BorderlessIconButton}" />
|
||
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Content="Tertiary" Classes="Colorful Tertiary" Theme="{DynamicResource BorderlessIconButton}" />
|
||
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Content="Disabled" Classes="Colorful Danger" Theme="{DynamicResource BorderlessIconButton}" IsEnabled="False" />
|
||
</WrapPanel>
|
||
|
||
</StackPanel>
|
||
</Panel>
|
||
</HeaderedContentControl>
|
||
|
||
<HeaderedContentControl Theme="{StaticResource GroupBox}">
|
||
<HeaderedContentControl.Header>
|
||
<DockPanel>
|
||
<StackPanel DockPanel.Dock="Right" Orientation="Horizontal" Spacing="8" TextElement.FontWeight="Normal">
|
||
<Label Content="Loading" />
|
||
<ToggleSwitch x:Name="chkIsIconDropDownButtonLoading" />
|
||
<Label Content="Icon" Margin="16 0 0 0" />
|
||
<u:EnumSelector x:Name="selIconDropDownButtonIconPlacement" Classes="IconPlacement" />
|
||
</StackPanel>
|
||
<TextBlock Text="IconDropDownButton" Classes="Header H6" />
|
||
</DockPanel>
|
||
</HeaderedContentControl.Header>
|
||
<Control.Styles>
|
||
<Style Selector="u|IconDropDownButton">
|
||
<Setter Property="IsLoading" Value="{Binding #chkIsIconDropDownButtonLoading.IsChecked}" />
|
||
<Setter Property="IconPlacement" Value="{Binding #selIconDropDownButtonIconPlacement.Value}" />
|
||
</Style>
|
||
</Control.Styles>
|
||
<Panel>
|
||
<StackPanel Spacing="8">
|
||
|
||
<TextBlock Text="Kind" FontWeight="Bold" />
|
||
<WrapPanel Orientation="Horizontal" ItemSpacing="8" LineSpacing="8">
|
||
<u:IconDropDownButton Icon="🐼" />
|
||
<u:IconDropDownButton Content="Text" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Text with icon" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Loading" IsLoading="True" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Disabled" IsEnabled="False" />
|
||
</WrapPanel>
|
||
|
||
<TextBlock Text="Size" FontWeight="Bold" />
|
||
<WrapPanel Orientation="Horizontal" ItemSpacing="8" LineSpacing="8">
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Large" Classes="Large" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Default" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Small" Classes="Small" />
|
||
</WrapPanel>
|
||
|
||
<TextBlock Text="Theme" FontWeight="Bold" />
|
||
<WrapPanel ItemSpacing="8">
|
||
<Label Content="Light" Width="80"
|
||
ToolTip.Tip="Default theme" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Default" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Primary" Classes="Primary" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Secondary" Classes="Secondary" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Tertiary" Classes="Tertiary" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Success" Classes="Success" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Warning" Classes="Warning" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Danger" Classes="Danger" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Disabled" Classes="Danger" IsEnabled="False" />
|
||
</WrapPanel>
|
||
<WrapPanel ItemSpacing="8">
|
||
<Label Content="Solid" Width="80"
|
||
ToolTip.Tip="SolidIconDropDownButton / SolidIconRepeatButton theme" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Default" Theme="{DynamicResource SolidIconDropDownButton}" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Primary" Classes="Primary" Theme="{DynamicResource SolidIconDropDownButton}" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Secondary" Classes="Secondary" Theme="{DynamicResource SolidIconDropDownButton}" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Tertiary" Classes="Tertiary" Theme="{DynamicResource SolidIconDropDownButton}" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Success" Classes="Success" Theme="{DynamicResource SolidIconDropDownButton}" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Warning" Classes="Warning" Theme="{DynamicResource SolidIconDropDownButton}" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Danger" Classes="Danger" Theme="{DynamicResource SolidIconDropDownButton}" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Disabled" Classes="Danger" Theme="{DynamicResource SolidIconDropDownButton}" IsEnabled="False" />
|
||
</WrapPanel>
|
||
<WrapPanel ItemSpacing="8">
|
||
<Label Content="Outline" Width="80"
|
||
ToolTip.Tip="OutlineIconDropDownButton / OutlineIconRepeatButton theme" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Default" Theme="{DynamicResource OutlineIconDropDownButton}" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Primary" Classes="Primary" Theme="{DynamicResource OutlineIconDropDownButton}" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Secondary" Classes="Secondary" Theme="{DynamicResource OutlineIconDropDownButton}" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Tertiary" Classes="Tertiary" Theme="{DynamicResource OutlineIconDropDownButton}" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Success" Classes="Success" Theme="{DynamicResource OutlineIconDropDownButton}" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Warning" Classes="Warning" Theme="{DynamicResource OutlineIconDropDownButton}" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Danger" Classes="Danger" Theme="{DynamicResource OutlineIconDropDownButton}" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Disabled" Classes="Danger" Theme="{DynamicResource OutlineIconDropDownButton}" IsEnabled="False" />
|
||
</WrapPanel>
|
||
<WrapPanel ItemSpacing="8">
|
||
<Label Content="Borderless" Width="80"
|
||
ToolTip.Tip="BorderlessIconDropDownButton / BorderlessIconRepeatButton theme" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Default" Theme="{DynamicResource BorderlessIconDropDownButton}" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Primary" Classes="Primary" Theme="{DynamicResource BorderlessIconDropDownButton}" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Secondary" Classes="Secondary" Theme="{DynamicResource BorderlessIconDropDownButton}" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Tertiary" Classes="Tertiary" Theme="{DynamicResource BorderlessIconDropDownButton}" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Success" Classes="Success" Theme="{DynamicResource BorderlessIconDropDownButton}" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Warning" Classes="Warning" Theme="{DynamicResource BorderlessIconDropDownButton}" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Danger" Classes="Danger" Theme="{DynamicResource BorderlessIconDropDownButton}" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconCamera}" Content="Disabled" Classes="Danger" Theme="{DynamicResource BorderlessIconDropDownButton}" IsEnabled="False" />
|
||
</WrapPanel>
|
||
|
||
<TextBlock Text="Theme – Colorful (AI style)" FontWeight="Bold" />
|
||
<WrapPanel ItemSpacing="8">
|
||
<Label Content="Light" Width="80"
|
||
ToolTip.Tip="Default theme" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconAIFilled}" Content="Primary" Classes="Colorful Primary" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconAIFilled}" Content="Tertiary" Classes="Colorful Tertiary" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconAIFilled}" Content="Disabled" Classes="Colorful Danger" IsEnabled="False" />
|
||
<Label Content="Solid" Width="80" Margin="20 0 0 0"
|
||
ToolTip.Tip="SolidIconDropDownButton / SolidIconRepeatButton theme" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconAIFilled}" Content="Primary" Classes="Colorful Primary" Theme="{DynamicResource SolidIconDropDownButton}" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconAIFilled}" Content="Tertiary" Classes="Colorful Tertiary" Theme="{DynamicResource SolidIconDropDownButton}" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconAIFilled}" Content="Disabled" Classes="Colorful Danger" Theme="{DynamicResource SolidIconDropDownButton}" IsEnabled="False" />
|
||
</WrapPanel>
|
||
<WrapPanel ItemSpacing="8">
|
||
<Label Content="Outline" Width="80"
|
||
ToolTip.Tip="OutlineIconDropDownButton / OutlineIconRepeatButton theme" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconAIFilled}" Content="Primary" Classes="Colorful Primary" Theme="{DynamicResource OutlineIconDropDownButton}" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconAIFilled}" Content="Tertiary" Classes="Colorful Tertiary" Theme="{DynamicResource OutlineIconDropDownButton}" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconAIFilled}" Content="Disabled" Classes="Colorful Danger" Theme="{DynamicResource OutlineIconDropDownButton}" IsEnabled="False" />
|
||
<Label Content="Borderless" Width="80" Margin="20 0 0 0"
|
||
ToolTip.Tip="BorderlessIconDropDownButton / BorderlessIconRepeatButton theme" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconAIFilled}" Content="Primary" Classes="Colorful Primary" Theme="{DynamicResource BorderlessIconDropDownButton}" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconAIFilled}" Content="Tertiary" Classes="Colorful Tertiary" Theme="{DynamicResource BorderlessIconDropDownButton}" />
|
||
<u:IconDropDownButton Icon="{StaticResource SemiIconAIFilled}" Content="Disabled" Classes="Colorful Danger" Theme="{DynamicResource BorderlessIconDropDownButton}" IsEnabled="False" />
|
||
</WrapPanel>
|
||
|
||
</StackPanel>
|
||
</Panel>
|
||
</HeaderedContentControl>
|
||
|
||
<HeaderedContentControl Theme="{StaticResource GroupBox}">
|
||
<HeaderedContentControl.Header>
|
||
<DockPanel>
|
||
<StackPanel DockPanel.Dock="Right" Orientation="Horizontal" Spacing="8" TextElement.FontWeight="Normal">
|
||
<Label Content="Loading" />
|
||
<ToggleSwitch x:Name="chkIsIconSplitButtonLoading" />
|
||
<Label Content="Icon" Margin="16 0 0 0" />
|
||
<u:EnumSelector x:Name="selIconSplitButtonIconPlacement" Classes="IconPlacement" />
|
||
</StackPanel>
|
||
<TextBlock Text="IconSplitButton" Classes="Header H6" />
|
||
</DockPanel>
|
||
</HeaderedContentControl.Header>
|
||
<Control.Styles>
|
||
<Style Selector="u|IconSplitButton">
|
||
<Setter Property="IsLoading" Value="{Binding #chkIsIconSplitButtonLoading.IsChecked}" />
|
||
<Setter Property="IconPlacement" Value="{Binding #selIconSplitButtonIconPlacement.Value}" />
|
||
</Style>
|
||
</Control.Styles>
|
||
<Panel>
|
||
<StackPanel Spacing="8">
|
||
|
||
<TextBlock Text="Kind" FontWeight="Bold" />
|
||
<WrapPanel Orientation="Horizontal" ItemSpacing="8" LineSpacing="8">
|
||
<u:IconSplitButton Icon="🐼" />
|
||
<u:IconSplitButton Content="Text" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Text with icon" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Loading" IsLoading="True" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Disabled" IsEnabled="False" />
|
||
</WrapPanel>
|
||
|
||
<TextBlock Text="Size" FontWeight="Bold" />
|
||
<WrapPanel Orientation="Horizontal" ItemSpacing="8" LineSpacing="8">
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Large" Classes="Large" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Default" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Small" Classes="Small" />
|
||
</WrapPanel>
|
||
|
||
<TextBlock Text="Theme" FontWeight="Bold" />
|
||
<WrapPanel ItemSpacing="8">
|
||
<Label Content="Light" Width="80"
|
||
ToolTip.Tip="Default theme" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Default" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Primary" Classes="Primary" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Secondary" Classes="Secondary" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Tertiary" Classes="Tertiary" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Success" Classes="Success" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Warning" Classes="Warning" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Danger" Classes="Danger" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Disabled" Classes="Danger" IsEnabled="False" />
|
||
</WrapPanel>
|
||
<WrapPanel ItemSpacing="8">
|
||
<Label Content="Solid" Width="80"
|
||
ToolTip.Tip="SolidIconSplitButton / SolidIconRepeatButton theme" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Default" Theme="{DynamicResource SolidIconSplitButton}" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Primary" Classes="Primary" Theme="{DynamicResource SolidIconSplitButton}" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Secondary" Classes="Secondary" Theme="{DynamicResource SolidIconSplitButton}" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Tertiary" Classes="Tertiary" Theme="{DynamicResource SolidIconSplitButton}" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Success" Classes="Success" Theme="{DynamicResource SolidIconSplitButton}" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Warning" Classes="Warning" Theme="{DynamicResource SolidIconSplitButton}" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Danger" Classes="Danger" Theme="{DynamicResource SolidIconSplitButton}" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Disabled" Classes="Danger" Theme="{DynamicResource SolidIconSplitButton}" IsEnabled="False" />
|
||
</WrapPanel>
|
||
<WrapPanel ItemSpacing="8">
|
||
<Label Content="Outline" Width="80"
|
||
ToolTip.Tip="OutlineIconSplitButton / OutlineIconRepeatButton theme" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Default" Theme="{DynamicResource OutlineIconSplitButton}" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Primary" Classes="Primary" Theme="{DynamicResource OutlineIconSplitButton}" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Secondary" Classes="Secondary" Theme="{DynamicResource OutlineIconSplitButton}" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Tertiary" Classes="Tertiary" Theme="{DynamicResource OutlineIconSplitButton}" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Success" Classes="Success" Theme="{DynamicResource OutlineIconSplitButton}" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Warning" Classes="Warning" Theme="{DynamicResource OutlineIconSplitButton}" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Danger" Classes="Danger" Theme="{DynamicResource OutlineIconSplitButton}" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Disabled" Classes="Danger" Theme="{DynamicResource OutlineIconSplitButton}" IsEnabled="False" />
|
||
</WrapPanel>
|
||
<WrapPanel ItemSpacing="8">
|
||
<Label Content="Borderless" Width="80"
|
||
ToolTip.Tip="BorderlessIconSplitButton / BorderlessIconRepeatButton theme" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Default" Theme="{DynamicResource BorderlessIconSplitButton}" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Primary" Classes="Primary" Theme="{DynamicResource BorderlessIconSplitButton}" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Secondary" Classes="Secondary" Theme="{DynamicResource BorderlessIconSplitButton}" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Tertiary" Classes="Tertiary" Theme="{DynamicResource BorderlessIconSplitButton}" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Success" Classes="Success" Theme="{DynamicResource BorderlessIconSplitButton}" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Warning" Classes="Warning" Theme="{DynamicResource BorderlessIconSplitButton}" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Danger" Classes="Danger" Theme="{DynamicResource BorderlessIconSplitButton}" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconCamera}" Content="Disabled" Classes="Danger" Theme="{DynamicResource BorderlessIconSplitButton}" IsEnabled="False" />
|
||
</WrapPanel>
|
||
|
||
<!--<TextBlock Text="Theme – Colorful (AI style)" FontWeight="Bold" />
|
||
<WrapPanel ItemSpacing="8">
|
||
<Label Content="Light" Width="80"
|
||
ToolTip.Tip="Default theme" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconAIFilled}" Content="Primary" Classes="Colorful Primary" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconAIFilled}" Content="Tertiary" Classes="Colorful Tertiary" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconAIFilled}" Content="Disabled" Classes="Colorful Danger" IsEnabled="False" />
|
||
<Label Content="Solid" Width="80" Margin="20 0 0 0"
|
||
ToolTip.Tip="SolidIconSplitButton / SolidIconRepeatButton theme" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconAIFilled}" Content="Primary" Classes="Colorful Primary" Theme="{DynamicResource SolidIconSplitButton}" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconAIFilled}" Content="Tertiary" Classes="Colorful Tertiary" Theme="{DynamicResource SolidIconSplitButton}" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconAIFilled}" Content="Disabled" Classes="Colorful Danger" Theme="{DynamicResource SolidIconSplitButton}" IsEnabled="False" />
|
||
</WrapPanel>
|
||
<WrapPanel ItemSpacing="8">
|
||
<Label Content="Outline" Width="80"
|
||
ToolTip.Tip="OutlineIconSplitButton / OutlineIconRepeatButton theme" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconAIFilled}" Content="Primary" Classes="Colorful Primary" Theme="{DynamicResource OutlineIconSplitButton}" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconAIFilled}" Content="Tertiary" Classes="Colorful Tertiary" Theme="{DynamicResource OutlineIconSplitButton}" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconAIFilled}" Content="Disabled" Classes="Colorful Danger" Theme="{DynamicResource OutlineIconSplitButton}" IsEnabled="False" />
|
||
<Label Content="Borderless" Width="80" Margin="20 0 0 0"
|
||
ToolTip.Tip="BorderlessIconSplitButton / BorderlessIconRepeatButton theme" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconAIFilled}" Content="Primary" Classes="Colorful Primary" Theme="{DynamicResource BorderlessIconSplitButton}" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconAIFilled}" Content="Tertiary" Classes="Colorful Tertiary" Theme="{DynamicResource BorderlessIconSplitButton}" />
|
||
<u:IconSplitButton Icon="{StaticResource SemiIconAIFilled}" Content="Disabled" Classes="Colorful Danger" Theme="{DynamicResource BorderlessIconSplitButton}" IsEnabled="False" />
|
||
</WrapPanel>-->
|
||
|
||
</StackPanel>
|
||
</Panel>
|
||
</HeaderedContentControl>
|
||
|
||
<HeaderedContentControl Theme="{StaticResource GroupBox}">
|
||
<HeaderedContentControl.Header>
|
||
<DockPanel>
|
||
<StackPanel DockPanel.Dock="Right" Orientation="Horizontal" Spacing="8" TextElement.FontWeight="Normal">
|
||
<Label Content="Loading" />
|
||
<ToggleSwitch x:Name="chkIsIconToggleButtonLoading" />
|
||
<Label Content="Icon" Margin="16 0 0 0" />
|
||
<u:EnumSelector x:Name="selIconToggleButtonIconPlacement" Classes="IconPlacement" />
|
||
</StackPanel>
|
||
<TextBlock Text="IconToggleButton" Classes="Header H6" />
|
||
</DockPanel>
|
||
</HeaderedContentControl.Header>
|
||
<Control.Styles>
|
||
<Style Selector="u|IconToggleButton">
|
||
<Setter Property="IsLoading" Value="{Binding #chkIsIconToggleButtonLoading.IsChecked}" />
|
||
<Setter Property="IconPlacement" Value="{Binding #selIconToggleButtonIconPlacement.Value}" />
|
||
</Style>
|
||
</Control.Styles>
|
||
<Panel>
|
||
<StackPanel Spacing="8">
|
||
|
||
<TextBlock Text="Kind" FontWeight="Bold" />
|
||
<WrapPanel Orientation="Horizontal" ItemSpacing="8" LineSpacing="8">
|
||
<u:IconToggleButton Icon="🐼" />
|
||
<u:IconToggleButton Content="Text" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconCamera}" IsThreeState="True" Content="Text with icon" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconCamera}" IsThreeState="True" Content="Loading" IsLoading="True" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconCamera}" IsThreeState="True" Content="Disabled" IsEnabled="False" />
|
||
</WrapPanel>
|
||
|
||
<TextBlock Text="Size" FontWeight="Bold" />
|
||
<WrapPanel Orientation="Horizontal" ItemSpacing="8" LineSpacing="8">
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconCamera}" IsThreeState="True" Content="Large" Classes="Large" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconCamera}" IsThreeState="True" Content="Default" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconCamera}" IsThreeState="True" Content="Small" Classes="Small" />
|
||
</WrapPanel>
|
||
|
||
<TextBlock Text="State" FontWeight="Bold" />
|
||
<WrapPanel ItemSpacing="8">
|
||
<Label Content="Unchecked" Width="100" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconCamera}" IsChecked="False" IsThreeState="True" Content="Default" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconCamera}" IsChecked="False" IsThreeState="True" Content="Primary" Classes="Primary" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconCamera}" IsChecked="False" IsThreeState="True" Content="Secondary" Classes="Secondary" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconCamera}" IsChecked="False" IsThreeState="True" Content="Tertiary" Classes="Tertiary" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconCamera}" IsChecked="False" IsThreeState="True" Content="Success" Classes="Success" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconCamera}" IsChecked="False" IsThreeState="True" Content="Warning" Classes="Warning" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconCamera}" IsChecked="False" IsThreeState="True" Content="Danger" Classes="Danger" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconCamera}" IsChecked="False" IsThreeState="True" Content="Disabled" Classes="Danger" IsEnabled="False" />
|
||
</WrapPanel>
|
||
<WrapPanel ItemSpacing="8">
|
||
<Label Content="Checked" Width="100" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconCamera}" IsChecked="True" IsThreeState="True" Content="Default" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconCamera}" IsChecked="True" IsThreeState="True" Content="Primary" Classes="Primary" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconCamera}" IsChecked="True" IsThreeState="True" Content="Secondary" Classes="Secondary" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconCamera}" IsChecked="True" IsThreeState="True" Content="Tertiary" Classes="Tertiary" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconCamera}" IsChecked="True" IsThreeState="True" Content="Success" Classes="Success" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconCamera}" IsChecked="True" IsThreeState="True" Content="Warning" Classes="Warning" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconCamera}" IsChecked="True" IsThreeState="True" Content="Danger" Classes="Danger" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconCamera}" IsChecked="True" IsThreeState="True" Content="Disabled" Classes="Danger" IsEnabled="False" />
|
||
</WrapPanel>
|
||
<WrapPanel ItemSpacing="8">
|
||
<Label Content="Indeterminate" Width="100" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconCamera}" IsChecked="{x:Null}" IsThreeState="True" Content="Default" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconCamera}" IsChecked="{x:Null}" IsThreeState="True" Content="Primary" Classes="Primary" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconCamera}" IsChecked="{x:Null}" IsThreeState="True" Content="Secondary" Classes="Secondary" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconCamera}" IsChecked="{x:Null}" IsThreeState="True" Content="Tertiary" Classes="Tertiary" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconCamera}" IsChecked="{x:Null}" IsThreeState="True" Content="Success" Classes="Success" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconCamera}" IsChecked="{x:Null}" IsThreeState="True" Content="Warning" Classes="Warning" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconCamera}" IsChecked="{x:Null}" IsThreeState="True" Content="Danger" Classes="Danger" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconCamera}" IsChecked="{x:Null}" IsThreeState="True" Content="Disabled" Classes="Danger" IsEnabled="False" />
|
||
</WrapPanel>
|
||
|
||
<TextBlock Text="State – Colorful (AI style)" FontWeight="Bold" />
|
||
<WrapPanel ItemSpacing="8">
|
||
<Label Content="Unchecked" Width="100" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconAIFilled}" IsThreeState="True" IsChecked="False" Content="Primary" Classes="Colorful Primary" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconAIFilled}" IsThreeState="True" IsChecked="False" Content="Tertiary" Classes="Colorful Tertiary" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconAIFilled}" IsThreeState="True" IsChecked="False" Content="Disabled" Classes="Colorful Danger" IsEnabled="False" />
|
||
</WrapPanel>
|
||
<WrapPanel ItemSpacing="8">
|
||
<Label Content="Checked" Width="100" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconAIFilled}" IsThreeState="True" IsChecked="True" Content="Primary" Classes="Colorful Primary" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconAIFilled}" IsThreeState="True" IsChecked="True" Content="Tertiary" Classes="Colorful Tertiary" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconAIFilled}" IsThreeState="True" IsChecked="True" Content="Disabled" Classes="Colorful Danger" IsEnabled="False" />
|
||
</WrapPanel>
|
||
<WrapPanel ItemSpacing="8">
|
||
<Label Content="Indeterminate" Width="100" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconAIFilled}" IsThreeState="True" IsChecked="{x:Null}" Content="Primary" Classes="Colorful Primary" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconAIFilled}" IsThreeState="True" IsChecked="{x:Null}" Content="Tertiary" Classes="Colorful Tertiary" />
|
||
<u:IconToggleButton Icon="{StaticResource SemiIconAIFilled}" IsThreeState="True" IsChecked="{x:Null}" Content="Disabled" Classes="Colorful Danger" IsEnabled="False" />
|
||
</WrapPanel>
|
||
|
||
</StackPanel>
|
||
</Panel>
|
||
</HeaderedContentControl>
|
||
|
||
<HeaderedContentControl Theme="{StaticResource GroupBox}">
|
||
<HeaderedContentControl.Header>
|
||
<DockPanel>
|
||
<StackPanel DockPanel.Dock="Right" Orientation="Horizontal" Spacing="8" TextElement.FontWeight="Normal">
|
||
<Label Content="Loading" />
|
||
<ToggleSwitch x:Name="chkIsIconToggleSplitButtonLoading" />
|
||
<Label Content="Icon" Margin="16 0 0 0" />
|
||
<u:EnumSelector x:Name="selIconToggleSplitButtonIconPlacement" Classes="IconPlacement" />
|
||
</StackPanel>
|
||
<TextBlock Text="IconToggleSplitButton" Classes="Header H6" />
|
||
</DockPanel>
|
||
</HeaderedContentControl.Header>
|
||
<Control.Styles>
|
||
<Style Selector="u|IconToggleSplitButton">
|
||
<Setter Property="IsLoading" Value="{Binding #chkIsIconToggleSplitButtonLoading.IsChecked}" />
|
||
<Setter Property="IconPlacement" Value="{Binding #selIconToggleSplitButtonIconPlacement.Value}" />
|
||
</Style>
|
||
</Control.Styles>
|
||
<Panel>
|
||
<StackPanel Spacing="8">
|
||
|
||
<TextBlock Text="Kind" FontWeight="Bold" />
|
||
<WrapPanel Orientation="Horizontal" ItemSpacing="8" LineSpacing="8">
|
||
<u:IconToggleSplitButton Icon="🐼" />
|
||
<u:IconToggleSplitButton Content="Text" />
|
||
<u:IconToggleSplitButton Icon="{StaticResource SemiIconCamera}" Content="Text with icon" />
|
||
<u:IconToggleSplitButton Icon="{StaticResource SemiIconCamera}" Content="Loading" IsLoading="True" />
|
||
<u:IconToggleSplitButton Icon="{StaticResource SemiIconCamera}" Content="Disabled" IsEnabled="False" />
|
||
</WrapPanel>
|
||
|
||
<TextBlock Text="Size" FontWeight="Bold" />
|
||
<WrapPanel Orientation="Horizontal" ItemSpacing="8" LineSpacing="8">
|
||
<u:IconToggleSplitButton Icon="{StaticResource SemiIconCamera}" Content="Large" Classes="Large" />
|
||
<u:IconToggleSplitButton Icon="{StaticResource SemiIconCamera}" Content="Default" />
|
||
<u:IconToggleSplitButton Icon="{StaticResource SemiIconCamera}" Content="Small" Classes="Small" />
|
||
</WrapPanel>
|
||
|
||
<TextBlock Text="State" FontWeight="Bold" />
|
||
<WrapPanel ItemSpacing="8">
|
||
<Label Content="Unchecked" Width="100" />
|
||
<u:IconToggleSplitButton Icon="{StaticResource SemiIconCamera}" IsChecked="False" Content="Default" />
|
||
<u:IconToggleSplitButton Icon="{StaticResource SemiIconCamera}" IsChecked="False" Content="Primary" Classes="Primary" />
|
||
<u:IconToggleSplitButton Icon="{StaticResource SemiIconCamera}" IsChecked="False" Content="Secondary" Classes="Secondary" />
|
||
<u:IconToggleSplitButton Icon="{StaticResource SemiIconCamera}" IsChecked="False" Content="Tertiary" Classes="Tertiary" />
|
||
<u:IconToggleSplitButton Icon="{StaticResource SemiIconCamera}" IsChecked="False" Content="Success" Classes="Success" />
|
||
<u:IconToggleSplitButton Icon="{StaticResource SemiIconCamera}" IsChecked="False" Content="Warning" Classes="Warning" />
|
||
<u:IconToggleSplitButton Icon="{StaticResource SemiIconCamera}" IsChecked="False" Content="Danger" Classes="Danger" />
|
||
<u:IconToggleSplitButton Icon="{StaticResource SemiIconCamera}" IsChecked="False" Content="Disabled" Classes="Danger" IsEnabled="False" />
|
||
</WrapPanel>
|
||
<WrapPanel ItemSpacing="8">
|
||
<Label Content="Checked" Width="100" />
|
||
<u:IconToggleSplitButton Icon="{StaticResource SemiIconCamera}" IsChecked="True" Content="Default" />
|
||
<u:IconToggleSplitButton Icon="{StaticResource SemiIconCamera}" IsChecked="True" Content="Primary" Classes="Primary" />
|
||
<u:IconToggleSplitButton Icon="{StaticResource SemiIconCamera}" IsChecked="True" Content="Secondary" Classes="Secondary" />
|
||
<u:IconToggleSplitButton Icon="{StaticResource SemiIconCamera}" IsChecked="True" Content="Tertiary" Classes="Tertiary" />
|
||
<u:IconToggleSplitButton Icon="{StaticResource SemiIconCamera}" IsChecked="True" Content="Success" Classes="Success" />
|
||
<u:IconToggleSplitButton Icon="{StaticResource SemiIconCamera}" IsChecked="True" Content="Warning" Classes="Warning" />
|
||
<u:IconToggleSplitButton Icon="{StaticResource SemiIconCamera}" IsChecked="True" Content="Danger" Classes="Danger" />
|
||
<u:IconToggleSplitButton Icon="{StaticResource SemiIconCamera}" IsChecked="True" Content="Disabled" Classes="Danger" IsEnabled="False" />
|
||
</WrapPanel>
|
||
|
||
<!--<TextBlock Text="State – Colorful (AI style)" FontWeight="Bold" />
|
||
<WrapPanel ItemSpacing="8">
|
||
<Label Content="Unchecked" Width="100" />
|
||
<u:IconToggleSplitButton Icon="{StaticResource SemiIconAIFilled}" IsChecked="False" Content="Primary" Classes="Colorful Primary" />
|
||
<u:IconToggleSplitButton Icon="{StaticResource SemiIconAIFilled}" IsChecked="False" Content="Tertiary" Classes="Colorful Tertiary" />
|
||
<u:IconToggleSplitButton Icon="{StaticResource SemiIconAIFilled}" IsChecked="False" Content="Disabled" Classes="Colorful Danger" IsEnabled="False" />
|
||
</WrapPanel>
|
||
<WrapPanel ItemSpacing="8">
|
||
<Label Content="Checked" Width="100" />
|
||
<u:IconToggleSplitButton Icon="{StaticResource SemiIconAIFilled}" IsChecked="True" Content="Primary" Classes="Colorful Primary" />
|
||
<u:IconToggleSplitButton Icon="{StaticResource SemiIconAIFilled}" IsChecked="True" Content="Tertiary" Classes="Colorful Tertiary" />
|
||
<u:IconToggleSplitButton Icon="{StaticResource SemiIconAIFilled}" IsChecked="True" Content="Disabled" Classes="Colorful Danger" IsEnabled="False" />
|
||
</WrapPanel>-->
|
||
|
||
</StackPanel>
|
||
</Panel>
|
||
</HeaderedContentControl>
|
||
|
||
<Border Theme="{StaticResource CardBorder}">
|
||
<StackPanel Spacing="8">
|
||
<StackPanel Orientation="Horizontal" Spacing="8">
|
||
<TextBlock
|
||
VerticalAlignment="Center"
|
||
Text="加载态"
|
||
FontWeight="Bold" />
|
||
<ToggleSwitch
|
||
Theme="{StaticResource SimpleToggleSwitch}"
|
||
IsChecked="{Binding IsLoading}" />
|
||
</StackPanel>
|
||
<StackPanel Orientation="Horizontal" Spacing="8">
|
||
<u:IconButton
|
||
IsLoading="{Binding IsLoading}"
|
||
Content="保存" />
|
||
<u:IconButton
|
||
Classes="Danger"
|
||
Icon="{StaticResource SemiIconDelete}"
|
||
IsLoading="{Binding IsLoading}"
|
||
Content="删除" />
|
||
<u:IconButton
|
||
Width="200"
|
||
Theme="{StaticResource SolidIconButton}"
|
||
Classes="Warning"
|
||
IsLoading="{Binding IsLoading}"
|
||
Content="撤销" />
|
||
</StackPanel>
|
||
</StackPanel>
|
||
</Border>
|
||
|
||
<Border Theme="{StaticResource CardBorder}">
|
||
<StackPanel Spacing="8">
|
||
<StackPanel Orientation="Horizontal" Spacing="8">
|
||
<TextBlock
|
||
VerticalAlignment="Center"
|
||
Text="加载态"
|
||
FontWeight="Bold" />
|
||
<ToggleSwitch
|
||
Theme="{StaticResource SimpleToggleSwitch}"
|
||
IsChecked="{Binding IsLoading2}" />
|
||
<u:EnumSelector
|
||
Width="100"
|
||
EnumType="common:Position"
|
||
Value="{Binding SelectedPosition}" />
|
||
</StackPanel>
|
||
<StackPanel Orientation="Horizontal" Spacing="8">
|
||
<u:IconButton
|
||
HorizontalAlignment="Left"
|
||
IsLoading="{Binding IsLoading2}"
|
||
IconPlacement="{Binding SelectedPosition}"
|
||
Icon="{StaticResource SemiIconCamera}" />
|
||
<u:IconButton
|
||
HorizontalAlignment="Left"
|
||
IsLoading="{Binding IsLoading2}"
|
||
IconPlacement="{Binding SelectedPosition}"
|
||
Icon="{StaticResource SemiIconCamera}"
|
||
Content="Hello Camera" />
|
||
<u:IconButton
|
||
HorizontalAlignment="Left"
|
||
IsLoading="{Binding IsLoading2}"
|
||
IconPlacement="{Binding SelectedPosition}"
|
||
Icon="🐼"
|
||
Content="Hello Panda" />
|
||
<u:IconButton
|
||
HorizontalAlignment="Left"
|
||
IsLoading="{Binding IsLoading2}"
|
||
IconPlacement="{Binding SelectedPosition}"
|
||
Content="Hello Text" />
|
||
</StackPanel>
|
||
<StackPanel Orientation="Horizontal" Spacing="8">
|
||
<u:IconButton
|
||
HorizontalAlignment="Left"
|
||
IsLoading="{Binding IsLoading2}"
|
||
IconPlacement="{Binding SelectedPosition}"
|
||
Content="Hello Panda">
|
||
<u:IconButton.Icon>
|
||
<TextBlock
|
||
FontSize="40"
|
||
HorizontalAlignment="Center"
|
||
Text="🐼" />
|
||
</u:IconButton.Icon>
|
||
</u:IconButton>
|
||
<u:IconButton
|
||
HorizontalAlignment="Left"
|
||
IsLoading="{Binding IsLoading2}"
|
||
IconPlacement="{Binding SelectedPosition}"
|
||
Theme="{StaticResource SolidIconButton}"
|
||
Classes="Danger Large">
|
||
<u:IconButton.Icon>
|
||
<TextBlock FontSize="40" Text="🐼" />
|
||
</u:IconButton.Icon>
|
||
</u:IconButton>
|
||
</StackPanel>
|
||
<StackPanel Orientation="Horizontal" Spacing="8">
|
||
<u:IconButton
|
||
IsLoading="{Binding IsLoading2}"
|
||
IconPlacement="{Binding SelectedPosition}"
|
||
Theme="{StaticResource SolidIconButton}"
|
||
Classes="Danger Large"
|
||
Icon="{StaticResource SemiIconCamera}" />
|
||
<u:IconButton
|
||
IsLoading="{Binding IsLoading2}"
|
||
IconPlacement="{Binding SelectedPosition}"
|
||
Theme="{StaticResource SolidIconButton}"
|
||
Classes="Danger Large"
|
||
Icon="🐼" />
|
||
</StackPanel>
|
||
</StackPanel>
|
||
</Border>
|
||
|
||
</StackPanel>
|
||
</ScrollViewer>
|
||
</UserControl> |