Add n rectangles to canvas with MVVM in WPF

Question

I want to add a set of rectangles to the main window of my mvvm application. In my viewModel I\'ve got a collection of objects which I convert to System.Windows.Shapes.Recta

Answer 1

In a proper MVVM approach you would have a view model with an abstract representation of a list of rectangles, e.g. like this:

public class RectItem
{
    public double X { get; set; }
    public double Y { get; set; }
    public double Width { get; set; }
    public double Height { get; set; }
}

public class ViewModel
{
    public ObservableCollection<RectItem> RectItems { get; set; }
}

Then you would have a view that uses an ItemsControl to visualize a collection of such Rect items. The ItemsControl would have a Canvas as its ItemsPanel and an appropriate ItemContainerStyle and ItemTemplate which each bind to the appropriate view model properties. It might look like this:

<ItemsControl ItemsSource="{Binding RectItems}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Canvas.Left" Value="{Binding X}"/>
            <Setter Property="Canvas.Top" Value="{Binding Y}"/>
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Rectangle Width="{Binding Width}" Height="{Binding Height}" Fill="Black"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

---

An alternative without Bindings in Style Setters (which don't work in UWP) might look like this:

<ItemsControl ItemsSource="{Binding RectItems}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Rectangle Width="{Binding Width}" Height="{Binding Height}" Fill="Black">
                <Rectangle.RenderTransform>
                    <TranslateTransform X="{Binding X}" Y="{Binding Y}"/>
                </Rectangle.RenderTransform>
            </Rectangle>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Answer 2

You can bind the collection of rectangles to an ItemControl and set its height, width and margin:

<ItemsControl  ItemsSource="{Binding Path=RectangleCollection,Mode=TwoWay}">
    <ItemsControl.ItemTemplate>
        <DataTemplate >
            <Canvas>
                <Rectangle Stroke="Black" Heigth={some converter} Width={some converter} Margin={Some Converter}>
            </Canvas>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemControl>

Just an idea to get you started...