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

本文关键字：控件 选择 用户 动态 | 更新日期: 2023-09-27 18:35:25

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

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

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

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

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

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

谢谢。

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

我没有

时间挖掘一个完整的工作解决方案，所以这主要是建议的集合。

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

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

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

相关文章：