UWP XAML：为ListView中每个项设置不同颜色的Rectangle

Hey Miguel! Since you already have a grasp on the core idea, let's tweak your existing code to make those per-item colored Rectangles work smoothly. Here's a step-by-step breakdown:

1. Create a Data Model #

First, instead of binding to plain strings, we'll use a custom class that holds both the text and the color for each item. This gives us the flexibility to assign unique colors:

public class ListViewItemData
{
    public string DisplayText { get; set; }
    public SolidColorBrush ItemColor { get; set; }
}

2. Populate the ListView with Data #

In your code-behind (like MainPage.xaml.cs), initialize a collection of this model and set it as the ItemsSource for your ListView:

public MainPage()
{
    InitializeComponent();
    
    // Create sample items with different colors
    var itemCollection = new List<ListViewItemData>
    {
        new ListViewItemData { DisplayText = "First Item", ItemColor = new SolidColorBrush(Colors.Red) },
        new ListViewItemData { DisplayText = "Second Item", ItemColor = new SolidColorBrush(Colors.Green) },
        new ListViewItemData { DisplayText = "Third Item", ItemColor = new SolidColorBrush(Colors.Blue) },
        new ListViewItemData { DisplayText = "Fourth Item", ItemColor = new SolidColorBrush(Colors.Orange) }
    };
    
    listView1.ItemsSource = itemCollection;
}

3. Update Your XAML Template #

Modify your existing DataTemplate to bind to the properties of our new model. Don't forget to update the x:DataType and add the namespace reference for your model:

First, add the local namespace to your root Page element (replace YourAppName with your actual app namespace):

xmlns:local="using:YourAppName"

Then update the ListView template:

<ListView x:Name="listView1">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:ListViewItemData">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="47"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <!-- Bind Fill to the ItemColor property from our model -->
                <Rectangle Fill="{x:Bind ItemColor}" Width="32" Height="32" HorizontalAlignment="Left"/>
                <!-- Bind Text to the DisplayText property -->
                <TextBlock Text="{x:Bind DisplayText}" Foreground="Black" FontSize="15" 
                           Grid.Column="1" VerticalAlignment="Center"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Bonus: Using Hex Color Strings #

If you prefer to store colors as hex strings (like "#FF5733") instead of SolidColorBrush objects, you can use a value converter to convert the string to a brush:

Create the Converter

public class HexStringToBrushConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value is string hexColor && ColorConverter.TryParse(hexColor, out Color parsedColor))
        {
            return new SolidColorBrush(parsedColor);
        }
        // Fallback to gray if the hex string is invalid
        return new SolidColorBrush(Colors.Gray);
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

Add the Converter as a Resource

<Page.Resources>
    <local:HexStringToBrushConverter x:Key="HexToBrushConverter"/>
</Page.Resources>

Update the Model and Binding

Change your model to use a string for the color:

public class ListViewItemData
{
    public string DisplayText { get; set; }
    public string HexColor { get; set; }
}

Then update the Rectangle's Fill binding:

<Rectangle Fill="{x:Bind HexColor, Converter={StaticResource HexToBrushConverter}}" 
           Width="32" Height="32" HorizontalAlignment="Left"/>

This setup lets you easily assign unique colors to each ListView item, whether you're using brush objects directly or hex color strings.

内容的提问来源于stack exchange，提问作者Miguel Genaro