在ListView中显示的不仅仅是文本？

Question

我有一个用于管理团队的UI，它由一个名称和两种颜色（以及其他东西）组成。我希望ListView（左侧）显示名称，主色的样本以及每行的二级色样。我是WPF和数据绑定的新手，我不确定从哪里开始。

当前

目标：

相关代码：

Team.cs

public class Team : INotifyPropertyChanged
{
    private string _name;
    private Color _color;
    private Color _secondaryColor;

    public string name { ... }
    public Color color { ... }
    public Color secondaryColor { ... }

    public event PropertyChangedEventHandler PropertyChanged;

    public Team(string name, Color color, Color secondaryColor)
    {
        _name = name;
        _color = color;
        _secondaryColor = secondaryColor;
    }

    protected void OnPropertyChanged(string propertyName) { ... }
}

SettingsWindow.xaml.cs

public SettingsWindow()
{
    teams = TeamManager.Instance().teamList;
    this.DataContext = this.teams;
    if (!Application.Current.Resources.Contains("selectedTeam"))
        Application.Current.Resources.Add("selectedTeam", selectedTeam);
    InitializeComponent();
}

SettingsWindow.xaml

<ListView ItemsSource="{Binding}" Grid.Column="0" Grid.Row="1" DisplayMemberPath="name"
          SelectionChanged="ListTeamSelected" SelectionMode="Single">

    <!-- I'm guessing it'll go somewhere in the ItemContainerStyle,
         but I'm not sure if that's correct or how to do it -->

    <!--<ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="Foreground" Value="{Binding color}" />
        </Style>
    </ListView.ItemContainerStyle>-->
</ListView>

TeamManager.cs

public class TeamList : ObservableCollection<Team>
{
    public TeamList() : base() { }
}

一如既往，非常感谢任何帮助！

Answer 1

查看ItemTemplate property。您可以指定DataTemplate并在此处写入xaml以指定布局。然后，您可以执行此类操作，因为每个DataContext的{​​{1}}将映射到您指定为ListViewItem的内容。

ItemSource

编辑：请注意删除<ListView.ItemTemplate> <DataTemplate> <StackPanel> <TextBlock Name="{Binding name}"/> <Rectangle Fill="{Binding color}"/> <!-- etc --> </StackPanel> </DataTemplate> </ListView.ItemTemplate> 属性。

Answer 2

您可以使用ItemTemplate：

<ListView ItemsSource="{Binding}" Grid.Column="0" Grid.Row="1"
      SelectionChanged="ListTeamSelected" SelectionMode="Single">
    <ListView.ItemTemplate>
        <DataTemplate>
            <WrapPanel>
                <TextBlock Text="{Binding name}" Margin="5"/>
                <Rectangle Fill="{Binding color, Converter="{StaticResource colorFixer}}" Width="25" Margin="5"/>
                <Rectangle Fill="{Binding secondaryColor, Converter="{StaticResource colorFixer}}" Width="25" Margin="5"/>
            </WrapPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

但是你不能使用Color as Fill（或Border for Border）你必须先将它转换为Brush。为此，您可以按如下方式创建转换器：

public class ColorFixer : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return new SolidColorBrush((Color)value);
    }

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

最后将其添加到您的xaml资源中：

<conv:ColorFixer x:Key="colorFixer"/>

确保已包含转换器类的命名空间：

<Window    
     ...
     xmlns:conv="clr-namespace:WpfApplication1"

修改

您可以避免使用转换器，只需使用以下代码：

<ListView ItemsSource="{Binding}" Grid.Column="0" Grid.Row="1"
      SelectionChanged="ListTeamSelected" SelectionMode="Single">
    <ListView.ItemTemplate>
        <DataTemplate>
            <WrapPanel>
                <TextBlock Text="{Binding name}" Margin="5"/>
                <Rectangle Width="25" Margin="5">
                    <Rectangle.Fill>
                        <SolidColorBrush Color="{Binding color}"/>
                    </Rectangle.Fill>
                </Rectangle>
                <Rectangle Width="25" Margin="5">
                    <Rectangle.Fill>
                        <SolidColorBrush Color="{Binding secondaryColor}"/>
                    </Rectangle.Fill>
                </Rectangle>
            </WrapPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>