Bagaimana secara dinamik menambah beberapa segi empat tepat ke kanvas WPF menggunakan MVVM?

Gunakan mod MVVM untuk menambahkan secara dinamik bilangan segi empat tepat dalam kanvas WPF

Pengenalan

Panduan ini akan menyelesaikan masalah cara menambah beberapa segi empat tepat ke mod seni bina MVVM untuk menambah beberapa segi empat tepat ke tetingkap utama aplikasi WPF. Kami akan meneroka cara menggunakan perwakilan abstrak senarai segi empat tepat dalam model paparan, serta cara menggunakan itemcontrol dari kanvas itempanel, itemContainersStyle dan itemTemplate untuk memaparkan secara dinamik segi empat tepat ini.

Lihat Reka Bentuk Model

Untuk menguruskan abstrak segi empat tepat, tentukan model paparan, yang mengandungi koleksi objek rektum.

Lihat pelaksanaan

Dalam pandangan, gunakan itemControl untuk memvisualisasikan koleksi segi empat tepat:

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

diikat dengan model paparan

Property Itemtontrol's ItemsSource terikat kepada harta Rectitems dalam model View. Canvas.Left dan Canvas.Top sifat segi empat tepat ditetapkan ke atribut X dan Y dari objek rektum masing -masing melalui pengikatan data.

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

kaedah alternatif

Sebagai variasi, anda boleh menggunakan RenderTransform dalam templat segi empat tepat untuk mencari segi empat tepat secara dinamik:

Kesimpulan

Kaedah ini membolehkan anda menambah secara dinamik mana -mana nombor mana -mana nombor ke kanvas WPF dan menguruskannya melalui model paparan data, dengan itu meningkatkan fleksibiliti dan penyelenggaraan aplikasi MVVM.

Atas ialah kandungan terperinci Bagaimana secara dinamik menambah beberapa segi empat tepat ke kanvas WPF menggunakan MVVM?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!