Есть ли в WPF стандартный прогрессивный раскрывающий вращающийся треугольник? - PullRequest
Новая
       4

Есть ли в WPF стандартный прогрессивный раскрывающий вращающийся треугольник?

0 голосов
/ 13 января 2020

У меня есть кнопка в моем C#. NET приложении WPF, которое раскрывает больше содержимого на экране при нажатии. Я хотел бы использовать стандартный вращающийся треугольник с прогрессивным раскрытием:

progressive disclosure rotating triangle

Я собираюсь сделать это, сделав Кнопка с изображением, которое изменяется при нажатии на нее. Все, что мне нужно сделать, это нарисовать два треугольника. Однако, поскольку это стандартная задача пользовательского интерфейса, меня интересует, предоставила ли Microsoft, если не весь элемент управления, хотя бы изображения кнопок. Я мог бы просто продолжить и повернуть свою собственную кнопку, но:

  1. Я просто заново изобретаю колесо - вероятно, хуже, чем Microsoft уже сделала.
  2. Мой изображения, скорее всего, не будут выглядеть точно так же, как изображения Microsoft (из-за масштабирования или позиционирования, или скорости вращения и т. д. c.) ? Если нет, образы кнопок уже установлены с ОС, где я могу их использовать?

1 Ответ

1 голос
/ 14 января 2020

Я не знаю ни одного официального ресурса, который вы можете использовать, хотя я согласен, что, вероятно, он должен быть. Тем не менее, лучшее, что я могу сделать, это показать вам, как Microsoft делает их так, чтобы вы могли делать то же самое.

Как указал XAMlMAX, стандартный элемент управления TreeViewItem использует эти треугольники. Я использовал Visual Studio, чтобы получить шаблон для указанного элемента управления. Вот соответствующие части: 

        <PathGeometry x:Key="TreeArrow" Figures="M0,0 L0,6 L6,0 z"/>
        <SolidColorBrush x:Key="TreeViewItem.TreeArrow.Static.Checked.Fill" Color="#FF595959"/>
        <SolidColorBrush x:Key="TreeViewItem.TreeArrow.Static.Checked.Stroke" Color="#FF262626"/>
        <SolidColorBrush x:Key="TreeViewItem.TreeArrow.MouseOver.Stroke" Color="#FF27C7F7"/>
        <SolidColorBrush x:Key="TreeViewItem.TreeArrow.MouseOver.Fill" Color="#FFCCEEFB"/>
        <SolidColorBrush x:Key="TreeViewItem.TreeArrow.MouseOver.Checked.Stroke" Color="#FF1CC4F7"/>
        <SolidColorBrush x:Key="TreeViewItem.TreeArrow.MouseOver.Checked.Fill" Color="#FF82DFFB"/>
        <SolidColorBrush x:Key="TreeViewItem.TreeArrow.Static.Fill" Color="#FFFFFFFF"/>
        <SolidColorBrush x:Key="TreeViewItem.TreeArrow.Static.Stroke" Color="#FF818181"/>
        <Style x:Key="ExpandCollapseToggleStyle" TargetType="{x:Type ToggleButton}">
            <Setter Property="Focusable" Value="False"/>
            <Setter Property="Width" Value="16"/>
            <Setter Property="Height" Value="16"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Border Background="Transparent" Height="16" Padding="5,5,5,5" Width="16">
                            <Path x:Name="ExpandPath" Data="{StaticResource TreeArrow}" Fill="{StaticResource TreeViewItem.TreeArrow.Static.Fill}" Stroke="{StaticResource TreeViewItem.TreeArrow.Static.Stroke}">
                                <Path.RenderTransform>
                                    <RotateTransform Angle="135" CenterY="3" CenterX="3"/>
                                </Path.RenderTransform>
                            </Path>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="RenderTransform" TargetName="ExpandPath">
                                    <Setter.Value>
                                        <RotateTransform Angle="180" CenterY="3" CenterX="3"/>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="Fill" TargetName="ExpandPath" Value="{StaticResource TreeViewItem.TreeArrow.Static.Checked.Fill}"/>
                                <Setter Property="Stroke" TargetName="ExpandPath" Value="{StaticResource TreeViewItem.TreeArrow.Static.Checked.Stroke}"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Stroke" TargetName="ExpandPath" Value="{StaticResource TreeViewItem.TreeArrow.MouseOver.Stroke}"/>
                                <Setter Property="Fill" TargetName="ExpandPath" Value="{StaticResource TreeViewItem.TreeArrow.MouseOver.Fill}"/>
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="True"/>
                                    <Condition Property="IsChecked" Value="True"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Stroke" TargetName="ExpandPath" Value="{StaticResource TreeViewItem.TreeArrow.MouseOver.Checked.Stroke}"/>
                                <Setter Property="Fill" TargetName="ExpandPath" Value="{StaticResource TreeViewItem.TreeArrow.MouseOver.Checked.Fill}"/>
                            </MultiTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

В верхней части находится "TreeArrow" PathGrometry, которая используется для создания треугольника. Ниже приведены SolidColorBrush, которые предоставляют цвета для различных состояний. И ниже это стиль для ToggleButton, который использует ранее упомянутые ресурсы, правильно устанавливая цвет и поворот треугольника в зависимости от состояния указанного ToggleButton.

. Вы должны быть в состоянии использовать это для создать механизм прогрессивного раскрытия, соответствующий принципам Microsoft.

...