Nano Hash - криптовалюты, майнинг, программирование

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

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

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

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

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

Есть ли уже прогрессивное обесцвечивание, вращающееся управление треугольником? Если нет, то установлены ли уже изображения кнопок вместе с ОС, где я могу их использовать?

.net c# wpf wpf-controls
13.01.2020

  • Используйте Path вместо изображений, они будут хорошо масштабироваться, когда ваше приложение используется на мониторе 4k. Образы такие 90-е. У вас есть TreeViewItem, используйте смесь, чтобы получить шаблон для треугольника и визуальные состояния, а затем просто примените их к стилю вашей кнопки. 13.01.2020
  • Похоже на кнопку на TreeView? 13.01.2020
  • Что-то вроде Expander? 13.01.2020
  • Да, я бы хотел что-то похожее на кнопку в TreeView. В основном я создаю DataGrid, который может расширять дочерние строки. 13.01.2020
  • Тогда это будет... как это называется... PropertyGrid? Что-то такое? Нет, это была WinForms... 13.01.2020
  • Концепция та же, что и у расширителя, но я показываю больше дочерних строк в DataGrid, когда пользователь нажимает кнопку, поэтому это не совсем соответствует концепции расширителя «Заголовок + контент». 13.01.2020
  • @XAMlMAX, я думаю, что то, что вы описываете, это то, что мне нужно сделать, но я понятия не имею, как выполнить те шаги, которые вы упомянули (я никогда не использовал Blend, визуальные состояния и т. д.). Если это кратко Достаточно сценария, чтобы вы могли перечислить шаги, не могли бы вы сделать это в ответе? 13.01.2020
  • Если это так, то вместо этого используйте ListView, тогда вы можете использовать группировку элементов с помощью CollectionViewSource. ListView поддерживает GridView, поэтому вы можете иметь все необходимые столбцы, а также расширитель, который даст вам строки. Это действительно легко. Вот мой пост SO 13.01.2020

Ответы:


1

Я не знаю ни одного официального ресурса, который вы можете использовать, хотя я согласен, что он, вероятно, должен быть. Тем не менее, лучшее, что я могу сделать, это показать вам, как 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, который используется для создания треугольника. Ниже находятся SolidColorBrushes, которые обеспечивают цвета для различных состояний. А ниже стиль для ToggleButton, который использует ранее упомянутые ресурсы, правильно устанавливая цвет и поворот треугольника в зависимости от состояния указанного ToggleButton.

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

13.01.2020
  • Спасибо. Я попробовал это, и это сработало. Я использовал ToggleButton, а затем привязал IsChecked к свойству в моей ViewModel. Изменения в этом свойстве вызывают добавление или вычитание строк из моего GridView. 14.01.2020
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..