MVVM和使用UniformGrid的数据绑定 [英] MVVM and Databinding with UniformGrid

问题描述

我正在尝试使用一些矩形为WPF图表的背面设置样式。我正在使用MVVM，并且我需要矩形的大小均一。通过Xaml定义时，它的固定 BucketCount为4：

I'm trying to style the back of a WPF chart with some rectangles. I'm using MVVM, and I need the rectangles to be uniformly sized. When defined via Xaml, this works with a fixed "BucketCount" of 4:

<VisualBrush>
  <VisualBrush.Visual>
  <UniformGrid Height="500" Width="500" Rows="1" Columns="{Binding BucketCount}">
    <Rectangle Grid.Row="0" Grid.Column="0" Fill="#22ADD8E6" />
    <Rectangle Grid.Row="0" Grid.Column="1" Fill="#22D3D3D3"/>
    <Rectangle Grid.Row="0" Grid.Column="2" Fill="#22ADD8E6"/>
    <Rectangle Grid.Row="0" Grid.Column="3" Fill="#22D3D3D3"/>
  </UniformGrid>        
 </VisualBrush.Visual>
<VisualBrush>

如何绑定矩形的ObservableCollection？ UniformGrid上没有 ItemsSource属性。我需要使用ItemsControl吗？如果是这样，我该怎么办？

How can I bind my ObservableCollection of Rectangles? There is no "ItemsSource" property on UniformGrid. Do I need to use an ItemsControl? If so, how can I do this?

预先感谢。

推荐答案

您可以使用ItemsControl这样进行绑定。一个简单的示例，其中ItemsSource只是一个 ObservableCollection< Brush>

You could use ItemsControl to Bind like this. Simple example where ItemsSource is just an ObservableCollection<Brush>

<VisualBrush>
    <VisualBrush.Visual>
        <ItemsControl x:Name="itemsControl" ItemsSource="{Binding MyBrushes}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Height="500" Width="500" Rows="1"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Rectangle Fill="{Binding}"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </VisualBrush.Visual>
</VisualBrush>

更新

适用于我的使用场景，但我可能在这里错过了一些东西。这是我尝试过的完整代码。

Update
It works for my usage scenario, but I might be missing something here. Here's the full code I've tried. I get the same result from both

MainWindow.xaml

<Grid>
    <Grid.Background>
        <VisualBrush>
            <VisualBrush.Visual>
                <ItemsControl x:Name="itemsControl" ItemsSource="{Binding MyBrushes}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <UniformGrid Height="500" Width="500" Rows="1"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Rectangle Fill="{Binding}"/>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
                <!--<UniformGrid Height="500" Width="500" Rows="1" Columns="4">
                    <Rectangle Grid.Row="0" Grid.Column="0" Fill="#22ADD8E6" />
                    <Rectangle Grid.Row="0" Grid.Column="1" Fill="#22D3D3D3"/>
                    <Rectangle Grid.Row="0" Grid.Column="2" Fill="#22ADD8E6"/>
                    <Rectangle Grid.Row="0" Grid.Column="3" Fill="#22D3D3D3"/>
                </UniformGrid>-->
            </VisualBrush.Visual>
        </VisualBrush>
    </Grid.Background>
</Grid>

MainWindow.xaml.cs

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        BrushConverter brushConverter = new BrushConverter();
        MyBrushes = new ObservableCollection<Brush>();
        MyBrushes.Add(brushConverter.ConvertFrom("#22ADD8E6") as Brush);
        MyBrushes.Add(brushConverter.ConvertFrom("#22D3D3D3") as Brush);
        MyBrushes.Add(brushConverter.ConvertFrom("#22ADD8E6") as Brush);
        MyBrushes.Add(brushConverter.ConvertFrom("#22D3D3D3") as Brush);
        this.DataContext = this;
    }

    public ObservableCollection<Brush> MyBrushes
    {
        get;
        set;
    }
}

这篇关于MVVM和使用UniformGrid的数据绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！