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:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
xmlns:local="clr-namespace:Semi.Avalonia.Demo.Pages"
|
||||
d:DesignHeight="450"
|
||||
d:DesignWidth="800"
|
||||
mc:Ignorable="d">
|
||||
<ListBox>
|
||||
<ListBoxItem>Item 1</ListBoxItem>
|
||||
<ListBoxItem>Item 2</ListBoxItem>
|
||||
<ListBoxItem IsEnabled="False">Item 3</ListBoxItem>
|
||||
<ListBoxItem>Item 4</ListBoxItem>
|
||||
<ListBoxItem>Item 5</ListBoxItem>
|
||||
<ListBoxItem>Item 6</ListBoxItem>
|
||||
<ListBoxItem>Item 7</ListBoxItem>
|
||||
<ListBoxItem IsEnabled="False">Item 8</ListBoxItem>
|
||||
<ListBoxItem>Item 9</ListBoxItem>
|
||||
<ListBoxItem>Item 10</ListBoxItem>
|
||||
<ListBoxItem>Item 11</ListBoxItem>
|
||||
<ListBoxItem>Item 12</ListBoxItem>
|
||||
<ListBoxItem>Item 13</ListBoxItem>
|
||||
</ListBox>
|
||||
</UserControl>
|
||||
<UserControl.Resources>
|
||||
<DataTemplate x:Key="PandaTemplate" DataType="local:Panda">
|
||||
<TextBlock Text="{Binding Name}" />
|
||||
</DataTemplate>
|
||||
<ControlTheme
|
||||
x:Key="PandaControlTheme"
|
||||
BasedOn="{StaticResource RadioGroupListBoxItem}"
|
||||
TargetType="ListBoxItem">
|
||||
<Setter Property="IsEnabled" Value="{Binding IsAvailable}" />
|
||||
</ControlTheme>
|
||||
</UserControl.Resources>
|
||||
<ScrollViewer>
|
||||
<StackPanel>
|
||||
<ListBox ItemsSource="{Binding $parent[local:ListBoxDemo].Items}"
|
||||
ItemTemplate="{StaticResource PandaTemplate}" />
|
||||
<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.Markup.Xaml;
|
||||
|
||||
namespace Semi.Avalonia.Demo.Pages;
|
||||
|
||||
@ -10,4 +10,19 @@ public partial class ListBoxDemo : UserControl
|
||||
{
|
||||
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.Background" Value="{DynamicResource ListBoxItemDisabledBackground}" />
|
||||
<Style Selector="^:selected">
|
||||
<Setter Property="ListBoxItem.Background" Value="{DynamicResource ListBoxItemSelectedDisabledBackground}" />
|
||||
<Setter Property="ListBoxItem.Background"
|
||||
Value="{DynamicResource ListBoxItemSelectedDisabledBackground}" />
|
||||
</Style>
|
||||
</Style>
|
||||
|
||||
@ -84,8 +85,187 @@
|
||||
<Style Selector="^:selected">
|
||||
<Setter Property="ListBoxItem.Background" Value="{DynamicResource ListBoxItemSelectedBackground}" />
|
||||
<Style Selector="^:pointerover">
|
||||
<Setter Property="ListBoxItem.Background" Value="{DynamicResource ListBoxItemSelectedPointeroverBackground}" />
|
||||
<Setter Property="ListBoxItem.Background"
|
||||
Value="{DynamicResource ListBoxItemSelectedPointeroverBackground}" />
|
||||
</Style>
|
||||
</Style>
|
||||
</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