Question

让我先说明问题。我想在Canvas周围实现包装器（让我称之为Page），它将实现选择实际选择的UIElements周围的矩形。为此我实现了ISelect接口，如下所示：

interface ISelect {
  Point Center {get; set;} //Center of selecting rectangle
  Size Dimensions {get; set;} //Dimensions of selecting rectangle
}

每个放到Page的对象都实现了ISelect接口。 Page具有ObservableCollection类型的SelectedElements，它保存对所有当前所选元素的引用。

对于SelectedElements中的每个条目，我想在它周围绘制矩形。

我几乎没有想法如何做到这一点：

每个UIElement都可以自己实现这个矩形并在选中时显示它。此选项需要新对象每次都实现此目的。所以我宁愿不使用它。
在Page中我可以在代码隐藏中创建矩形，并将它们添加到Page。它不是MVVM推荐的原则。
在页面XAML中创建一些类似ItemsControl的背后，并使用特定模板将其绑定到SelectedElements。这个选项对我来说似乎是最好的选择。请帮我这个方向。我应该以某种方式使用ItemsControl吗？

谢谢。

Answer 1

我没有时间挖掘完整的工作解决方案，所以这主要是一系列建议。

每个元素都应该有视图模型

public abstract class Element: INotifyPropertyChanged
{
    bool _isSelected;
    public bool IsSelected
    {
        get { return _isSelected; }
        set
        {
            _isSelected = value;
            OnPropertyChanged();
        }
    }
}

public class EllipseElement : Element {}
public class RectangleElement : Element {}

然后有数据模板可视化元素（我无法为您提供转换器代码，但您可以将其替换为另一个，查看here）。

    <DataTemplate DataType="{x:Type local:EllipseElement}">
        <Border Visibility="{Binding IsSelected, Converter={local:FalseToHiddenConverter}}">
            <Ellipse ... />
        </Border>
    </DataTemplate>
    <DataTemplate DataType="{x:Type local:RectangleElement}">
        <Border Visibility="{Binding IsSelected, Converter={local:FalseToHiddenConverter}}">
            <Rectangle ... />
        </Border>
    </DataTemplate>

然后将ObservableCollection个元素绑定到画布上（这很棘手，请参阅this answer，其中ItemsControl用于支持绑定）。

您的选择例程必须命中测试元素并设置/重置其IsSelected属性，这将显示边框。请参阅here，了解如何绘制整个选择矩形。

动态选择用户控件上的矩形

1 个答案: