画面にスロットを角の丸い長方形として描画するアプリケーションがあります。スロットは、スロットの集合にすぎないセクションの一部になることができます。
割り当てられたスロットを視覚的にマークしたい。そこで、選択したすべてのスロットをカバーするソリッド シェイプを描きたいと思います。
選択前:
選択後:
形状は内側の境界線なしである必要があるため、結合されたジオメトリです。
私は、CombinedGeometry を選択したスロットの Datatemplate にバインドしたいと考えています。
ビューモデル
public ObservableCollection<Slot> Slots
{
get { return _slots; }
set
{
if (Equals(value, _slots)) return;
_slots = value;
DrawShape();
OnPropertyChanged();
}
}
private void DrawShape()
{
Path = new Path();
Path.Stroke = Brushes.White;
Path.StrokeThickness = 3;
var count = Slots.Count();
var combined = new CombinedGeometry();
combined.GeometryCombineMode = GeometryCombineMode.Union;
for (var i = 0; i < count; i++)
{
if (i == 0)
{
var rect1 = new Rect(Slots[i].PositionX, Slots[i].PositionY, Slots[i].Width, Slots[i].Height);
var rect2 = new Rect(Slots[i + 1].PositionX, Slots[i + 1].PositionY, Slots[i + 1].Width,
Slots[i + 1].Height);
combined.Geometry1 = new RectangleGeometry(rect1) { RadiusX = 5, RadiusY = 5 };
combined.Geometry2 = new RectangleGeometry(rect2) { RadiusX = 5, RadiusY = 5 };
}
else
{
var rect = new Rect(Slots[i + 1].PositionX, Slots[i + 1].PositionY, Slots[i + 1].Width, Slots[i + 1].Height);
combined.Geometry1 = combined.Clone();
combined.Geometry2 = new RectangleGeometry(rect) { RadiusX = 5, RadiusY = 5 };
}
}
Path.Data = combined;
}
XAML
<ItemsControl x:Name="DeclaredSections" Margin="20" ItemsSource="{Binding Path=Layout.Sections}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<!-- DATABIND MY COMBINED SHAPE -->
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>