feat: RadioGroupListBox theme.
This commit is contained in:
Zhang Dian
parent
437e9ea42b
commit
e1588120f2
@ -4,22 +4,30 @@
|
|||||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||||
|
xmlns:local="clr-namespace:Semi.Avalonia.Demo.Pages"
|
||||||
d:DesignHeight="450"
|
d:DesignHeight="450"
|
||||||
d:DesignWidth="800"
|
d:DesignWidth="800"
|
||||||
mc:Ignorable="d">
|
mc:Ignorable="d">
|
||||||
<ListBox>
|
<UserControl.Resources>
|
||||||
<ListBoxItem>Item 1</ListBoxItem>
|
<DataTemplate x:Key="PandaTemplate" DataType="local:Panda">
|
||||||
<ListBoxItem>Item 2</ListBoxItem>
|
<TextBlock Text="{Binding Name}" />
|
||||||
<ListBoxItem IsEnabled="False">Item 3</ListBoxItem>
|
</DataTemplate>
|
||||||
<ListBoxItem>Item 4</ListBoxItem>
|
<ControlTheme
|
||||||
<ListBoxItem>Item 5</ListBoxItem>
|
x:Key="PandaControlTheme"
|
||||||
<ListBoxItem>Item 6</ListBoxItem>
|
BasedOn="{StaticResource RadioGroupListBoxItem}"
|
||||||
<ListBoxItem>Item 7</ListBoxItem>
|
TargetType="ListBoxItem">
|
||||||
<ListBoxItem IsEnabled="False">Item 8</ListBoxItem>
|
<Setter Property="IsEnabled" Value="{Binding IsAvailable}" />
|
||||||
<ListBoxItem>Item 9</ListBoxItem>
|
</ControlTheme>
|
||||||
<ListBoxItem>Item 10</ListBoxItem>
|
</UserControl.Resources>
|
||||||
<ListBoxItem>Item 11</ListBoxItem>
|
<ScrollViewer>
|
||||||
<ListBoxItem>Item 12</ListBoxItem>
|
<StackPanel>
|
||||||
<ListBoxItem>Item 13</ListBoxItem>
|
<ListBox ItemsSource="{Binding $parent[local:ListBoxDemo].Items}"
|
||||||
</ListBox>
|
ItemTemplate="{StaticResource PandaTemplate}" />
|
||||||
</UserControl>
|
<ListBox Theme="{DynamicResource RadioGroupListBox}"
|
||||||
|
ItemsSource="{Binding $parent[local:ListBoxDemo].Items}"
|
||||||
|
ItemTemplate="{StaticResource PandaTemplate}"
|
||||||
|
ItemContainerTheme="{StaticResource PandaControlTheme}">
|
||||||
|
</ListBox>
|
||||||
|
</StackPanel>
|
||||||
|
</ScrollViewer>
|
||||||
|
</UserControl>
|
||||||
@ -1,6 +1,6 @@
|
|||||||
using Avalonia;
|
using System.Collections;
|
||||||
|
using System.Collections.Generic;
|
||||||
using Avalonia.Controls;
|
using Avalonia.Controls;
|
||||||
using Avalonia.Markup.Xaml;
|
|
||||||
|
|
||||||
namespace Semi.Avalonia.Demo.Pages;
|
namespace Semi.Avalonia.Demo.Pages;
|
||||||
|
|
||||||
@ -10,4 +10,19 @@ public partial class ListBoxDemo : UserControl
|
|||||||
{
|
{
|
||||||
InitializeComponent();
|
InitializeComponent();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public IEnumerable Items { get; set; } = new List<Panda>
|
||||||
|
{
|
||||||
|
new() { Name = "Ding", IsAvailable = true },
|
||||||
|
new() { Name = "Otter", IsAvailable = true },
|
||||||
|
new() { Name = "Husky", IsAvailable = false },
|
||||||
|
new() { Name = "Mr.17", IsAvailable = true },
|
||||||
|
new() { Name = "Cass", IsAvailable = true },
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
internal record Panda
|
||||||
|
{
|
||||||
|
public string Name { get; set; }
|
||||||
|
public bool IsAvailable { get; set; }
|
||||||
}
|
}
|
||||||
@ -66,7 +66,8 @@
|
|||||||
<Setter Property="ListBoxItem.Foreground" Value="{DynamicResource ListBoxItemDisabledForeground}" />
|
<Setter Property="ListBoxItem.Foreground" Value="{DynamicResource ListBoxItemDisabledForeground}" />
|
||||||
<Setter Property="ListBoxItem.Background" Value="{DynamicResource ListBoxItemDisabledBackground}" />
|
<Setter Property="ListBoxItem.Background" Value="{DynamicResource ListBoxItemDisabledBackground}" />
|
||||||
<Style Selector="^:selected">
|
<Style Selector="^:selected">
|
||||||
<Setter Property="ListBoxItem.Background" Value="{DynamicResource ListBoxItemSelectedDisabledBackground}" />
|
<Setter Property="ListBoxItem.Background"
|
||||||
|
Value="{DynamicResource ListBoxItemSelectedDisabledBackground}" />
|
||||||
</Style>
|
</Style>
|
||||||
</Style>
|
</Style>
|
||||||
|
|
||||||
@ -84,8 +85,187 @@
|
|||||||
<Style Selector="^:selected">
|
<Style Selector="^:selected">
|
||||||
<Setter Property="ListBoxItem.Background" Value="{DynamicResource ListBoxItemSelectedBackground}" />
|
<Setter Property="ListBoxItem.Background" Value="{DynamicResource ListBoxItemSelectedBackground}" />
|
||||||
<Style Selector="^:pointerover">
|
<Style Selector="^:pointerover">
|
||||||
<Setter Property="ListBoxItem.Background" Value="{DynamicResource ListBoxItemSelectedPointeroverBackground}" />
|
<Setter Property="ListBoxItem.Background"
|
||||||
|
Value="{DynamicResource ListBoxItemSelectedPointeroverBackground}" />
|
||||||
</Style>
|
</Style>
|
||||||
</Style>
|
</Style>
|
||||||
</ControlTheme>
|
</ControlTheme>
|
||||||
</ResourceDictionary>
|
|
||||||
|
<ControlTheme x:Key="RadioGroupListBox" TargetType="ListBox">
|
||||||
|
<Setter Property="ListBox.ItemContainerTheme" Value="{DynamicResource RadioGroupListBoxItem}" />
|
||||||
|
<Setter Property="ListBox.ItemsPanel">
|
||||||
|
<ItemsPanelTemplate>
|
||||||
|
<StackPanel Orientation="Horizontal" />
|
||||||
|
</ItemsPanelTemplate>
|
||||||
|
</Setter>
|
||||||
|
<Setter Property="ListBox.Template">
|
||||||
|
<ControlTemplate TargetType="ListBox">
|
||||||
|
<Border
|
||||||
|
Background="{TemplateBinding Background}"
|
||||||
|
BorderBrush="{TemplateBinding BorderBrush}"
|
||||||
|
BorderThickness="{TemplateBinding BorderThickness}"
|
||||||
|
ClipToBounds="{TemplateBinding ClipToBounds}"
|
||||||
|
CornerRadius="{TemplateBinding CornerRadius}">
|
||||||
|
<ItemsPresenter
|
||||||
|
Theme="{DynamicResource RadioGroupListBoxItem}"
|
||||||
|
ItemsPanel="{TemplateBinding ItemsPanel}" />
|
||||||
|
</Border>
|
||||||
|
</ControlTemplate>
|
||||||
|
</Setter>
|
||||||
|
</ControlTheme>
|
||||||
|
|
||||||
|
<ControlTheme x:Key="RadioGroupListBoxItem" TargetType="ListBoxItem">
|
||||||
|
<Setter Property="ListBoxItem.HorizontalAlignment" Value="Left" />
|
||||||
|
<Setter Property="ListBoxItem.VerticalAlignment" Value="Top" />
|
||||||
|
<Setter Property="ListBoxItem.Cursor" Value="Hand" />
|
||||||
|
<Setter Property="ListBoxItem.HorizontalContentAlignment" Value="Left" />
|
||||||
|
<Setter Property="ListBoxItem.VerticalContentAlignment" Value="Center" />
|
||||||
|
<Setter Property="ListBoxItem.FontSize" Value="{DynamicResource RadioButtonFontSize}" />
|
||||||
|
<Setter Property="ListBoxItem.CornerRadius" Value="{DynamicResource RadioButtonBoxCornerRadius}" />
|
||||||
|
<Setter Property="ListBoxItem.Foreground" Value="{DynamicResource RadioButtonForeground}" />
|
||||||
|
<Setter Property="ListBoxItem.Background" Value="{DynamicResource RadioButtonDefaultBackground}" />
|
||||||
|
<Setter Property="ListBoxItem.BorderBrush" Value="{DynamicResource RadioButtonDefaultBorderBrush}" />
|
||||||
|
<Setter Property="ListBoxItem.Template">
|
||||||
|
<ControlTemplate TargetType="ListBoxItem">
|
||||||
|
<Border
|
||||||
|
Name="RootBorder"
|
||||||
|
Margin="{TemplateBinding Margin}"
|
||||||
|
Padding="{TemplateBinding Padding}"
|
||||||
|
Background="{TemplateBinding Background}"
|
||||||
|
BorderBrush="{TemplateBinding BorderBrush}"
|
||||||
|
BorderThickness="{TemplateBinding BorderThickness}"
|
||||||
|
CornerRadius="{TemplateBinding CornerRadius}">
|
||||||
|
<Grid ColumnDefinitions="Auto,*">
|
||||||
|
<Grid Margin="{DynamicResource RadioButtonIconMargin}"
|
||||||
|
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
|
||||||
|
<Ellipse
|
||||||
|
Name="OuterEllipse"
|
||||||
|
Width="{DynamicResource RadioButtonIconRadius}"
|
||||||
|
Height="{DynamicResource RadioButtonIconRadius}"
|
||||||
|
Fill="{DynamicResource RadioButtonUncheckIconDefaultBackground}"
|
||||||
|
Stroke="{DynamicResource RadioButtonUncheckIconDefaultBorderBrush}"
|
||||||
|
StrokeThickness="1"
|
||||||
|
UseLayoutRounding="False" />
|
||||||
|
|
||||||
|
<Ellipse
|
||||||
|
Name="CheckGlyph"
|
||||||
|
Width="{DynamicResource RadioButtonGlyphRadius}"
|
||||||
|
Height="{DynamicResource RadioButtonGlyphRadius}"
|
||||||
|
Fill="{DynamicResource RadioButtonCheckGlyphFill}"
|
||||||
|
Opacity="0"
|
||||||
|
Stroke="{DynamicResource RadioButtonCheckGlyphFill}"
|
||||||
|
StrokeThickness="0"
|
||||||
|
UseLayoutRounding="False" />
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<ContentPresenter
|
||||||
|
Name="PART_ContentPresenter"
|
||||||
|
Grid.Column="1"
|
||||||
|
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
|
||||||
|
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
|
||||||
|
Content="{TemplateBinding Content}"
|
||||||
|
ContentTemplate="{TemplateBinding ContentTemplate}"
|
||||||
|
Foreground="{TemplateBinding Foreground}"
|
||||||
|
RecognizesAccessKey="True"
|
||||||
|
TextElement.FontSize="{DynamicResource RadioButtonFontSize}"
|
||||||
|
TextElement.Foreground="{DynamicResource RadioButtonForeground}" />
|
||||||
|
</Grid>
|
||||||
|
</Border>
|
||||||
|
|
||||||
|
</ControlTemplate>
|
||||||
|
</Setter>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Unchecked State -->
|
||||||
|
<Style Selector="^ /template/ Ellipse#OuterEllipse">
|
||||||
|
<Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDefaultBorderBrush}" />
|
||||||
|
<Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDefaultBackground}" />
|
||||||
|
</Style>
|
||||||
|
<Style Selector="^ /template/ Ellipse#CheckGlyph">
|
||||||
|
<Setter Property="Ellipse.Opacity" Value="0" />
|
||||||
|
</Style>
|
||||||
|
|
||||||
|
<!-- Unchecked Pointerover State -->
|
||||||
|
<Style Selector="^:pointerover">
|
||||||
|
<Style Selector="^ /template/ Ellipse#OuterEllipse">
|
||||||
|
<Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPointeroverBorderBrush}" />
|
||||||
|
<Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPointeroverBackground}" />
|
||||||
|
</Style>
|
||||||
|
<Style Selector="^ /template/ Ellipse#CheckGlyph">
|
||||||
|
<Setter Property="Ellipse.Opacity" Value="0" />
|
||||||
|
</Style>
|
||||||
|
</Style>
|
||||||
|
|
||||||
|
<!-- Unchecked Pressed State -->
|
||||||
|
<Style Selector="^:pressed">
|
||||||
|
<Style Selector="^ /template/ Ellipse#OuterEllipse">
|
||||||
|
<Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPressedBorderBrush}" />
|
||||||
|
<Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPressedBackground}" />
|
||||||
|
</Style>
|
||||||
|
<Style Selector="^ /template/ Ellipse#CheckGlyph">
|
||||||
|
<Setter Property="Ellipse.Opacity" Value="0" />
|
||||||
|
</Style>
|
||||||
|
</Style>
|
||||||
|
|
||||||
|
<!-- Unchecked Disabled state -->
|
||||||
|
<Style Selector="^:disabled">
|
||||||
|
<Style Selector="^ /template/ Ellipse#OuterEllipse">
|
||||||
|
<Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDisabledBorderBrush}" />
|
||||||
|
<Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDisabledBackground}" />
|
||||||
|
</Style>
|
||||||
|
<Style Selector="^ /template/ Ellipse#CheckGlyph">
|
||||||
|
<Setter Property="Ellipse.Opacity" Value="0" />
|
||||||
|
</Style>
|
||||||
|
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
|
||||||
|
<Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
|
||||||
|
</Style>
|
||||||
|
</Style>
|
||||||
|
|
||||||
|
<!-- Checked State -->
|
||||||
|
<Style Selector="^:selected">
|
||||||
|
<Style Selector="^ /template/ Ellipse#OuterEllipse">
|
||||||
|
<Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconDefaultBorderBrush}" />
|
||||||
|
<Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconDefaultBackground}" />
|
||||||
|
</Style>
|
||||||
|
<Style Selector="^ /template/ Ellipse#CheckGlyph">
|
||||||
|
<Setter Property="Ellipse.Opacity" Value="1" />
|
||||||
|
</Style>
|
||||||
|
|
||||||
|
<!-- Checked Pointerover State -->
|
||||||
|
<Style Selector="^:pointerover">
|
||||||
|
<Style Selector="^ /template/ Ellipse#OuterEllipse">
|
||||||
|
<Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointeroverBorderBrush}" />
|
||||||
|
<Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointeroverBackground}" />
|
||||||
|
</Style>
|
||||||
|
<Style Selector="^ /template/ Ellipse#CheckGlyph">
|
||||||
|
<Setter Property="Ellipse.Opacity" Value="1" />
|
||||||
|
</Style>
|
||||||
|
</Style>
|
||||||
|
|
||||||
|
<!-- Checked Pressed State -->
|
||||||
|
<Style Selector="^:pressed">
|
||||||
|
<Style Selector="^ /template/ Ellipse#OuterEllipse">
|
||||||
|
<Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPressedBorderBrush}" />
|
||||||
|
<Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPressedBackground}" />
|
||||||
|
</Style>
|
||||||
|
<Style Selector="^ /template/ Ellipse#CheckGlyph">
|
||||||
|
<Setter Property="Ellipse.Opacity" Value="1" />
|
||||||
|
</Style>
|
||||||
|
</Style>
|
||||||
|
|
||||||
|
<!-- Checked Disabled State -->
|
||||||
|
<Style Selector="^:disabled">
|
||||||
|
<Style Selector="^ /template/ Ellipse#OuterEllipse">
|
||||||
|
<Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconDisabledBorderBrush}" />
|
||||||
|
<Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconDisabledBackground}" />
|
||||||
|
</Style>
|
||||||
|
<Style Selector="^ /template/ Ellipse#CheckGlyph">
|
||||||
|
<Setter Property="Ellipse.Opacity" Value="1" />
|
||||||
|
</Style>
|
||||||
|
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
|
||||||
|
<Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
|
||||||
|
</Style>
|
||||||
|
</Style>
|
||||||
|
</Style>
|
||||||
|
</ControlTheme>
|
||||||
|
</ResourceDictionary>
|
||||||
Loading…
x
Reference in New Issue
Block a user