在用户控件上动态选择矩形答案

【问题标题】：dynamic selecting rectangles over usercontrols在用户控件上动态选择矩形
【发布时间】：2016-02-19 21:34:34
【问题描述】：

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

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

每个放入 Page 的对象都实现了 ISelect 接口。页面具有 ObservableCollection 类型的 SelectedElements，它包含对所有当前选定元素的引用。

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

我对如何做到这一点没有什么想法：

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

谢谢。

【问题讨论】：

搜索装饰器（可视化选择）。或者，如果您更喜欢单独的选择，那么您可以在 Border（使用数据模板）中托管每个视觉对象，而不是直接将视觉对象添加到 Canvas，其可见性绑定到该视觉对象的视图模型的 IsSelected 属性。
嗨。感谢您的快速回复。你的方法有什么例子吗？

标签： c# wpf xaml mvvm itemscontrol

【解决方案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 答案，其中 ItemsControl 用于支持绑定）。

您的选择例程必须对元素进行命中测试并设置/重置其IsSelected 属性，该属性将显示边框。参见here 了解如何绘制全选矩形。

【讨论】：