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

debugcn 发表于 Dev

ZgHrvoje

让我先说明问题。我想在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都可以自己实现此矩形，并在选中时显示它。此选项将要求新的对象每次都执行此操作。所以我宁愿不使用它。
在Page中，我可以在代码中创建矩形，然后将它们添加到Page中。并非MVVM推荐的原则。
在Page XAML中，创建类似于ItemsControl之类的东西，并将其绑定到具有特定模板的SelectedElements。对我来说，此选项似乎是最好的选择。请朝这个方向帮助我。我应该以某种方式使用ItemsControl吗？

谢谢你。

辛纳特

我没有时间来寻找完整的工作解决方案，因此这主要是一些建议。

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

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 {}

然后是用于可视化元素的数据模板（我无法为您提供转换器代码，但您可以将其替换为其他代码，请参见此处）。

    <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元素绑定到画布（这很棘手，请参阅此答案，该ItemsControl位置用于支持绑定）。

您的选择例程必须对元素进行命中测试并设置/重置其IsSelected属性，该属性将显示边框。有关如何绘制整体选择矩形的信息，请参见此处。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。