如何在GridView中更改ListViewItemPresenter中的SelectedBackground [英] How to change SelectedBackground in ListViewItemPresenter inside a GridView

问题描述

 < HubSection> 
我有一个Clickable-Gridview插入HubSection： 
< DataTemplate> 
< GridView IsItemClickEnabled =TrueItemClick =Hub_OnClick> 
< RelativePanel> 
< TextBlock Text =NiceText/> 
< / RelativePanel> 
< / GridView> 
< / DataTemplate> 
< / HubSection> 
  

现在每次点击该集线器时，GridView周围都会出现蓝色边框（SelectedBackground ）。

在LiveVisualTree中，它显示了边框来自GridViewItem中的ListViewItemPresenter控件。因此，我修改了原始控件的样式并将其粘贴到Page.Resources标记中。

$ p $ <！ - 默认样式for Windows.UI.Xaml.Controls.ListViewItem - >
< Style TargetType =ListViewItem>
< Setter Property =FontFamilyValue ={ThemeResource ContentControlThemeFontFamily}/>
< Setter Property =FontSizeValue ={ThemeResource ControlContentThemeFontSize}/>
< Setter Property =BackgroundValue =Transparent/>
< Setter Property =ForegroundValue ={ThemeResource SystemControlForegroundBaseHighBrush}/>
< Setter Property =TabNavigationValue =Local/>
< Setter Property =IsHoldingEnabledValue =True/>
< Setter Property =PaddingValue =12,0,12,0/>
< Setter Property =Horizo​​ntalContentAlignmentValue =Left/>
< Setter Property =VerticalContentAlignmentValue =Center/>
< Setter Property =MinWidthValue ={ThemeResource ListViewItemMinWidth}/>
< Setter Property =MinHeightValue ={ThemeResource ListViewItemMinHeight}/>
< Setter Property =Template>
< Setter.Value>
< ControlTemplate TargetType =ListViewItem>
< ListViewItemPresenter
ContentTransitions ={TemplateBinding ContentTransitions}
SelectionCheckMarkVisualEnabled =True
CheckBrush ={ThemeResource SystemControlForegroundBaseMediumHighBrush}
CheckBoxBrush ={ThemeResource SystemControlForegroundBaseMediumHighBrush }
DragBackground ={ThemeResource ListViewItemDragBackgroundThemeBrush}
DragForeground ={ThemeResource ListViewItemDragForegroundThemeBrush}
FocusBorderBrush ={ThemeResource SystemControlForegroundAltHighBrush}
FocusSecondaryBorderBrush ={ThemeResource SystemControlForegroundBaseHighBrush}
PlaceholderBackground = {ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}
PointerOverBackground = {ThemeResource SystemControlHighlightListLowBrush}
PointerOverForeground = {ThemeResource SystemControlHighlightAltBaseHighBrush}
将 - 1 H ere - >
SelectedBackground =White
SelectedForeground ={ThemeResource SystemControlHighlightAltBaseHighBrush}
SelectedPointerOverBackground ={ThemeResource SystemControlHighlightListAccentMediumBrush}
PressedBackground ={ThemeResource SystemControlHighlightListMediumBrush}
SelectedPressedBackground ={ThemeResource SystemControlHighlightListAccentHighBrush}
DisabledOpacity ={ThemeResource ListViewItemDisabledThemeOpacity}
DragOpacity ={ThemeResource ListViewItemDragThemeOpacity}
ReorderHintOffset ={ThemeResource ListViewItemReorderHintThemeOffset}
Horizo​​ntalContentAlignment = {TemplateBinding Horizo​​ntalContentAlignment}
VerticalContentAlignment ={TemplateBinding VerticalContentAlignment}
ContentMargin ={TemplateBinding Padding}
CheckMode =Inline/>
< / ControlTemplate>
< / Setter>
< / style>


但这不适合我。 SelectedBackground-Border仍然是蓝色的。但为什么？我的错误在哪里？

解决方案

您应该覆盖 GridViewItem 样式和将新样式设置为 GridView 。在页面资源中声明您的新样式：

 < Page.Resources> 
< Style TargetType =GridViewItemx：Key =CustomGridViewStyle> 
< Setter Property =FontFamilyValue ={ThemeResource ContentControlThemeFontFamily}/> 
< Setter Property =FontSizeValue ={ThemeResource ControlContentThemeFontSize}/> 
< Setter Property =BackgroundValue =Transparent/> 
< Setter Property =ForegroundValue ={ThemeResource SystemControlForegroundBaseHighBrush}/> 
< Setter Property =TabNavigationValue =Local/> 
< Setter Property =IsHoldingEnabledValue =True/> 
< Setter Property =Horizo​​ntalContentAlignmentValue =Center/> 
< Setter Property =VerticalContentAlignmentValue =Center/> 
< Setter Property =MarginValue =0,0,4,4/> 
< Setter Property =MinWidthValue ={ThemeResource GridViewItemMinWidth}/> 
< Setter Property =MinHeightValue ={ThemeResource GridViewItemMinHeight}/> 
< Setter Property =Template> 
< Setter.Value> 
< ControlTemplate TargetType =GridViewItem> 
< ListViewItemPresenter 
 ContentTransitions ={TemplateBinding ContentTransitions}
 SelectionCheckMarkVisualEnabled =True
 CheckBrush ={ThemeResource SystemControlForegroundBaseMediumHighBrush}
 CheckBoxBrush ={ThemeResource SystemControlBackgroundChromeMediumBrush }
 DragBackground ={ThemeResource ListViewItemDragBackgroundThemeBrush}
 DragForeground ={ThemeResource ListViewItemDragForegroundThemeBrush}
 FocusBorderBrush ={ThemeResource SystemControlForegroundAltHighBrush}
 FocusSecondaryBorderBrush ={ThemeResource SystemControlForegroundBaseHighBrush} 
 PlaceholderBackground ={ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}
 PointerOverBackground ={ThemeResource SystemControlHighlightListLowBrush}
 PointerOverForeground ={ThemeResource SystemControlForegroundBaseHighBrush}
 SelectedBackground =Transparent
 SelectedForeground ={ThemeResource SystemControlForegroundBaseHighBrush}
 SelectedPointerOverBackground ={ThemeResource SystemControlHighlightListAccentMediumBrush}
 PressedBackground ={ThemeResource SystemControlHighlightListMediumBrush}
 SelectedPressedBackground ={ThemeResource SystemControlHighlightListAccentHighBrush}
 DisabledOpacity ={ThemeResource ListViewItemDisabledThemeOpacity}
 DragOpacity ={ThemeResource ListViewItemDragThemeOpacity}
 ReorderHintOffset ={ThemeResource GridViewItemReorderHintThemeOffset} 
 Horizo​​ntalContentAlignment ={TemplateBinding Horizo​​ntalContentAlignment}
 VerticalContentAlignment ={TemplateBinding VerticalContentAlignment}
 ContentMargin ={TemplateBinding Padding}
 CheckMode =Overlay/> 
