web-dev-qa-db-ja.com

WPF Canvas、MVVMコードを使用して子を動的に追加する方法

要件：

ポイントのコレクションに基づいて1つのビットマップイメージと長方形を描画します。長方形は、画像上のピクセルの位置に正確に合う必要があります。長方形の内側に追加する必要のあるテキストもあります。

画像は常に1つだけで、長方形は動的に追加されます。

現在のソリューション：

Image Controlを備えたキャンバスを用意します。動的コードを、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パターンに従っているので、長方形のポイントのコレクションはViewModelファイルViewImageResultModel.csにあります。 ViewModelファイルから子長方形を動的に追加できません。

wpfmvvmcanvasdynamicchildren
28
Sathya Ram

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>

上記は、VMがPointsプロパティを介してポイントのコレクションを公開し、各ポイントVMがX 、Y、Width、およびHeightプロパティ。

48
Kent Boogaart

Kentのソリューションの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>
0
Sathya Ram