Bagaimanakah saya boleh memaparkan segi empat tepat secara dinamik dalam aplikasi WPF menggunakan corak MVVM?

Gunakan mod MVVM untuk memaparkan segi empat tepat dalam aplikasi WPF

Dalam aplikasi WPF, anda mungkin perlu menambah satu set segi empat tepat mengikut data. Ini boleh dilaksanakan oleh Model Model-View-View Model (MVVM).

Pertimbangkan model pandangan, yang mengandungi koleksi segi empat tepat abstrak yang ditunjukkan oleh objek

:

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>

dalam pandangan, anda boleh menggunakan

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

dengan

Canvas untuk memaparkan koleksi ini: ItemsPanel ItemsControl

Kaedah lain adalah menggunakan

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

bukannya mengikat dalam setter gaya:

RenderTransform

Dengan menggunakan teknologi ini, anda boleh memaparkan satu set segi empat tepat berdasarkan data yang disimpan dalam model paparan, untuk menyediakan antara muka pengguna tindak balas yang fleksibel dan cepat. Kedua -dua kaedah ini dapat mencapai paparan segi empat tepat yang dinamik, dan anda boleh memilih yang lebih sesuai mengikut keperluan khusus.

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

Atas ialah kandungan terperinci Bagaimanakah saya boleh memaparkan segi empat tepat secara dinamik dalam aplikasi WPF menggunakan corak MVVM?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!