显示控件列表Wpf Mvvm

Question

我打算以Mvvm的方式在Wpf窗口上显示文本和颜色（图例）列表。 像这样的图像

这是我的代码

public class LegendsViewModel : NotifyPropertyChanged
{
    public Collection<Legends> LegendsDataCollection { get; set; }

    public LegendsViewModel()
    {
      LegendsDataCollection = Legends.GetLegendsCollection();
    }
}

public class Legends
{
    public string Name;
    public Brush LegendsBrush;
    public double X { get; set; }
    public double Y { get; set; }
    public double Width { get; set; }
    public double Height { get; set; }

    public static ObservableCollection<Legends> GetLegendsCollection()
    {
        var legends = new ObservableCollection<Legends>();

        legends.Add(new Legends { Name = "Failure", LegendsBrush = new SolidColorBrush(Color.FromRgb(226, 125, 40)), X = 9, Y = 250, Height = 28, Width = 36 });
        legends.Add(new Legends { Name = "Online", LegendsBrush = new SolidColorBrush(Color.FromRgb(40, 201, 226)), X = 9, Y = 285, Height = 28, Width = 36 });
        legends.Add(new Legends { Name = "Power On", LegendsBrush = new SolidColorBrush(Color.FromRgb(0, 255, 0)), X = 9, Y = 320, Height = 28, Width = 36 });
        legends.Add(new Legends { Name = "Power Off", LegendsBrush = new SolidColorBrush(Color.FromRgb(156, 169, 169)), X = 355, Y = 243, Height = 28, Width = 36 });
        legends.Add(new Legends { Name = "Error", LegendsBrush = new SolidColorBrush(Color.FromRgb(255, 0, 0)), X = 9, Y = 390, Height = 28, Width = 36 });

        return legends;
    }
}

public partial class LegendsView : UserControl
{
    public LegendsView()
    {
        InitializeComponent();
        DataContext = new LegendsViewModel();
    }
}

这是我的LegendsView.xaml代码

<Grid>
    <StackPanel x:Name="Panel" MinWidth="150">
       <ItemsControl ItemsSource="{Binding Path=LegendsDataCollection}">
          <ItemsControl.ItemsPanel>
             <ItemsPanelTemplate>
                 <Canvas />
             </ItemsPanelTemplate>
          </ItemsControl.ItemsPanel>
        <ItemsControl.ItemContainerStyle>
            <Style TargetType="ContentPresenter">
                <Setter Property="Canvas.Left" Value="{Binding Path=X}" />
                <Setter Property="Canvas.Top" Value="{Binding Path=Y}" />
            </Style>
        </ItemsControl.ItemContainerStyle>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
             <Rectangle Width="{Binding Width}" Height="{Binding Height}" Fill="{Binding LegendsBrush}"/>
            </DataTemplate>
         </ItemsControl.ItemTemplate>
       </ItemsControl>
  </StackPanel>
</Grid>

但这根本不显示任何内容，我要去哪里错了？

编辑：我使用此代码和@Clemens的建议解决了它

 <DataTemplate>
     <Grid x:Name="GridItem" Width="200">
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="{Binding Width}"/>
              <ColumnDefinition Width="Auto" />
         </Grid.ColumnDefinitions>
        <Rectangle Grid.Column="0" Height="{Binding Height}" Fill="{Binding LegendsBrush}"/>
       <TextBlock Grid.Column="1" Text="{Binding Path=Name}" Margin="15,1,0,0" />
   </Grid>
 </DataTemplate>

Answer 1

LegendsBrush不是属性，而是字段。 WPF数据绑定仅适用于公共属性。

类Legends应如下所示：

public class Legends
{
    public string Name { get; set; }
    public Brush LegendsBrush { get; set; }
    ...
}

因此，没有Fill ，没有视图。

---

为了也显示Name属性的值，您可以像这样更改DataTemplate：

<DataTemplate>
    <Grid Width="{Binding Width}" Height="{Binding Height}"
          Background="{Binding LegendsBrush}">
        <TextBlock Text="{Binding Name}"
                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</DataTemplate>