avalonia学习之按钮

news2024/11/29 14:51:49

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2059913.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

linux PXE批量网络装机及Kickstart无人值守安装

目录 一、PXE基本概述 1.1 什么是PXE 1.2 PXE批量部署的优点 1.3 PXE部署的前置条件 二、部署PXE远程安装服务器 2.1 安装并启动TFTP服务 2.2 安装并启动DHCP服务 2.3 准备linux内核、初始化镜像文件 2.4 准备PXE引导程序 2.5 安装FTP服务&#xff0c;准备CentOS 7 安…

Cornerstone渲染CT+PET融合影像及相关应用场景

⛳️ 引言 在我们日常开发中&#xff0c;可能需要在一个 Viewport 中显示多个 Volume&#xff0c;即既要显示一个 CT 片也要显示一个 PET 片&#xff0c;同时可能还要能够调整融合效果中某个 Volume 的透明度、优先显示某个 Volume 、既能修改 CT 的窗宽窗距又要能够修改 PET …

SAP STMS 每次传输的时候 目标客户断都要输入以下 做个增强 直接带出当前的

在对应200屏幕的 事件中 加入如下 FIELD-SYMBOLS <FS> TYPE any.assign ((SAPLTMSU)WTMSU-CLIENT) to <FS>.if <FS> is ASSIGNED.<FS> sy-mandt.endif. 每次stms 传输的时候默认你登录的client 写于20240821 台州 又偷懒了

【NI国产替代】PXIe‑4330国产替代24位,8通道PXI应变/桥输入模块

25 kS/s&#xff0c;24位&#xff0c;8通道PXI应变/桥输入模块 PXIe‑4330是一款同步输入模块&#xff0c;为基于桥接的传感器提供集成数据采集和信号调理。 PXIe‑4330具有更高的准确性、高数据吞吐量和同步特性&#xff0c;使其成为高密度测量系统的理想选择。\n\n为了消除噪…

如何用一种SQL注入姿势在src斩获30w+赏金?

参考:如何用一种SQL注入姿势在src斩获30w赏金&#xff1f; 前言 团队师傅在国内外SRC的clickhouse的sql注入挖掘中&#xff0c;累计金额已超30w&#xff0c;秉持一个技术forfree的思想&#xff0c;还是抽时间整理了一些技术点&#xff0c;希望能够对各位师傅带来一些帮助。 …

