每个 ListViewItem 基于类型的不同颜色（WPF XAML）答案

【问题标题】：Different colors for each ListViewItem based on type (WPF XAML)每个 ListViewItem 基于类型的不同颜色（WPF XAML）
【发布时间】：2020-01-22 18:31:03
【问题描述】：

我正在为一个学校项目而苦苦挣扎。我正在制作一个非常基本的应用程序，它可以读取所选文件夹的内容并将其显示在 ListView 中。我创建了一个名为 IFiles 的接口，并拥有三个名为：Image、Text 和 Folder 的子类。它们都实现了 IFiles 接口。

我的问题主要是关于 XAML 中的设计。因为我希望每个列表视图项根据它找到的对象类型拥有自己的颜色。所以如果它是一个文本文件，背景颜色应该是绿色，如果它是一个图像，它应该是蓝色的。我当前的解决方案部分有效，但它确实按照我的意愿绘制了整行。

我确实可以为 ListViewItem 选择一种颜色，但我只知道如何一次完成所有操作，而不是单行。

这是我的代码：

   <Window.Resources>
    <BitmapImage x:Key="ImgIcon" UriSource="/Images/photo.png" DecodePixelHeight="20" DecodePixelWidth="20"></BitmapImage>
    <BitmapImage x:Key="TextIcon" UriSource="/Images/textfile.png" DecodePixelHeight="20" DecodePixelWidth="20"></BitmapImage>

    <Style TargetType="{x:Type ListViewItem}">
        <Setter Property="Background" Value="Red"></Setter>
    </Style>

    <DataTemplate DataType="{x:Type model:Image}">
        <StackPanel Orientation="Horizontal" Background="Blue" >
            <Image Source="{DynamicResource ImgIcon}"></Image>
            <Label Content="Filename:"></Label>
            <Label Content="{Binding Name}"></Label>
            <Label Content="Size:"></Label>
            <Label Content="{Binding Size}"></Label>
        </StackPanel>
    </DataTemplate>
    <DataTemplate DataType="{x:Type model:Text}">
        <StackPanel Orientation="Horizontal" Background="Green" >
            <Image Source="{DynamicResource TextIcon}"></Image>
            <Label Content="Filename:"></Label>
            <Label Content="{Binding Name}"></Label>
            <Label Content="Size:"></Label>
            <Label Content="{Binding Size}"></Label>
        </StackPanel>
    </DataTemplate>
</Window.Resources>
<Grid>
    <Button Content="Load Folder" HorizontalAlignment="Left" Margin="315,355,0,0" VerticalAlignment="Top" Width="155" Height="40" Command="{Binding LoadFolderCMD}"/>
    <ListView ItemsSource="{Binding Files}" Margin="0,0,0,89" HorizontalAlignment="Left" Width="792"/>

</Grid>

这就是我执行它时的样子：

红色部分应与特定行内的内容具有相同的颜色。

希望你能帮助我

【问题讨论】：

您的数据模板几乎相同。我建议您只使用一个数据模板并根据项目类型选择颜色，请参见例如this answer。然后，您可以为整个 ListViewItem 设置一个样式 - 而不是硬编码的红色，它将使用基于项目类型的颜色。

标签： c# wpf xaml binding styling

【解决方案1】：

您可以通过将ListViewItem 的HorizontalContentAlignment 设置为Stretch 来使ItemTemplate 填充可用空间，并将其中的一些填充移至数据模板：

<Style TargetType="{x:Type ListViewItem}">
    <Setter Property="Background" Value="Red"></Setter>
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Padding" Value="0" />
</Style>

<DataTemplate DataType="{x:Type model:Image}">
    <Border Background="Blue" Padding="4,1">
        <StackPanel Orientation="Horizontal">
            <Image Source="{DynamicResource ImgIcon}"></Image>
            <Label Content="Filename:"></Label>
            <Label Content="{Binding Name}"></Label>
            <Label Content="Size:"></Label>
            <Label Content="{Binding Size}"></Label>
        </StackPanel>
    </Border>
</DataTemplate>
<DataTemplate DataType="{x:Type model:Text}">
    <Border Background="Green" Padding="4,1">
        <StackPanel Orientation="Horizontal">
            <Image Source="{DynamicResource TextIcon}"></Image>
            <Label Content="Filename:"></Label>
            <Label Content="{Binding Name}"></Label>
            <Label Content="Size:"></Label>
            <Label Content="{Binding Size}"></Label>
        </StackPanel>
    </Border>
</DataTemplate>

【讨论】：

@Lukas Méndez Duus：你试过这个吗？

【解决方案2】：

在 ListView 上设置 HorizontalContentAlignment="Stretch"。

您还应该利用网格行和列将项目限制在单独的区域中。避免使用边距来放置，边距和填充应该用于定义元素之间的间隙，而不是它们的绝对位置。

【讨论】：