Bagaimana cara menambah secara dinamik dan kedudukan segi empat tepat pada kanvas WPF menggunakan MVVM?

secara dinamik menambah segi empat tepat pembolehubah dengan MVVM pada kanvas WPF

Matlamat artikel ini adalah untuk menjadikan beberapa segi empat tepat pada kanvas MainWindow, tanpa perlu mengetahui kuantiti yang tepat pada masa runtime. Ini memerlukan kaedah yang fleksibel untuk menggunakan prinsip MVVM.

Rectangle abstrak dalam ViewModel menunjukkan

Buat model pandangan yang mentakrifkan abstraksi segi empat tepat, termasuk koordinat x, y dan saiznya.

paparan dengan itemcontrol dan kanvas

<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 : INotifyPropertyChanged
{
    public ObservableCollection<RectItem> RectItems { get; set; } = new ObservableCollection<RectItem>();

    // INotifyPropertyChanged implementation (required for data binding)
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}</code>

Di MainWindow, buat itemControl, iaitu itemspanel sebagai kanvas. ItemSControl akan terikat pada koleksi Rectitems dalam model View.

Melalui tetapan ini, bilangan segi empat tepat yang diberikan pada kanvas akan ditentukan oleh bilangan rektum dalam model paparan. Dengan perubahan koleksi model paparan, kanvas akan dikemas kini secara automatik untuk mencerminkan segi empat tepat baru. Sila ambil perhatian bahawa untuk menjadikan data mengikat kerja biasa, ViewModel perlu melaksanakan antara muka

. Pelaksanaan antara muka telah ditambah kepada contoh kod.

<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}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="FrameworkElement">
            <Setter Property="Canvas.Left" Value="{Binding X}" />
            <Setter Property="Canvas.Top" Value="{Binding Y}" />
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl></code>

Dalam untuk menambah

contoh untuk INotifyPropertyChanged koleksi, anda boleh menambah secara dinamik semasa runtime.

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