How can I dynamically display rectangles in a WPF application using the MVVM pattern?

Use the MVVM mode to display the rectangle in the WPF application

In WPF applications, you may need to dynamically add a set of rectangles according to the data. This can be implemented by model-view-view model (MVVM) mode.

Consider a view model, which contains a rectangular collection of an abstract indicated by the

object:

RectItem

<code class="language-csharp">public class RectItem
{
    public double X { get; set; }
    public double Y { get; set; }
    public double Width { get; set; }
    public double Height { get; set; }
}</code>

In the view, you can use

<code class="language-csharp">public class ViewModel
{
    public ObservableCollection<RectItem> RectItems { get; set; } = new ObservableCollection<RectItem>();
}</code>

with

Canvas to display this collection: ItemsPanel ItemsControl

Another method is to use

<code class="language-xml"><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 Fill="Black" Height="{Binding Height}" Width="{Binding Width}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl></code>

instead of binding in the style setter:

RenderTransform

By using these technologies, you can dynamically display a set of rectangles based on the data saved in the view model, so as to provide flexible and rapid response user interface. Both methods can effectively achieve dynamic rectangular display, and you can choose a more suitable one according to specific needs.

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

The above is the detailed content of How can I dynamically display rectangles in a WPF application using the MVVM pattern?. For more information, please follow other related articles on the PHP Chinese website!