在用户控件上动态选择矩形
dynamic selecting rectangles over usercontrols
让我先说明问题。我想在 Canvas 周围实现包装器(让我称之为页面),它将在实际选择的 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 {}
然后是可视化元素的数据模板(我不能给你转换器代码,但你可以换成另一个,看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
个元素绑定到canvas(这很棘手,参见this答案,其中ItemsControl
用于支持绑定)。
您的选择例程必须命中测试元素和 set/reset 它们的 IsSelected
属性,这将显示边框。有关如何绘制整体选择矩形的信息,请参阅 here。
让我先说明问题。我想在 Canvas 周围实现包装器(让我称之为页面),它将在实际选择的 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 {}
然后是可视化元素的数据模板(我不能给你转换器代码,但你可以换成另一个,看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
个元素绑定到canvas(这很棘手,参见this答案,其中ItemsControl
用于支持绑定)。
您的选择例程必须命中测试元素和 set/reset 它们的 IsSelected
属性,这将显示边框。有关如何绘制整体选择矩形的信息,请参阅 here。