如何使用MVVM模式在WPF應用程序中動態顯示矩形？

使用MVVM模式在WPF應用程序中動態顯示矩形

在WPF應用程序中，您可能需要根據運行時數據動態添加一組矩形。這可以通過模型-視圖-視圖模型(MVVM)模式來實現。

考慮一個視圖模型，其屬性包含一個抽象表示為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>

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

在視圖中，您可以使用帶有Canvas ItemsPanel的ItemsControl來顯示此集合：

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

另一種方法是使用RenderTransform而不是樣式設置器中的綁定：

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

通過使用這些技術，您可以根據視圖模型中保存的數據動態顯示一組矩形，從而提供靈活且響應迅速的用戶界面。 這兩種方法都能有效實現動態矩形顯示，您可以根據具體需求選擇更合適的一種。

以上是如何使用MVVM模式在WPF應用程序中動態顯示矩形？的詳細內容。更多資訊請關注PHP中文網其他相關文章！