在WPF中使用MVVM将n个矩形添加到画布

一尘不染

在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;
    }
}

矩形应显示在MainWindow的画布中：

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

我会在代码中将“矩形”添加到画布中，但是现在不知道在运行时有多少个矩形。有没有办法可以做到这一点？保护你。

阅读 644

2020-05-19

共1个答案

一尘不染

在适当的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与一个适当的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>

2020-05-19