MVVM and Databinding with UniformGrid - wpf

Question

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>
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?
Thanks in advance.

Answer 1

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;
}
}