WPF TreeView: как стилизовать выбранные элементы с закругленными углами, как в Explorer
Выбранный элемент в WPF TreeView имеет темно-синий фон с «острыми» углами. Сегодня это выглядит немного устаревшим:
Я хотел бы изменить фон, чтобы он выглядел как в проводнике Windows 7 (с / без фокуса):
- Почему я не могу создать стиль DataGridTextColumn?
- Изменение фонового рисунка виджета searchview
- Как установить стиль WPF Window Style в app.xaml?
- Как настроить таргетинг на все элементы управления (стили WPF)
- Стили сплава XAML
То, что я пробовал до сих пор, не снимает оригинальный темно-синий фон, а рисует закругленную границу сверху, чтобы вы увидели темно-синий цвет по краям и с левой стороны – уродливый.
Интересно, что когда моя версия не имеет фокуса, она выглядит довольно хорошо:
Я хотел бы воздержаться от пересмотра шаблона управления, как показано здесь или здесь . Я хочу установить минимальные требуемые свойства, чтобы сделать выбранный элемент похожим на Explorer.
Альтернатива: Я также был бы рад, если бы сфокусированный выбранный элемент выглядел так, как будто мой сейчас делает, когда он не имеет фокуса. При потере фокуса цвет должен меняться от синего до серого.
Вот мой код:
Решение
Благодаря отличным ответам Sheridan и Meleak мой TreeView теперь выглядит так в коде (результат я очень доволен и довольно близок к стилю Explorer):
<TreeView ...
- Стиль windows WPF не применяется
- Примените два разных стиля шрифта к TextView
- Изменение цвета фона для выбранного элемента ListBox
- Стилизация SearchView в панели действий Android
- Как программно установить атрибут стиля в представлении
- Конвертер связыванияПараметр
- Панель инструментов Android: маленький текст заголовка в ландшафтном режиме
- Можете ли вы определить несколько TargetTypes для одного стиля XAML?
Добавление к ответу @ Шеридан
Это не 100% -ный точный результат, но должен быть довольно близок (он использует цвета из GridView который близок к Windows Explorer)
Добавьте это в свой TreeView.ContainerStyle чтобы удалить blue фон по умолчанию.
Вы можете заменить Black цвет каким бы то ни было цветом текста вашего предмета и текста выбранного элемента.
Чтобы иметь серый фон, когда он не сфокусирован, вы можете настроить « EventTrigger » Style с серым EventTrigger и использовать EventTrigger s в событиях TreeViewItem.GotFocus и LostFocus для переключения между LostFocus s.
EDIT >>>
Если вы хотите быть флеш-памятью, вы можете использовать анимацию для изменения цвета фона, добавив триггеры в свою ItemBorder Border прямо в ваш HierarchicalDataTemplate следующим образом:
Обратите внимание, что это будет работать, только если ColorAnimation имеет цвет From . Поскольку этот код стоит, среда выполнения будет искать набор Border.Background свойстве Border.Background , поэтому вы должны установить его. Вы можете установить свойство ColorAnimation.From прямо.
Стиль WindowsView TreeView (и ListView)
Первоначально я искал способ применения цветовой схемы Windows 10 к TreeViewItem, включая
- IsMouseOver только для текущего элемента
- Windows 10, которые WPF уже применяет к ListBox (не Windows Explorer)
Если кто-то из вас ищет именно это, пожалуйста, не стесняйтесь принимать код ниже. Я использовал решение Helge Klein для проблемы IsMouseOver и применил цвета Windows 10 к XAML. Поэтому я предлагаю это как дополнение к принятому ответу.
Также см. Ниже слово для ListView и ComboBox .
Скриншот
App.xaml
TreeViewItemHelper ( Источник, опубликованный Хельге Клейном, незначительные изменения / упрощение )
public static class TreeViewItemHelper { private static TreeViewItem CurrentItem; private static readonly RoutedEvent UpdateOverItemEvent = EventManager.RegisterRoutedEvent("UpdateOverItem", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(TreeViewItemHelper)); private static readonly DependencyPropertyKey IsMouseDirectlyOverItemKey = DependencyProperty.RegisterAttachedReadOnly("IsMouseDirectlyOverItem", typeof(bool), typeof(TreeViewItemHelper), new FrameworkPropertyMetadata(null, new CoerceValueCallback(CalculateIsMouseDirectlyOverItem))); public static readonly DependencyProperty IsMouseDirectlyOverItemProperty = IsMouseDirectlyOverItemKey.DependencyProperty; static TreeViewItemHelper() { EventManager.RegisterClassHandler(typeof(TreeViewItem), UIElement.MouseEnterEvent, new MouseEventHandler(OnMouseTransition), true); EventManager.RegisterClassHandler(typeof(TreeViewItem), UIElement.MouseLeaveEvent, new MouseEventHandler(OnMouseTransition), true); EventManager.RegisterClassHandler(typeof(TreeViewItem), UpdateOverItemEvent, new RoutedEventHandler(OnUpdateOverItem)); } public static bool GetIsMouseDirectlyOverItem(DependencyObject obj) { return (bool)obj.GetValue(IsMouseDirectlyOverItemProperty); } private static object CalculateIsMouseDirectlyOverItem(DependencyObject item, object value) { return item == CurrentItem; } private static void OnUpdateOverItem(object sender, RoutedEventArgs e) { CurrentItem = sender as TreeViewItem; CurrentItem.InvalidateProperty(IsMouseDirectlyOverItemProperty); e.Handled = true; } private static void OnMouseTransition(object sender, MouseEventArgs e) { lock (IsMouseDirectlyOverItemProperty) { if (CurrentItem != null) { DependencyObject oldItem = CurrentItem; CurrentItem = null; oldItem.InvalidateProperty(IsMouseDirectlyOverItemProperty); } Mouse.DirectlyOver?.RaiseEvent(new RoutedEventArgs(UpdateOverItemEvent)); } } }
ListBox / ListView и ComboBox: в Windows 7 (и 8?) Это приведет к различию дизайна TreeView с ListBox / ListView и ComboBox. Поэтому, если вы хотите применить эту цветовую схему к этим типам управления, также используйте это: