WPF Canvas, как динамически добавлять детей с помощью кода MVVM - PullRequest
Новая
       42

WPF Canvas, как динамически добавлять детей с помощью кода MVVM

27 голосов
/ 06 мая 2011

Требование:

Чтобы нарисовать одно растровое изображение (размером 1024 x 1024 пикселей) и прямоугольник (и) на основе набора точек.Прямоугольник должен точно соответствовать положению пикселей над изображением.Также внутри прямоугольника необходимо добавить текст.

Изображение всегда будет только одним, а прямоугольники будут добавлены динамически.

Текущее решение:

Имеютхолст с контролем изображения.Добавьте динамический код в коде файла 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);
    }

Проблема:

Поскольку я следую схеме MVVM, коллекция точек для прямоугольника находится в моем файле ViewModelViewImageResultModel.cs.Я не могу добавить дочерний прямоугольник динамически из файла ViewModel.

Любая помощь очень ценится.

Заранее спасибо

Ответы [ 2 ]

47 голосов
/ 06 мая 2011

ItemsControl ваш друг: 

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

Выше предполагается, что ваша виртуальная машина предоставляет набор точек через свойство Points, и каждая виртуальная точка имеет свойства X, Y, Width и Height.

0 голосов
/ 15 сентября 2011

В Canvas решения Кента добавлено IsItemsHost="True": 

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