Как использовать всплывающую подсказку «Показать» в стиле ListViewItem с библиотекой пользовательского интерфейса Windows? - PullRequest
Новая
       101

Как использовать всплывающую подсказку «Показать» в стиле ListViewItem с библиотекой пользовательского интерфейса Windows?

0 голосов
/ 06 марта 2020

Я пытаюсь настроить стиль ListViewItem по умолчанию для элемента управления в нашем приложении UWP, но не могу заставить эффект наведения / щелчка Reveal работать.

Перед добавлением пользовательского стиля, Reveal эффект работает просто отлично (используется элемент управления ListView по умолчанию). Я щелкаю правой кнопкой мыши элемент управления ListView в представлении «Дизайн» и выбираю «Редактировать дополнительные шаблоны» -> «Редактировать контейнер сгенерированного элемента» (ItemContainerStyle) -> «Редактировать копию». В этот момент для свойства «Стиль» задан вновь созданный стиль, но у меня нет не изменили его, поэтому ничего не должно было измениться в пользовательском интерфейсе. Но эффект «Выявить при наведении / щелчке» теперь не работает.

Наше приложение использует библиотеку пользовательского интерфейса Windows (Microsoft.UI.Xaml) в других местах, поэтому <XamlControlsResources /> был добавлен в Application.Resources. Если я уберу это, откроется эффект наведения курсора / щелчка. Так что, похоже, это сочетание определения собственного стиля и добавления XamlControlsResources, которое нарушает эффект. Я попытался переместить стиль в App.xaml или отдельный ResourceDictionary без изменений. Я попытался удалить различные части стиля, чтобы определить, что вызывает его нарушение. Если я удаляю Setter для шаблона, он работает, но это именно то, что я пытаюсь настроить.

Согласно Документам Microsoft : «Важно отметить, что для Reveal требуется как sh и сеттеры в его визуальном состоянии для правильной работы. Простая установка одного элемента управления bru sh для одного из наших ресурсов Reveal bru sh не включит Reveal для этого элемента управления. И наоборот, имея только цели или настройки без значений кисти Reveal также не активируют Reveal. " Так что, предположительно, либо свойство ListViewItemPresenter.RevealBackground, либо VisualStateManager вызывает его поломку, но я не уверен, как и почему.

Как определить собственный стиль для моего ListView без потери эффекта наведения (и без удаления XamlControlsResources, поскольку это требуется нашим приложением)?

Вот простое повторение:

App.xaml 

<Application
    x:Class="BrokenRevealEffect.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    RequestedTheme="Dark">
    <Application.Resources>
        <!--  Remove XamlControlsResources to see the Reveal hover/click effect.  -->
        <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
    </Application.Resources>
</Application>

MainPage.xaml 

<Page
    x:Class="BrokenRevealEffect.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    mc:Ignorable="d">
    <Page.Resources>
        <!--  This is the default style for the ListViewItem. It has not been modified.  -->
        <Style x:Key="abc" TargetType="ListViewItem">
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
            <Setter Property="Background" Value="{ThemeResource ListViewItemBackground}" />
            <Setter Property="Foreground" Value="{ThemeResource ListViewItemForeground}" />
            <Setter Property="TabNavigation" Value="Local" />
            <Setter Property="IsHoldingEnabled" Value="True" />
            <Setter Property="Padding" Value="12,0,12,0" />
            <Setter Property="HorizontalContentAlignment" Value="Left" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}" />
            <Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}" />
            <Setter Property="AllowDrop" Value="False" />
            <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
            <Setter Property="FocusVisualMargin" Value="0" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListViewItem">
                        <ListViewItemPresenter
                            x:Name="Root"
                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                            CheckBoxBrush="{ThemeResource ListViewItemCheckBoxBrush}"
                            CheckBrush="{ThemeResource ListViewItemCheckBrush}"
                            CheckMode="{ThemeResource ListViewItemCheckMode}"
                            ContentMargin="{TemplateBinding Padding}"
                            ContentTransitions="{TemplateBinding ContentTransitions}"
                            Control.IsTemplateFocusTarget="True"
                            DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                            DragBackground="{ThemeResource ListViewItemDragBackground}"
                            DragForeground="{ThemeResource ListViewItemDragForeground}"
                            DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                            FocusBorderBrush="{ThemeResource ListViewItemFocusBorderBrush}"
                            FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}"
                            FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
                            PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}"
                            PointerOverBackground="{ThemeResource ListViewItemBackgroundPointerOver}"
                            PointerOverForeground="{ThemeResource ListViewItemForegroundPointerOver}"
                            PressedBackground="{ThemeResource ListViewItemBackgroundPressed}"
                            ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                            RevealBackground="{ThemeResource ListViewItemRevealBackground}"
                            RevealBorderBrush="{ThemeResource ListViewItemRevealBorderBrush}"
                            RevealBorderThickness="{ThemeResource ListViewItemRevealBorderThemeThickness}"
                            SelectedBackground="{ThemeResource ListViewItemBackgroundSelected}"
                            SelectedForeground="{ThemeResource ListViewItemForegroundSelected}"
                            SelectedPointerOverBackground="{ThemeResource ListViewItemBackgroundSelectedPointerOver}"
                            SelectedPressedBackground="{ThemeResource ListViewItemBackgroundSelectedPressed}"
                            SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="Selected" />
                                    <VisualState x:Name="PointerOver">
                                        <VisualState.Setters>
                                            <Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
                                            <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPointerOver}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="PointerOverSelected">
                                        <VisualState.Setters>
                                            <Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
                                            <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPointerOver}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="PointerOverPressed">
                                        <VisualState.Setters>
                                            <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                                            <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPressed}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <VisualState.Setters>
                                            <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                                            <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPressed}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="PressedSelected">
                                        <VisualState.Setters>
                                            <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                                            <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPressed}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="DisabledStates">
                                    <VisualState x:Name="Enabled" />
                                    <VisualState x:Name="Disabled">
                                        <VisualState.Setters>
                                            <Setter Target="Root.RevealBorderThickness" Value="0" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </ListViewItemPresenter>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>
    <Grid>
        <!--  Remove ItemContainerStyle to see the Reveal hover/click effect.  -->
        <ListView ItemContainerStyle="{StaticResource abc}" ItemsSource="{x:Bind Items}" />
    </Grid>
</Page>

MainPage.xaml.cs 

using System.Collections.Generic;
using Windows.UI.Xaml.Controls;

namespace BrokenRevealEffect
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            InitializeComponent();
        }

        public List<string> Items => new List<string> { "Red", "Yellow", "Blue", "Green" };
    }
}

1 Ответ

0 голосов
/ 11 марта 2020

Я обнаружил, что это можно решить, повторив определение RevealBackgroundBrush SystemControlTransparentRevealBackgroundBrush и ListViewItemRevealBackground с вашим собственным стилем. 

        <RevealBackgroundBrush
            x:Key="SystemControlTransparentRevealBackgroundBrush"
            FallbackColor="Transparent"
            TargetTheme="Light"
            Color="Transparent" />
        <StaticResource x:Key="ListViewItemRevealBackground" ResourceKey="SystemControlTransparentRevealBackgroundBrush" />

Просто добавьте этот код перед пользовательским ListViewItem стиль в Page.Resources или App.Resources или ResourceDictionary; где бы вы ни определяли свои стили.

У меня нет логического объяснения, почему это необходимо. Эти ресурсы уже определены в generic.xaml, поэтому в этом нет необходимости, но это решает проблему. Я бы отнес это к ошибке в Windows UI Library.

...