web-dev-qa-db-ja.com

WPFでMVVMを使用してキャンバスにn個の長方形を追加する

Mvvmアプリケーションのメインウィンドウに長方形のセットを追加したいのですが。私のviewModelには、コンバーター（以下のコード）を使用してSystem.Windows.Shapes.Rectangleクラスに変換するオブジェクトのコレクションがあります。

ViewModel：

RecognizedValueViewModel 
{
    public ObservableCollection<BarcodeElement> BarcodeElements
    {
        get { return _BarcodeElements; }
        set { _BarcodeElements = value; }
    }

    public RecognizedValueViewModel()
    {
        BarcodeElements = InitializeBarcodeElements();
    }
}

コンバータ：

public BarcodeElementToRectangleConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        Rectangle barcodeRectangle = GetRectangleFromBarcodeElement(value as BarcodeElement);

        return barcodeRectangle;
    }
}

長方形はメインウィンドウのキャンバスに表示されます。

<Canvas x:Name="Canvas_Image_Main">
    <!-- Show rectangles here -->
</Canvas>

コードでキャンバスに長方形を追加しますが、実行時に長方形がいくつあるかはわかりません。これを達成する方法はありますか？タンクあなた。

c#wpfuser-interfacecanvasmvvm
17
Philipp Eger

適切なMVVMアプローチでは、長方形のリストの抽象的な表現を持つビューモデルがあります。このような：

public class RectItem
{
    public double X { get; set; }
    public double Y { get; set; }
    public double Width { get; set; }
    public double Height { get; set; }
}

public class ViewModel
{
    public ObservableCollection<RectItem> RectItems { get; set; }
}

次に、ItemsControlを使用して、そのようなRectアイテムのコレクションを視覚化するビューを作成します。 ItemsControlは、ItemsPanelとしてのCanvasと、適切なItemContainerStyleおよびItemTemplateを持ち、それぞれが適切なビューモデルプロパティにバインドします。次のようになります。

<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 Width="{Binding Width}" Height="{Binding Height}" Fill="Black"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

スタイルセッターにバインドがない（UWPでは機能しない）代替案は、次のようになります。

<ItemsControl ItemsSource="{Binding RectItems}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Rectangle Width="{Binding Width}" Height="{Binding Height}" Fill="Black">
                <Rectangle.RenderTransform>
                    <TranslateTransform X="{Binding X}" Y="{Binding Y}"/>
                </Rectangle.RenderTransform>
            </Rectangle>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>
57
Clemens

長方形のコレクションをItemControlにバインドし、その高さ、幅、およびマージンを設定できます。

<ItemsControl  ItemsSource="{Binding Path=RectangleCollection,Mode=TwoWay}">
    <ItemsControl.ItemTemplate>
        <DataTemplate >
            <Canvas>
                <Rectangle Stroke="Black" Heigth={some converter} Width={some converter} Margin={Some Converter}>
            </Canvas>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemControl>

始めるためのアイデア...

5
Abhinav Sharma