在 UWP C# 上選擇時更改顏色

Question

選擇該項目時，我需要更改 GridView 中矩形的顏色。

未選擇的項目

所選項目

我在 XAML 中的主頁。

<Page
    x:Class="GridViewWithSelectedItem.Views.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"
    xmlns:views="using:GridViewWithSelectedItem.Views"
    Style="{StaticResource PageStyle}"
    mc:Ignorable="d">
    <Page.Resources>
        <DataTemplate x:Key="TileTemplate" x:DataType="views:Article">
            <Border BorderThickness="2,2,2,2" BorderBrush="#FF868484" Margin="3,3,3,3" HorizontalAlignment="Stretch" MaxWidth="600" MinWidth="525">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="10"/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition Height="60"/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Rectangle Fill="Black" Grid.RowSpan="3"/>
                    <StackPanel Orientation="Horizontal"  Grid.Row="0" Grid.Column="1">
                        <TextBlock FontSize="20" Margin="0,0,5,0" TextWrapping="Wrap" Foreground="DarkBlue" FontWeight="Bold" Text="{x:Bind Number}"/>
                        <TextBlock FontSize="20" TextWrapping="Wrap" Foreground="DarkBlue" Text="{x:Bind Title}" FontWeight="Bold"/>
                    </StackPanel>
                    <TextBlock Grid.Row="1" Grid.Column="1" FontSize="20" Text="{x:Bind Description}" TextWrapping="WrapWholeWords"/>
                    <StackPanel Background="LightBlue" Padding="5,0,0,0"  Grid.Row="2" Grid.Column="1">
                        <StackPanel Orientation="Horizontal">
                        <TextBlock FontSize="20" Margin="0,0,5,0" TextWrapping="Wrap">Date :</TextBlock>
                        <TextBlock Foreground="Red" FontSize="20" TextWrapping="Wrap" Text="{x:Bind Date}" FontWeight="Bold"/>
                        </StackPanel>
                    </StackPanel>
                </Grid>
            </Border>
        </DataTemplate>
    </Page.Resources>
    <Grid x:Name="ContentArea" Margin="{StaticResource MediumLeftRightMargin}">
        <Grid Background="White" VerticalAlignment="Top" HorizontalAlignment="Stretch" Margin="0,25,0,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="600"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="60"/>
                <RowDefinition Height="800"/>
            </Grid.RowDefinitions>
            <TextBlock Text="The Guardian" FontSize="35" FontWeight="Bold" Grid.ColumnSpan="2" HorizontalAlignment="Center"/>
            <GridView
                BorderThickness="2,2,0,2" BorderBrush="#FF868484"
                MinWidth="600"
                Grid.Column="0"
                Grid.Row="1"
                Padding="5,5,5,5"
                HorizontalAlignment="Center"
                CanDragItems="False"
                IsItemClickEnabled="true"
                IsTapEnabled="False"
                IsSwipeEnabled="False"
                ItemsSource="{x:Bind Articles}"
                ItemTemplate="{StaticResource TileTemplate}"
                SelectedItem="{x:Bind Mode=TwoWay, Path=SelectedArticle}"
                
            />
            <RelativePanel  Grid.Row="1" Grid.Column="1" Background="WhiteSmoke" BorderThickness="2" BorderBrush="#FF868484" Padding="10">
                <Grid RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True">
                    <Grid VerticalAlignment="Top">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <StackPanel Orientation="Horizontal"  Grid.Row="0">
                            <TextBlock FontSize="20" Margin="0,0,5,0" TextWrapping="Wrap" Foreground="DarkBlue" FontWeight="Bold" Text="{x:Bind Path=SelectedArticle.Number, Mode=OneWay}"/>
                            <TextBlock FontSize="20" TextWrapping="Wrap" Foreground="DarkBlue" Text="{x:Bind Path=SelectedArticle.Title, Mode=OneWay}" FontWeight="Bold"/>
                        </StackPanel>
                        <TextBlock Grid.Row="1" FontSize="20" Text="{x:Bind Path=SelectedArticle.Description, Mode=OneWay}" TextWrapping="WrapWholeWords"/>
                    </Grid>
                </Grid>
                <RelativePanel Background="LightBlue" Padding="5,0,0,0" RelativePanel.AlignBottomWithPanel="True" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock FontSize="20" Margin="0,0,5,0" TextWrapping="Wrap">Date :</TextBlock>
                        <TextBlock Foreground="Red" FontSize="20" TextWrapping="Wrap" Text="{x:Bind Path=SelectedArticle.Date, Mode=OneWay}" FontWeight="Bold"/>
                    </StackPanel>
                </RelativePanel>
            </RelativePanel>
        </Grid>
    </Grid>
