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

Dalam mod MVVM WPF, tambahkan segi empat tepat ke kanvas

Penerangan Masalah

Anda ingin menjana dan memaparkan satu siri segi empat tepat dalam kanvas dalam aplikasi MVVM. Bilangan segi empat tepat tidak diketahui semasa runtime, dan anda memerlukan penyelesaian yang cekap untuk menambahkannya ke kanvas.

Penyelesaian

<.> 1. Abstrak Petunjuk:

Buat viewModel, yang mengandungi representasi abstrak senarai segi empat tepat, contohnya:

<.> 2. XAML bermaksud:

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

Di MainWindow anda, buat kanvas sebagai bekas segi empat tepat:

<.> 3. Data mengikat:

mengikat koleksi

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

di ViewModel ke atribut

. Ini secara automatik akan menghasilkan segi empat tepat untuk setiap item dalam koleksi.

<.> 4. Gaya mengikat (pilihan):

RectItems ItemsControl Anda boleh memilih untuk menggunakan gaya mengikat, tetapkan ItemsSource dan

atribut mengikut atribut X dan Y setiap item segi empat tepat.

<.> 5. Skim alternatif (tiada gaya mengikat):

Jika gaya terikat pada persekitaran anda (seperti UWP), anda boleh menggunakan transformasi rendering dalam templat segi empat tepat: Canvas.Left Canvas.Top

Melalui kaedah ini, anda boleh menambah dan memaparkan segi empat tepat dalam data data ViewModel, tanpa mengira bilangan segi empat tepat yang sedang berjalan.

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