MVVMを使用してWPFキャンバスに複数の長方形を動的に追加する方法は？

MVVMモードを使用して、WPFキャンバスに任意の数の長方形を動的に追加します

はじめに このガイドは、MVVMアーキテクチャモードに複数の長方形を追加して、WPFアプリケーションのメインウィンドウに複数の長方形を追加する方法の問題を解決します。ビューモデルの長方形リストの抽象表現を使用する方法と、Canvas Itemspanel、ItemContainersStyle、ItemTemplateのアイテムコントロールを使用する方法を調べて、これらの長方形を動的に表示します。

モデル設計を表示

長方形の要約を管理するために、これらのオブジェクトのコレクションを含むビューモデルを定義します。

実装を表示

ビューでは、itemsControlを使用して長方形のコレクションを視覚化します。

ビューモデルでバインド

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

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

itemcontrolのitemsSourceプロパティは、ビューモデルのrectitemsプロパティにバインドされています。長方形のキャンバスおよびcanvas.topプロパティは、データバインディングを介してそれぞれの長方形オブジェクトのxおよびy属性に設定されます。

代替方法

<code class="language-xml"><ItemsControl ItemsSource="{Binding RectItems}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="FrameworkElement">
            <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を使用して、長方形を動的に見つけることができます。

結論

この方法では、任意の数の長方形をWPFキャンバスに動的に追加し、データバウンドビューモデルを介してそれらを管理することで、MVVMアプリケーションの柔軟性とメンテナンスを改善できます。

以上がMVVMを使用してWPFキャンバスに複数の長方形を動的に追加する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。