</Page>

還有我的 XAML 頁面的 class。

using System;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;

using Windows.UI.Xaml.Controls;

namespace GridViewWithSelectedItem.Views
{
    public sealed partial class MainPage : Page, INotifyPropertyChanged
    {
        public ObservableCollection<Article> Articles;

        private Article _selectedArticle;

        public Article SelectedArticle
        {
            get { return _selectedArticle; }
            set { Set(ref _selectedArticle, value); }
        }

        public MainPage()
        {
            InitializeComponent();
            Articles = new ObservableCollection<Article>();
            Articles.Add(new Article(0, "Uighurs", "Being young' leads to detention in China's Xinjiang region", DateTime.Parse("09/12/2020")));
            Articles.Add(new Article(1, "Brexit", "Chances of Brexit deal hang on Boris Johnson and Ursula von der Leyen dinner", DateTime.Parse("09/12/2020")));
            Articles.Add(new Article(2, "Environment", "Secretive ‘gold rush’ for deep-sea mining dominated by handful of firms", DateTime.Parse("09/12/2020")));
            Articles.Add(new Article(3, "Juukan Gerge induiry", "Juukan Gorge inquiry: Rio Tinto's decision to blow up Indigenous rock shelters 'inexcusable'", DateTime.Parse("09/12/2020")));
            Articles.Add(new Article(4, "Australia", "British journalist uncovered Australian woman's alleged plan to kill parents on dark web, police say", DateTime.Parse("09/12/2020")));
            Articles.Add(new Article(5, "Coronavirus", "Nine out of 10 in poor nations to miss out on inoculation as west buys up Covid vaccines", DateTime.Parse("09/12/2020")));
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private void Set<T>(ref T storage, T value, [CallerMemberName]string propertyName = null)
        {
            if (Equals(storage, value))
            {
                return;
            }

            storage = value;
            OnPropertyChanged(propertyName);
        }

        private void OnPropertyChanged(string propertyName) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
    public class Article
    {
        public int Number { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }
        public DateTime Date { get; set; }

        public Article(int number, string title, string description, DateTime date)
        {
            Number = number;
            Title = title;
            Description = description;
            Date = Date;
        }
    }
}

我看到 AutomationProperty.name 可以幫助我，但我不明白如何使用它。 我找到了一種方法來更改 class 中選定項目的顏色，但我需要重新創建集合並且我花費了大量資源。 我認為它可以在 XAML 代碼中實現。

編輯：我做了一個簡單的代碼示例。

OneDrive 鏈接

Answer 1

您可以在Article class 中添加 Brush 屬性，並將 Brush 屬性綁定到DataTemplate的Rectangle.Fill屬性以在選擇 GridView 控件的項目時更改顏色。

請檢查以下代碼：

在 xaml 文件的DataTemplate中：

<Rectangle x:Name="rectangle" Fill="{x:Bind Brush}" Grid.RowSpan="3"/>
……
<GridView ……  SelectionChanged="GridView_SelectionChanged" />

在代碼隱藏中：

public class Article
{
    ……
    public SolidColorBrush Brush { get; set; }

    public Article(int number, string title, string description, DateTime date)
    {
        ……
        Brush = new SolidColorBrush(Colors.Black);
    }
}

添加_preSelectedArticle屬性以保存MainPage class 中的上一項：

private Article _preSelectedArticle;

更改選中項和上一個選中項的Brush屬性值：

private void GridView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if(_preSelectedArticle==null)
    {
        SelectedArticle.Brush.Color = Colors.Green;
        _preSelectedArticle = SelectedArticle;
    }
    if (_preSelectedArticle!=null&&_preSelectedArticle!= SelectedArticle)
    {
        _preSelectedArticle.Brush.Color = Colors.Black;
        SelectedArticle.Brush.Color = Colors.Green;
        _preSelectedArticle = SelectedArticle;
    }
}