[ETL趋势」DB表输出支持事务、循环容器次数无限制、实时数据同步目的地StarRocks和Doris支持DDL等

FineDataLink作为一款市场上的顶尖ETL工具&#xff0c;集实时数据同步、ELT/ETL数据处理、数据服务和系统管理于一体的数据集成工具&#xff0c;进行了新的维护迭代。本文把FDL4.1.10最新功能作了介绍&#xff0c;方便大家对比&#xff1a;&#xff08;产品更新详情&#xff1a…

Elasticsearch核心

一、几个核心概念 1、节点&#xff1a;一个节点&#xff08;Node&#xff09;就是一个es进程&#xff0c;一个服务器可以部署多个节点 查询节点以及节点信息&#xff1a; http://127.0.0.1:9200/_cat/nodes?v 2、角色&#xff0c;是指节点在集群中担任什么角色&#xff1a…

安全设计最容易忽略的5大要点?(附注意事项)

在详细设计阶段&#xff0c;忽略安全设计要点会埋下安全隐患&#xff0c;增加项目遭受攻击的风险。而重视并妥善处理这些要点&#xff0c;如严格权限管理、数据加密、输入验证等&#xff0c;能够显著提升系统的防御能力&#xff0c;保护用户数据免受泄露或篡改&#xff0c;这对…

webpark 如何将本地访问地址http://localshot:3000修改为自己需要的访问地址https://www.example.com:3000

后端限制了只能【https://*.example.com】能访问&#xff0c;前端启动本地服务是【http://localhost:3000】【http://127.0.0.1:3000】,访问不到后端接口。 需要在启动浏览器访问的时候&#xff0c;单独配置地址栏访问参数。 项目使用的是webpark加载浏览器。 中文文档&#…

怎么自动备份电脑中的文件?电脑上的数据怎么才能实现自动实时备份?分享三个简单可靠的方法!

数据奇遇记——自动备份的魔法之旅&#xff01; 在数字的奇幻大陆里&#xff0c;你的文件是勇敢的小精灵&#xff0c;穿梭在无尽的字节森林中。而自动备份&#xff0c;就是那神奇的时光机&#xff0c;悄悄地为小精灵们铺设了回家的秘密通道。不论是Windows的魔法斗篷、安企神的…

小伙严重车祸左足几乎离断,衢州骨伤科医院急诊再植手术为他保命、保肢、保功能

32岁的陈先生被困在扭曲变形的车厢中。双下肢的剧烈疼痛和左踝的撕裂感让他几乎陷入昏迷。 这是一场发生在衢州的严重车祸&#xff0c;附近的居民都有所目睹。当时消防员迅速赶到现场&#xff0c;将陈先生从破碎的车内救出&#xff0c;并紧急送往当地县医院。县医院的医护人员…

React 学习——useCallback

传递函数&#xff0c;父组件重新渲染的时候&#xff0c;并不会让子组件跟着重新渲染&#xff1b; import { memo, useCallback, useState } from react;const Son memo(function Input({onChange}){console.log(子组件渲染);return (<div><div onClick{()>onCha…

Ubuntu技巧-Ubuntu远程访问之电信公网IP

&#x1f4a1; 大家好&#xff0c;我是可夫小子&#xff0c;《小白玩转ChatGPT》专栏作者&#xff0c;关注AIGC、互联网和自媒体。 前面文章介绍了家庭服务器接入外网的三种方式的第一种&#xff0c;今天介绍第二种&#xff0c;即通过获得电脑公网IP&#xff0c;然后再设置动态…

前端调用后端,出现跨域报错怎么办

我前端是vue&#xff0c;后端是其他同事写的python&#xff0c;因为部署在不同的机器上&#xff0c;我前端如果直接调用他的python&#xff0c;axios请求就会出现跨域报错&#xff0c;如下 blocked by CORS policy 云云 怎么办呢&#xff0c;网上探索了一下午&#xff0c;才找…

使用JDK17的record关键字编译报错踩坑

先看报错 jdk版本是17.应该是支持的啊。第一次使用record关键字就这样了吗。 解决 在设置里面把字节码版本改为17就行&#xff0c;因为以前是运行jdk8的所以会出现这个问题。 设置好了之后编译就通过了。 总结 一般出现编译错误&#xff0c;首先看一下Project Structure 再…

2025舜宇光学校招内推码!!!

舜宇光学集团校招 【2025内推码】 DSwNQ9yu DSJXN8Mr 舜宇光学科技2025校招内推&#xff01;冲冲冲&#xff01; 光学龙头-舜宇集团2025届全球校园招聘正式启动&#xff01;&#xff01;&#xff01; 提供住宿&#xff08;硕士单人间&#xff0c;独立卫浴&#xff01;&#x…

期权末日轮要在什么时候买?期权末日轮要买什么?

今天带你了解期权末日轮要在什么时候买&#xff1f;期权末日轮要买什么&#xff1f;对于刚接触50ETF期权的朋友&#xff0c;“期权末日轮”可能听起来有点神秘。其实&#xff0c;它指的是那些快要到期的期权合约&#xff0c;特别是在合约到期前10天开始&#xff0c;市场就进入了…

泰国社会发展和人类安全部部长秘书率考察团到访深兰科技

8月19日&#xff0c;泰国社会发展和人类安全部考察团到访深兰科技集团总部&#xff0c;深兰科技集团董事长陈海波会见并进行了关于AI技术和产业合作的会谈。 考察团随行人员还包括泰国社会发展和人类安全部部长顾问MR.SOMCHAI SENEETANTIKUL、MS.RACHANEEWAN AKHARAWIKRAI、中国…

并发?听我对你“锁”

本文主要讲讲&#xff0c;在Java中关于锁的一些知识点&#xff0c;并介绍一下对锁进行的一些优化 一、前言1.阻塞锁2.非阻塞锁 二、Syncnized和锁的底层原理三、锁优化1.自旋锁2.锁消除3.锁粗化4.轻量级锁5.偏向锁 四、锁升级过程五、其他锁和AQS 一、前言 本文主要讲解Java中…

【机器人学】7-2.六自由度机器人自干涉检测-计算圆柱体的上下圆心坐标【附MATLAB代码】

目录 前言 机械臂几何参数 机器等效圆柱体坐标确定 MATLAB代码 前言 上一章介绍了机器人自干涉检测的总体算法&#xff0c;提出了算法的三个核心&#xff1a; 一 根据机械臂的几何数据以及DH参数&#xff0c;确定机械臂等效的圆柱体的上下圆心坐标。 二 将一个圆柱体旋转到…