UWP / XAML: увеличенный эффект раскрытия (или настройка градиента) в ListView - PullRequest
Новая
       19

UWP / XAML: увеличенный эффект раскрытия (или настройка градиента) в ListView

3 голосов
/ 09 июля 2019

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

Мне удалось изменить толщину, но я не могу заставить ее расширяться по бокам.

Base reveal effect

Есть какие-нибудь советы, как мне этого добиться?Я попытался определить RevealBorderBrush, но не могу найти способ изменить это.

После прочтения MS Doc параметры не совсем понятны.Попытка переопределить Transform, кажется, запрещена, поэтому я потерян там.

Спасибо!

Примечание: я использую шаблон по умолчанию для ListViewItem: 

<Style x:Key="ListViewItemStyle1" 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" CheckBrush="{ThemeResource ListViewItemCheckBrush}" ContentMargin="{TemplateBinding Padding}" CheckBoxBrush="{ThemeResource ListViewItemCheckBoxBrush}" ContentTransitions="{TemplateBinding ContentTransitions}" CheckMode="{ThemeResource ListViewItemCheckMode}" DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" DragBackground="{ThemeResource ListViewItemDragBackground}" DragForeground="{ThemeResource ListViewItemDragForeground}" FocusBorderBrush="{ThemeResource ListViewItemFocusBorderBrush}" FocusVisualMargin="{TemplateBinding FocusVisualMargin}" FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Control.IsTemplateFocusTarget="True" PressedBackground="{ThemeResource ListViewItemBackgroundPressed}" PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}" PointerOverForeground="{ThemeResource ListViewItemForegroundPointerOver}" PointerOverBackground="{ThemeResource ListViewItemBackgroundPointerOver}" RevealBorderThickness="2" ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" RevealBorderBrush="{ThemeResource ListViewItemRevealBorderBrush}" RevealBackground="{ThemeResource ListViewItemRevealBackground}" SelectedForeground="{ThemeResource ListViewItemForegroundSelected}" SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}" SelectedBackground="{ThemeResource ListViewItemBackgroundSelected}" SelectedPressedBackground="{ThemeResource ListViewItemBackgroundSelectedPressed}" SelectedPointerOverBackground="{ThemeResource ListViewItemBackgroundSelectedPointerOver}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
                        <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>

1 Ответ

2 голосов
/ 09 июля 2019

Если вы хотите изменить размер эффекта ListView Reveal, вы можете установить ListViewItemRevealBorderThemeThickness в ресурсе страницы, как показано ниже, и значение по умолчанию ListViewItemRevealBorderThemeThickness равно 1 . 

<Page.Resources>
    <Thickness x:Key="ListViewItemRevealBorderThemeThickness">2</Thickness>
</Page.Resources>

UWP еще не предоставил свойство Reveal border width, мы не смогли его изменить. Для пользовательского эффекта показа вы можете обратиться составное освещение .

Xaml 

<Rectangle
            Height="44"
            HorizontalAlignment="Stretch"
            Fill="Azure"
            Loaded="Rectangle_Loaded"
            PointerMoved="Rectangle_PointerMoved"
            />

Код позади 

private PointLight _pointLight;
private void Rectangle_PointerMoved(object sender, PointerRoutedEventArgs e)
{
    var point = e.GetCurrentPoint(sender as UIElement).Position;

    // If you want to make light large, please set large Z Value for `Vector3`

    _pointLight.Offset = new Vector3((float)point.X, (float)point.Y, (float)100);
}

private void Rectangle_Loaded(object sender, RoutedEventArgs e)
{
    var compositor = Window.Current.Compositor;
    var visual = ElementCompositionPreview.GetElementVisual(sender as UIElement);
    _pointLight = compositor.CreatePointLight();
    _pointLight.Color = Colors.Red;
    _pointLight.CoordinateSpace = visual; 
    _pointLight.Targets.Add(visual);
}
...