WPF Toile, comment ajouter des enfants de façon dynamique avec MVVM code derrière

Exigence:

De dessiner une Image Bitmap (de 1024 x 1024 pixels) et le rectangle(s) basé sur la collecte de points. Le rectangle doit correspondre exactement sur les pixels de l'emplacement sur l'image. Il y a aussi un texte doivent être ajoutés à l'intérieur du rectangle.

L'Image sera toujours un seul et rectangles seront ajoutées dynamiquement.

Solution Actuelle:

Ont une toile avec Contrôle de l'Image. Ajouter la dynamique de code dans le fichier code-behind ViewImageResult.xaml.cs.

    private void DrawResult(int left, int right, int width, int height)
    {
        Border bord = new Border();
        bord.BorderThickness = new Thickness(1);
        bord.BorderBrush = Brushes.Red;
        bord.Width = width;
        bord.Height = height;
        _mainCanvas.Children.Add(bord);
        Canvas.SetLeft(bord, left);
        Canvas.SetTop(bord, right);
    }

Question:

Depuis j'ai suivi le pattern MVVM, la collecte des points du rectangle est dans mon ViewModel fichier ViewImageResultModel.cs. Je ne suis pas en mesure d'ajouter de l'enfant rectangle de façon dynamique à partir de ce Dernier fichier.

Toute aide est très appréciée.

Merci d'avance

InformationsquelleAutor Sathya Ram | 2011-05-06
  1. 47

    ItemsControl est votre ami:

    <Grid>
    <Image Source="..."/>
    <ItemsControl ItemsSource="{Binding Points}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemContainerStyle>
            <Style>
                <Setter Property="Canvas.Left" Value="{Binding X}"/>
                <Setter Property="Canvas.Top" Value="{Binding Y}"/>
            </Style>
        </ItemsControl.ItemContainerStyle>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="Red" BorderThickness="1" Width="{Binding Width}" Height="{Binding Height}"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

    Ci-dessus suppose que votre VM expose une collection de points via un Points bien, et que chaque point de VM a X, Y, Width, et Height propriétés.

    • Merci Beaucoup Kent. Qui fonctionne fabuleux avec petit changement <Toile IsItemsHost="True" />
    • Qui... qui est tout simplement magnifique.
    InformationsquelleAutor Kent Boogaart
  2. 0

    Ajouté IsItemsHost="True" à la Canvas de Kent solution:

    <Grid>
    <Image Source="..."/>
    <ItemsControl ItemsSource="{Binding Points}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas  IsItemsHost="True"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemContainerStyle>
            <Style>
                <Setter Property="Canvas.Left" Value="{Binding X}"/>
                <Setter Property="Canvas.Top" Value="{Binding Y}"/>
            </Style>
        </ItemsControl.ItemContainerStyle>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="Red" BorderThickness="1" Width="{Binding Width}" Height="{Binding Height}"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>
    • Le gentil de penser a propos de la saisie contre parler, c'est que lorsque vous vous rendez compte de votre erreur, vous n'avez pas à frapper "Ajouter un Commentaire"...
    InformationsquelleAutor Sathya Ram