< / ControlTemplate> 
 < / Setter> 
< / style> 
   

并设置：

 < HubSection> 
< DataTemplate> 
< GridView IsItemClickEnabled =True
 ItemClick =Hub_OnClick
 ItemContainerStyle ={StaticResource CustomGridViewStyle}> 
< RelativePanel> 
< TextBlock Text =NiceText/> 
< / RelativePanel> 
< / GridView> 
< / DataTemplate> 
< / HubSection> 
  

p.s。您也可以覆盖扩展样式

I have a Clickable-Gridview insde a HubSection:

<HubSection >
                    <DataTemplate>
                        <GridView IsItemClickEnabled="True" ItemClick="Hub_OnClick">
                            <RelativePanel >
                           <TextBlock Text="NiceText" />
                            </RelativePanel>
                        </GridView>
                    </DataTemplate>
                </HubSection>

Now everytime I've clicked on that hub, a blue-border will appear around the GridView (SelectedBackground).

In LiveVisualTree it shows me, that the border is from a "ListViewItemPresenter" control inside the GridViewItem. Therefore I modified the style from the original control and pasted it into the Page.Resources tag.

<!-- Default style for Windows.UI.Xaml.Controls.ListViewItem -->
<Style TargetType="ListViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
<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="Template">
  <Setter.Value>
    <ControlTemplate TargetType="ListViewItem">
      <ListViewItemPresenter
          ContentTransitions="{TemplateBinding ContentTransitions}"
          SelectionCheckMarkVisualEnabled="True"
          CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
          CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
          DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
          DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
          FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}"
          FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}"
          PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
          PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}"
          PointerOverForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
          <!-- here -->
          SelectedBackground="White"
          SelectedForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
          SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListAccentMediumBrush}"
          PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}"
          SelectedPressedBackground="{ThemeResource SystemControlHighlightListAccentHighBrush}"
          DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
          DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
          ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
          ContentMargin="{TemplateBinding Padding}"
          CheckMode="Inline"/>
    </ControlTemplate>
  </Setter.Value>
</Setter>
</Style>

But this isn't working for me. The SelectedBackground-Border is still blue. But why? Where is my mistake?

解决方案

You should to override GridViewItem style and setup new style to GridView. In page resource declare your new style:

<Page.Resources>
    <Style TargetType="GridViewItem" x:Key="CustomGridViewStyle">
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
        <Setter Property="TabNavigation" Value="Local"/>
        <Setter Property="IsHoldingEnabled" Value="True"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Margin" Value="0,0,4,4"/>
        <Setter Property="MinWidth" Value="{ThemeResource GridViewItemMinWidth}"/>
        <Setter Property="MinHeight" Value="{ThemeResource GridViewItemMinHeight}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="GridViewItem">
                    <ListViewItemPresenter
                    ContentTransitions="{TemplateBinding ContentTransitions}"
                    SelectionCheckMarkVisualEnabled="True"
                    CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                    CheckBoxBrush="{ThemeResource SystemControlBackgroundChromeMediumBrush}"
                    DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
                    DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
                    FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}"
                    FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}"
                    PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
                    PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}"
                    PointerOverForeground="{ThemeResource SystemControlForegroundBaseHighBrush}"
                    SelectedBackground="Transparent"
                    SelectedForeground="{ThemeResource SystemControlForegroundBaseHighBrush}"
                    SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListAccentMediumBrush}"
                    PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}"
                    SelectedPressedBackground="{ThemeResource SystemControlHighlightListAccentHighBrush}"
                    DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                    DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                    ReorderHintOffset="{ThemeResource GridViewItemReorderHintThemeOffset}"
                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                    ContentMargin="{TemplateBinding Padding}"
                    CheckMode="Overlay"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

And setup:

<HubSection >
    <DataTemplate>
        <GridView IsItemClickEnabled="True"
                ItemClick="Hub_OnClick"
                ItemContainerStyle="{StaticResource CustomGridViewStyle}">
            <RelativePanel >
                <TextBlock Text="NiceText" />
            </RelativePanel>
        </GridView>
    </DataTemplate>
</HubSection>

p.s. You also can override Exanded style

这篇关于如何在GridView中更改ListViewItemPresenter中的SelectedBackground的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！