UWP ListView 绑定 单击 选中项 颜色

Posted 2020-10-10

xaml

<Page
    x:Class="SuperTools.Views.BlankPage3"
    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:interop="using:Windows.UI.Xaml.Interop"
    xmlns:local="using:SuperTools.Views"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid Background="Gray">
        <ListView
            Name="listView1"
            IsItemClickEnabled="True"
            ItemClick="listView1_ItemClick">
            <ListView.Resources>
                <Style x:Key="ListViewItemStyle1" TargetType="ListViewItem">
                    <!--HorizontalContentAlignment 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="Stretch" />
                    <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="True" />
                    <Setter Property="FocusVisualMargin" Value="0" />
                    <Setter Property="FocusVisualPrimaryBrush" Value="{ThemeResource ListViewItemFocusVisualPrimaryBrush}" />
                    <Setter Property="FocusVisualPrimaryThickness" Value="2" />
                    <Setter Property="FocusVisualSecondaryBrush" Value="{ThemeResource ListViewItemFocusVisualSecondaryBrush}" />
                    <Setter Property="FocusVisualSecondaryThickness" Value="1" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ListViewItem">
                                <ListViewItemPresenter
                                    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}"
                                    FocusVisualPrimaryBrush="{TemplateBinding FocusVisualPrimaryBrush}"
                                    FocusVisualPrimaryThickness="{TemplateBinding FocusVisualPrimaryThickness}"
                                    FocusVisualSecondaryBrush="{TemplateBinding FocusVisualSecondaryBrush}"
                                    FocusVisualSecondaryThickness="{TemplateBinding FocusVisualSecondaryThickness}"
                                    PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}"
                                    PointerOverBackground="#FFFFAA"
                                    PointerOverForeground="{ThemeResource ListViewItemForegroundPointerOver}"
                                    PressedBackground="#FFFFAA"
                                    ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                                    SelectedBackground="#FFFFAA"
                                    SelectedForeground="{ThemeResource ListViewItemForegroundSelected}"
                                    SelectedPointerOverBackground="Red"
                                    SelectedPressedBackground="#FFFFAA"
                                    SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}" />
                                <!--
                                    PointerOverBackground 鼠标移到元素上时;SelectedBackground 元素被选择后;SelectedPressedBackground 点击已被选择元素时;
                                    PressedBackground 点击未被选择的元素时;SelectedPointerOverBackground 鼠标移动已被选择元素上时
                                -->
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListView.Resources>
            <ListView.ItemContainerStyle>
                <StaticResource ResourceKey="ListViewItemStyle1" />
            </ListView.ItemContainerStyle>
            <ItemsPanelTemplate>
                <Grid Background="White" />
            </ItemsPanelTemplate>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid
                        Margin="0,0,0,0"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        Background="YellowGreen">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="1" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="1" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <TextBlock
                            x:Name="title_prj"
                            Grid.Column="0"
                            Margin="10"
                            Text="{Binding Path=name1}" />
                        <Border
                            Grid.Column="1"
                            Width="0.5"
                            Background="#808080" />
                        <TextBlock
                            x:Name="title_result"
                            Grid.Column="2"
                            Margin="10"
                            Text="{Binding Path=details}" />
                        <Border
                            Grid.Column="3"
                            Width="0.5"
                            Background="#808080" />
                        <TextBlock
                            x:Name="title_gray"
                            Grid.Column="4"
                            Margin="10"
                            Text="{Binding Path=backgroundcolor}" />

                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>

        </ListView>
    </Grid>
</Page>

 

 

cs

using System.Collections.ObjectModel;
using Windows.UI;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;

namespace SuperTools.Views
{
    public sealed partial class BlankPage3 : Page
    { 
        public BlankPage3()
        {
            this.InitializeComponent();
            var categories = new ObservableCollection<dynamic>
            {
                new   {Name="name1",details="color1" ,backgroundcolor="#D90015"},
                new   {Name="name2",details="color2" ,backgroundcolor="#DC1C17"},
                new   {Name="name3",details="cplor3",backgroundcolor="#DE3A17" },
                new   {Name="name3",details="color4",backgroundcolor="#E25819" }
            };
            listView1.ItemsSource = categories;  
        }

        private void listView1_ItemClick(object sender, ItemClickEventArgs e)
        {
            listView1.Background= new SolidColorBrush(Colors.Transparent);
            dynamic clickedItem = e.ClickedItem;
            ListViewItem item = listView1.ContainerFromItem(clickedItem) as ListViewItem;
            if (item != null)
            {
                //item.Background = new SolidColorBrush(Colors.Red);//选中后的元素背景颜色 
            } 
        }
    }
}