Button
按钮是一个对指针动作做出反应的控件(并且有一些键盘等效物)。当指针向下时,它以按下状态的形式呈现视觉反馈。
指向指针释放序列的指针被解释为点击;并且这种行为是可配置的。
在确定用户是否按下按钮时,始终使用Click事件而不是PointerPressed。单击是特定于按钮的高级事件,表示按钮已被按下。
PointerPressed更像是一个低级输入事件:按钮需要在内部处理以引发Click事件。由于Button处理PointerPressed(将IsHandled设置为true),应用程序将永远不会像其他一些控件那样收到此事件。
按钮可以在代码后面引发点击事件。或者,您可以将ICommand的实例绑定到command属性。然后,每当单击按钮时,就会执行绑定命令。
属性
属性 | 解释 |
---|---|
ClickMode | 描述按钮对点击的反应。 |
Command | 单击按钮时调用的ICommand实例。 |
xaml代码 |
<StackPanel Margin="20">
<Button Click="ClickHandler">Press Me!</Button>
<TextBlock Margin="0 10" x:Name="message">Ready...</TextBlock>
</StackPanel>
C#代码
using Avalonia.Controls;
using Avalonia.Interactivity;
namespace AvaloniaButton;
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void ClickHandler(object? sender, RoutedEventArgs e)
{
message.Text = "Button clicked!";
}
}
Repeat Button
RepeatButton是一个控件,它具有在按下按钮时定期生成点击事件的附加功能。
属性
属性 | 解释 |
---|---|
Delay | 重复单击生成开始前等待的时间(毫秒)。默认值为300。 |
Interval | 生成单击之间的时间(毫秒)。默认值为100。 |
此示例显示了一个重复按钮,该按钮以默认间隔和延迟生成点击事件。
<Grid Margin="20" RowDefinitions="50,*">
<RepeatButton Grid.Row="0" Click="ClickHandler">Press and hold down</RepeatButton>
<ScrollViewer Grid.Row="1">
<TextBlock Margin="0 10" x:Name="message">Ready...</TextBlock>
</ScrollViewer>
</Grid>
C#
private void ClickHandler(object? sender, RoutedEventArgs e)
{
message.Text += "\rButton clicked!";
}
Radio Button
单选按钮控件显示一组选项,一次只能从中选择一个。选定的选项将绘制为实心圆,未选定的选项绘制为空心圆。
单选按钮控件的内容显示为圆圈旁边的标签。
可以不选择组中的任何选项,但是一旦选择了一个选项,用户就无法停止单选按钮交互。
属性
属性 | 解释 |
---|---|
GroupName | 定义一组将作为单选按钮交互的选项的通用名称。 |
IsChecked | 单选按钮选项是选中(true)还是未选中(false)。 |
IsEnabled | 是否启用单选按钮选项。禁用选项显示为褪色。 |
代码
<StackPanel Margin="20">
<TextBlock Margin="0 10 0 5">First Group</TextBlock>
<RadioButton GroupName="First Group"
Content="First Option"/>
<RadioButton GroupName="First Group"
Content="Second Option"/>
<RadioButton IsEnabled="False"
GroupName="First Group"
Content="Third Option"/>
<TextBlock Margin="0 10 0 5">Second Group</TextBlock>
<RadioButton GroupName="Second Group"
Content="Fourth Option"/>
<RadioButton GroupName="Second Group"
Content="Fifth Option"/>
</StackPanel>
Toggle Button
ToggleButton可以通过使用样式和存在(true)或不存在(false)的伪类来呈现布尔值。
这允许在每个伪类状态下对控件进行各种可能的图形表示。
此示例显示了一个包含扬声器图标或静音扬声器图标的切换按钮,具体取决于该按钮是否具有选中的伪类。
<Window 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"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="AvaloniaButton.MainWindow"
Title="AvaloniaButton">
<Window.Styles>
<!--未选中,音量图标隐藏-->
<Style Selector="ToggleButton PathIcon.audio-on">
<Setter Property="IsVisible" Value="False"/>
</Style>
<!--选中,音量图标显示-->
<Style Selector="ToggleButton:checked PathIcon.audio-on">
<Setter Property="IsVisible" Value="True"/>
</Style>
<!--未选中,静音图标显示-->
<Style Selector="ToggleButton PathIcon.audio-mute">
<Setter Property="IsVisible" Value="True"/>
</Style>
<!--选中,静音图标隐藏-->
<Style Selector="ToggleButton:checked PathIcon.audio-mute">
<Setter Property="IsVisible" Value="False"/>
</Style>
<Style>
<Style.Resources>
<StreamGeometry x:Key="speaker_off_regular">M28 29.7678L41.8661 43.6339C42.3543 44.122 43.1457 44.122 43.6339 43.6339C44.122 43.1457 44.122 42.3543 43.6339 41.8661L6.13388 4.36612C5.64573 3.87796 4.85427 3.87796 4.36611 4.36612C3.87796 4.85427 3.87796 5.64573 4.36611 6.13388L13.2322 15H9C6.10051 15 3.75 17.3505 3.75 20.25V27.75C3.75 30.6495 6.10051 33 9 33H13.702C14.8734 33 16.0034 33.4328 16.875 34.2153L25.081 41.5815C26.2077 42.5929 28 41.7933 28 40.2793V29.7678ZM25.5 27.2678V38.5981L18.5451 32.3549C17.2146 31.1606 15.4898 30.5 13.702 30.5H9C7.48122 30.5 6.25 29.2688 6.25 27.75V20.25C6.25 18.7312 7.48122 17.5 9 17.5H13.702C14.3147 17.5 14.92 17.4224 15.5046 17.2723L25.5 27.2678Z M19.8115 14.5082L18.0412 12.7379L25.081 6.41847C26.2076 5.40709 28 6.20669 28 7.72074V22.6967L25.5 20.1967V9.40185L19.8115 14.5082Z M36.1857 30.8824L34.335 29.0317C34.966 27.7376 35.5 26.0404 35.5 24C35.5 21.5224 34.7127 19.5507 33.9203 18.1923C33.5242 17.5133 33.1298 16.9931 32.8397 16.6477C32.695 16.4754 32.577 16.3476 32.499 16.2664C32.46 16.2259 32.4311 16.197 32.414 16.1802L32.3972 16.164L32.398 16.1646C31.8935 15.6947 31.8647 14.9048 32.334 14.3994C32.8038 13.8935 33.5947 13.8642 34.1006 14.334L33.25 15.25C34.1006 14.334 34.1014 14.3347 34.1014 14.3347L34.1022 14.3356L34.1042 14.3374L34.1092 14.3421L34.1228 14.355C34.1336 14.3653 34.1476 14.3788 34.1646 14.3955C34.1987 14.4289 34.245 14.4753 34.3018 14.5343C34.4152 14.6524 34.5707 14.8215 34.754 15.0398C35.1202 15.4757 35.6008 16.1117 36.0797 16.9327C37.0373 18.5743 38 20.9776 38 24C38 26.9108 37.1071 29.2474 36.1857 30.8824Z M41.0185 35.7152L39.1733 33.87C40.3712 31.5479 41.5 28.2383 41.5 24C41.5 19.4474 40.1976 15.9662 38.906 13.6297C38.2594 12.46 37.6157 11.5776 37.1403 10.9943C36.9028 10.7028 36.708 10.4867 36.5767 10.3474C36.511 10.2777 36.4614 10.2274 36.4303 10.1965C36.4148 10.181 36.4039 10.1704 36.398 10.1648L36.3949 10.1617L36.393 10.16C35.8916 9.68785 35.8665 8.89867 36.3376 8.39562C36.8094 7.89169 37.6004 7.8657 38.1044 8.33755L37.2501 9.24987C38.1044 8.33755 38.1053 8.33839 38.1053 8.33839L38.1063 8.33935L38.1087 8.34162L38.115 8.34761L38.1336 8.36536C38.1485 8.37975 38.1685 8.39926 38.1932 8.42388C38.2427 8.4731 38.3112 8.54276 38.396 8.6327C38.5655 8.81253 38.8003 9.07375 39.0784 9.41509C39.6343 10.0974 40.3656 11.1025 41.094 12.4203C42.5524 15.0587 44 18.9526 44 24C44 29.0474 42.5524 32.9412 41.094 35.5797L41.0739 35.6159L41.0185 35.7152Z</StreamGeometry>
<StreamGeometry x:Key="speaker_regular">M25.081 6.41848C26.2076 5.4071 28 6.2067 28 7.72074V40.2793C28 41.7933 26.2077 42.5929 25.081 41.5815L16.875 34.2153C16.0034 33.4328 14.8734 33 13.702 33H9C6.10051 33 3.75 30.6495 3.75 27.75V20.25C3.75 17.3505 6.10051 15 9 15H13.702C14.8734 15 16.0034 14.5672 16.875 13.7847L25.081 6.41848ZM25.5 9.40186L18.5451 15.6451C17.2146 16.8394 15.4898 17.5 13.702 17.5H9C7.48122 17.5 6.25 18.7312 6.25 20.25V27.75C6.25 29.2688 7.48122 30.5 9 30.5H13.702C15.4898 30.5 17.2146 31.1606 18.5451 32.3549L25.5 38.5982V9.40186Z M36.3376 8.39563C36.8095 7.8917 37.6005 7.86571 38.1044 8.33757L38.1053 8.3384C38.1053 8.3384 37.7675 8 38.1151 8.34762L38.1336 8.36537C38.1485 8.37976 38.1685 8.39927 38.1933 8.42389C38.2428 8.47311 38.3113 8.54277 38.396 8.63271C38.5655 8.81254 38.8004 9.07377 39.0785 9.4151C39.6344 10.0974 40.3656 11.1025 41.094 12.4203C42.5525 15.0588 44.0001 18.9526 44.0001 24C44.0001 29.0474 42.5525 32.9413 41.094 35.5797C40.3656 36.8975 39.6344 37.9027 39.0785 38.5849C38.8004 38.9262 38.5655 39.1875 38.396 39.3673C38.3714 39.3935 38.3481 39.4179 38.3262 39.4407C38.273 39.4961 38.2284 39.5412 38.1933 39.5761C38.1685 39.6007 38.1485 39.6202 38.1336 39.6346L38.1151 39.6524L38.1088 39.6584L38.1063 39.6607L38.1053 39.6616C38.1053 39.6616 38.2392 39.5277 38.3262 39.4407C38.4326 39.3343 38.4688 39.298 38.1044 39.6624C37.6005 40.1343 36.8095 40.1083 36.3376 39.6044C35.8666 39.1013 35.8917 38.3122 36.3931 37.84L36.3949 37.8383L36.3981 37.8352C36.404 37.8296 36.4148 37.819 36.4304 37.8035C36.4614 37.7726 36.5111 37.7223 36.5767 37.6526C36.708 37.5133 36.9029 37.2972 37.1404 37.0057C37.6157 36.4224 38.2595 35.54 38.9061 34.3703C40.1976 32.0338 41.5001 28.5526 41.5001 24C41.5001 19.4474 40.1976 15.9663 38.9061 13.6297C38.2595 12.46 37.6157 11.5776 37.1404 10.9943C36.9029 10.7028 36.708 10.4867 36.5767 10.3474C36.5111 10.2777 36.4614 10.2274 36.4304 10.1965C36.4148 10.181 36.404 10.1705 36.3981 10.1648L36.3949 10.1617L36.3931 10.16C35.8917 9.68786 35.8666 8.89869 36.3376 8.39563Z M32.3341 14.3994C32.8038 13.8936 33.5947 13.8643 34.1006 14.334C34.1008 14.3342 34.1014 14.3348 34.1014 14.3348L34.1023 14.3356L34.1043 14.3374L34.1092 14.3421L34.1229 14.355C34.1336 14.3653 34.1477 14.3788 34.1647 14.3955C34.1988 14.429 34.2451 14.4753 34.3018 14.5344C34.4152 14.6524 34.5707 14.8215 34.7541 15.0398C35.1202 15.4757 35.6009 16.1117 36.0798 16.9327C37.0374 18.5743 38.0001 20.9776 38.0001 24C38.0001 27.0224 37.0374 29.4257 36.0798 31.0673C35.6009 31.8883 35.1202 32.5243 34.7541 32.9602C34.5707 33.1785 34.4152 33.3476 34.3018 33.4656C34.2451 33.5247 34.1988 33.5711 34.1647 33.6045L34.1452 33.6235L34.1229 33.645L34.1092 33.6579L34.1043 33.6626L34.1015 33.6652L34.1006 33.666C33.5947 34.1357 32.8038 34.1065 32.3341 33.6006C31.8653 33.0958 31.8935 32.3072 32.3962 31.8371L32.3979 31.8355L32.414 31.8198C32.4312 31.803 32.4601 31.7741 32.4991 31.7336C32.5771 31.6524 32.695 31.5246 32.8398 31.3523C33.1299 31.0069 33.5242 30.4867 33.9203 29.8077C34.7127 28.4493 35.5001 26.4776 35.5001 24C35.5001 21.5224 34.7127 19.5507 33.9203 18.1923C33.5242 17.5133 33.1299 16.9931 32.8398 16.6477C32.695 16.4754 32.5771 16.3476 32.4991 16.2664C32.4601 16.2259 32.4312 16.197 32.414 16.1802L32.3973 16.164L32.3981 16.1647C31.8929 15.6949 31.8645 14.9051 32.3341 14.3994Z</StreamGeometry>
</Style.Resources>
</Style>
</Window.Styles>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Margin="0 5">Audio</TextBlock>
<ToggleButton IsChecked="True">
<Panel>
<PathIcon Classes="audio-on"
Data="{StaticResource speaker_regular}" />
<PathIcon Classes="audio-mute"
Data="{StaticResource speaker_off_regular}" />
</Panel>
</ToggleButton>
</StackPanel>
</Window>
切换按钮的内容区域包含两个路径图标元素,一次只能看到其中一个。路径图标从资源文件中获取图形,该文件作为App.xaml文件中包含的样式集引用。图标几何形状来自Avalonia UI Fluent图标资源。
路径图标的可见性由窗口样式设置,这些样式使用:checked伪类来确定切换按钮何时处于选中状态。因此,当选中切换按钮时,音频开启路径图标可见,音频静音路径图标隐藏。相反,当未选中切换按钮时,音频静音路径图标可见,音频开启路径图标隐藏。
Button Spinner
ButtonSpinner提供了一个控件,其中包括向上和向下旋转的按钮。此按钮的内容很灵活,但您必须编写相当多的行为代码。
属性
属性 | 解释 |
---|---|
ButtonSpinnerLocation | 旋转按钮的位置:左侧或右侧。 |
ValidSpinDirection | 用于限制自旋方向:增加( increase)、减少(decrease)或无(none)。 |
<ButtonSpinner Height="20" Width="130" ButtonSpinnerLocation="Left">
123
</ButtonSpinner>
SplitButton
SplitButton的功能相当于一个带有主要和次要部分的按钮,每个部分都可以单独按下。主要部分的行为类似于普通按钮,次要部分通过其他操作打开弹出窗口。
SplitButton应该只由类似的操作组成。从根本上说,这种控制用于将共同的行为组合在一起,其中一个行为具有明显的优先级。最常见的操作应该是默认操作和SplitButton主要部分显示的操作。按下次要(下拉)部分时显示的弹出按钮中应添加不太常见的操作。
当按下弹出按钮中的主要部分或次要操作时,应立即调用用户选择操作。所有紧迫的行动,无论是主要的还是次要的,都是即时的。
属性
属性 | 解释 |
---|---|
Content | 在主要部分显示的内容 |
Flyout | 单击次要部分时显示的弹出窗口 |
Command | 单击主按钮时调用的命令 |
Pseudoclasses(伪类)
属性 | 解释 |
---|---|
:pressed | 使用空格或Enter等键盘输入按下整个SplitButton时设置。在这种状态下,主要部件和次要部件之间没有区别 |
:flyout-open | 当弹出窗口打开时设置 |
<SplitButton Content="Content" >
<SplitButton.Flyout>
<MenuFlyout Placement="Bottom">
<MenuItem Header="Item 1">
<MenuItem Header="Subitem 1" />
<MenuItem Header="Subitem 2" />
<MenuItem Header="Subitem 3" />
</MenuItem>
<MenuItem Header="Item 2"
InputGesture="Ctrl+A" />
<MenuItem Header="Item 3" />
</MenuFlyout>
</SplitButton.Flyout>
</SplitButton>
SplitButton的一个常见用例是在编辑器中为文本着色。按下SplitButton的主要部分将当前颜色应用于所选文本。按下次要部分将打开弹出窗口,并允许指定和应用另一种颜色。再次注意,当在弹出菜单中指定另一种颜色时,所选文本颜色将立即更改,当前颜色也将更新。
<!-- 我们定义了以下数据模板 -->
<DataTemplate DataType="Color">
<Border CornerRadius="4" Width="20" Height="20" BorderBrush="Gray" BorderThickness="1">
<Border.Background>
<SolidColorBrush Color="{Binding}" />
</Border.Background>
</Border>
</DataTemplate>
<!-- SelectedColor、ChangeColorCommand和AvailableColors是ViewModel的属性 -->
<SplitButton Content="{Binding SelectedColor}"
Command="{Binding ChangeColorCommand}">
<SplitButton.Flyout>
<Flyout Placement="Bottom">
<ListBox ItemsSource="{Binding AvailableColors}"
SelectedItem="{Binding SelectedColor}"
Height="200" Width="200">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Flyout>
</SplitButton.Flyout>
</SplitButton>
SplitButton的另一个常见示例可能是导出按钮。按下主要部分后,将使用默认设置导出数据。但是,如果按下次要部分,可以指定其他导出选项,如“导出为PNG”、“导出为JPG”等。
<SplitButton Content="Export to PDF">
<SplitButton.Flyout>
<MenuFlyout Placement="RightEdgeAlignedTop">
<MenuItem Header="Export to PNG"/>
<MenuItem Header="Export to JPG" />
</MenuFlyout>
</SplitButton.Flyout>
</SplitButton>
ToggleSplitButton
ToggleSplitButton的功能相当于一个具有主要和次要部分的ToggleButton,每个部分都可以单独按下。主要部分的行为类似于普通的切换按钮,次要部分通过其他操作打开弹出窗口。
ToggleSplitButton 仅有两种状态:已选中和未选中。不像标准的 ToggleButton 那样支持不确定状态。这样做是有意与 WinUI 匹配,并限制了控件的使用。ToggleSplitButton 应该仅用于打开/关闭功能。从可用性的角度来看,除此之外的任何用途目前都被认为是不良实践。
ToggleSplitButton 是一个相当专业的控件,其使用应限制在从用户角度来看清晰合理的地方。它旨在打开/关闭某个功能,同时允许指定一些附加配置而非默认配置。
与 SplitButton 类似,最常见的操作应是默认操作,并显示在主要部分。然而,与 SplitButton 不同的是,按下主要部分将打开或关闭此功能,而不是简单地调用操作。该功能的其他配置应添加到 Flyout 中,当按下次要(下拉)部分时会显示该 Flyout。
在弹出菜单中按下某个配置,应该要么(1)使用所选配置启用该功能,要么(2)将该功能更改为所选配置。在弹出菜单中按下某个配置绝不应关闭该功能——这只能通过切换主要部分来完成。
属性
属性 | 解释 |
---|---|
Content | 在主要部分显示的内容 |
Flyout | 单击次要部分时显示的弹出窗口 |
Command | 单击主按钮时调用的命令 |
IsChecked | 获取或设置 ToggleSplitButton 是否被选中 |
Pseudoclasses(伪类)
属性 | 解释 |
---|---|
:pressed | 使用空格或Enter等键盘输入按下整个SplitButton时设置。在这种状态下,主要部件和次要部件之间没有区别 |
:flyout-open | 当弹出窗口打开时设置 |
:checked | 当 ToggleSplitButton 被选中时设置。(IsChecked=true) |
基本样式
<ToggleSplitButton Content="Content"
IsChecked="{Binding IsChecked}">
<ToggleSplitButton.Flyout>
<MenuFlyout Placement="Bottom">
<MenuItem Header="Item 1">
<MenuItem Header="Subitem 1" />
<MenuItem Header="Subitem 2" />
<MenuItem Header="Subitem 3" />
</MenuItem>
<MenuItem Header="Item 2"
InputGesture="Ctrl+A" />
<MenuItem Header="Item 3" />
</MenuFlyout>
</ToggleSplitButton.Flyout>
</ToggleSplitButton>
未被选中
选中,子面板关闭
选中,子面板打开
带有编号或项目符号列表示例的文本编辑器
<Window.Resources>
<PathGeometry x:Key="IconData.NumberedList">
M272.108803 45.477794m56.847243 0l795.861403 0q56.847243 0 56.847243 56.847243l0 0q0 56.847243-56.847243 56.847243l-795.861403 0q-56.847243 0-56.847243-56.847243l0 0q0-56.847243 56.847243-56.847243Z M132.643567 202.376185H67.458728V69.732618a106.872817 106.872817 0 0 1-28.802603 9.095559l-20.465007 5.305743V28.802603H30.31853A110.662633 110.662633 0 0 0 56.847243 19.707044a75.796324 75.796324 0 0 0 22.738897-15.159265l4.54778-3.789816h48.509647z M272.108803 435.828863m56.847243 0l795.861403 0q56.847243 0 56.847243 56.847243l0 0q0 56.847243-56.847243 56.847243l-795.861403 0q-56.847243 0-56.847243-56.847243l0 0q0-56.847243 56.847243-56.847243Z M148.560795 595.001144H1.515926v-13.643339a82.617993 82.617993 0 0 1 21.222971-54.573353 241.03231 241.03231 0 0 1 41.687978-34.108346 211.471744 211.471744 0 0 0 23.496861-18.191118 31.834456 31.834456 0 0 0 8.337596-19.707044 16.675191 16.675191 0 0 0 0-12.885375 31.076493 31.076493 0 0 0-15.917229-3.789816c-9.095559 0-12.885375 0-14.401301 6.063706a35.624272 35.624272 0 0 0-6.821669 24.254823v12.127412H6.821669v-12.885375a81.86003 81.86003 0 0 1 20.465008-56.08928 67.458728 67.458728 0 0 1 54.573353-22.738897 71.248545 71.248545 0 0 1 50.025574 18.191118 62.910949 62.910949 0 0 1 20.465007 47.751684 75.796324 75.796324 0 0 1-20.465007 50.025574 189.49081 189.49081 0 0 1-38.656125 30.31853 100.051148 100.051148 0 0 0-12.127412 9.095559h75.796324v50.025573z M272.108803 826.179932m56.847243 0l795.861403 0q56.847243 0 56.847243 56.847243l0 0q0 56.847243-56.847243 56.847243l-795.861403 0q-56.847243 0-56.847243-56.847243l0 0q0-56.847243 56.847243-56.847243Z M139.465236 884.543101l-7.579632-6.821669a57.605206 57.605206 0 0 0-4.54778-82.617993 75.796324 75.796324 0 0 0-47.751684-13.643338 71.248545 71.248545 0 0 0-50.025574 16.675191 68.974655 68.974655 0 0 0-23.49686 48.509647v13.643339h48.509647v42.445941h25.012787a28.04464 28.04464 0 0 1 18.191118 4.54778s4.547779 6.063706 4.547779 12.885375a18.191118 18.191118 0 0 1-5.305742 12.885375 26.528713 26.528713 0 0 1-18.949081 6.821669 25.012787 25.012787 0 0 1-16.675192-6.063706 20.465007 20.465007 0 0 1-7.579632-18.191118v-12.127412H3.031853v12.885375a69.732618 69.732618 0 0 0 75.796324 69.732619 81.86003 81.86003 0 0 0 55.331317-18.949081 63.668912 63.668912 0 0 0 20.465007-48.509648 50.025574 50.025574 0 0 0-15.159265-34.108346z m-46.993721-31.076492a31.834456 31.834456 0 0 1-16.675191 3.789816H53.81539v-8.337596a21.222971 21.222971 0 0 1 6.063706-16.675191 31.834456 31.834456 0 0 1 32.592419 0 15.917228 15.917228 0 0 1 0 11.369448 17.433155 17.433155 0 0 1 0 9.853523z
</PathGeometry>
<PathGeometry x:Key="IconData.BulletedList">
M419.037 287.953h413.124c17.673 0 32-14.327 32-32s-14.327-32-32-32H419.037c-17.673 0-32 14.327-32 32s14.327 32 32 32zM419.028 543.17h411.608c17.673 0 32-14.327 32-32s-14.327-32-32-32H419.028c-17.673 0-32 14.327-32 32s14.327 32 32 32zM832.161 735.802H419.037c-17.673 0-32 14.327-32 32s14.327 32 32 32h413.124c17.673 0 32-14.327 32-32s-14.327-32-32-32z M256.037 255.953m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z M256.037 510.787m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z M256.037 767.621m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z
</PathGeometry>
</Window.Resources>
<ToggleSplitButton>
<ToggleSplitButton.Content>
<!-- Note: 对于这个例子,我们保持内容静态,但您可以使用动态内容 -->
<PathIcon Data="{DynamicResource IconData.BulletedList}" />
</ToggleSplitButton.Content>
<ToggleSplitButton.Flyout>
<Flyout Placement="Bottom">
<!-- Note: 对于这个例子,我们保持内容静态,但您可以使用动态内容 -->
<ListBox Height="200" Width="200" >
<ListBoxItem>
<StackPanel Orientation="Horizontal">
<PathIcon Data="{DynamicResource IconData.NumberedList}" />
<TextBlock Text="Numbered List" />
</StackPanel>
</ListBoxItem>
<ListBoxItem>
<StackPanel Orientation="Horizontal">
<PathIcon Data="{DynamicResource IconData.BulletedList}" />
<TextBlock Text="Bulleted List" />
</StackPanel>
</ListBoxItem>
</ListBox>
</Flyout>
</ToggleSplitButton.Flyout>
</ToggleSplitButton>
参考
svg转path Geometry