Различные цвета для каждого ListViewItem в зависимости от типа (WPF XAML) - PullRequest
Новая
       13

Различные цвета для каждого ListViewItem в зависимости от типа (WPF XAML)

0 голосов
/ 22 сентября 2019

Я борюсь со школьным проектом.Я делаю очень простое приложение, которое может читать содержимое выбранной папки и отображать его в 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>

Вот как это выглядит, когда я его выполняю:

Execution of the program

Красная часть должна иметь тот же цвет, что и содержимое внутри определенной строки.

Надеюсь, вы поможете мне

Ответы [ 2 ]

0 голосов
/ 23 сентября 2019

Вы можете заставить ItemTemplate заполнить доступное пространство, установив HorizontalContentAlignment для ListViewItem в Stretch и переместить некоторые отступы из него в шаблоны данных: 

<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>
0 голосов
/ 23 сентября 2019

Set HorizontalContentAlignment = "Stretch" в ListView.

Вы также должны использовать преимущества строк и столбцов сетки, чтобы ограничивать элементы в отдельных областях.Избегайте использования полей для размещения, поля и отступы должны использоваться для определения разрыва между элементами, а не их абсолютного положения.

...