Comment puis-je afficher dynamiquement des rectangles dans une application WPF à l'aide du modèle MVVM?

Utilisez le mode MVVM pour afficher le rectangle dans l'application WPF

Dans les applications WPF, vous devrez peut-être ajouter dynamiquement un ensemble de rectangles en fonction des données. Ceci peut être implémenté par mode Model-View-View Model (MVVM).

Considérons un modèle de vue, qui contient une collection rectangulaire d'un résumé indiqué par l'objet

:

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>

Dans la vue, vous pouvez utiliser

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

avec

Canvas pour afficher cette collection: ItemsPanel ItemsControl

Une autre méthode consiste à utiliser

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

au lieu de se lier dans le style Setter:

RenderTransform

En utilisant ces technologies, vous pouvez afficher dynamiquement un ensemble de rectangles basés sur les données enregistrées dans le modèle de vue, afin de fournir une interface utilisateur de réponse flexible et rapide. Les deux méthodes peuvent réaliser efficacement un affichage rectangulaire dynamique, et vous pouvez en choisir un plus approprié en fonction des besoins spécifiques.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!