如何在XAML中绘制细分数据绑定矩形？

Question

我正在创建一个根据地图配置文件显示表行的应用程序。现在，我有XAML在正确的位置显示矩形的外边界，但是我无法找到有关绘制细分线的任何信息，这些细分线在数据源中保存为numTablesWide和{{ 1}}。

这是在正确的位置绘制框的XAML

numTablesTall

谢谢！

Answer 1

这是我在需要绘制网格时使用的解决方案，让我们看看解决方案是否符合您的所有需求。没有简单的方法来绘制矩形的内部线条，或者至少我不知道它的内部线条。 如果您认为问题稍有不同，可以通过第二个屏幕轻松实现结果。

当我从第二个屏幕看到一个数字时，我看到了什么？

我看到一个矩形，它被分成几个大小相同的矩形。

问题变为：如何使用单个矩形绘制内部网格并设置平铺效果？

使用VisualBrush。您需要做的唯一额外工作是计算内部矩形的大小，这是ViewModel中的一个简单属性：

public Rect tileRect
{
    get { return new Rect(0, 0, width / numTablesWide, height / numTablesTall); }
}

使用ContentTemplate的{​​{1}}是：

VisualBrush

<DataTemplate> <Grid> <Rectangle Stroke="Black" StrokeThickness="4" Width="{Binding width}" Height="{Binding height}"> <Rectangle.Fill> <VisualBrush TileMode="Tile" Viewport="{Binding tileRect}" ViewportUnits="Absolute"> <VisualBrush.Visual> <Rectangle Stroke="Black" StrokeThickness="2" Fill="{Binding fill}" Width="{Binding tileRect.Width}" Height="{Binding tileRect.Height}" /> </VisualBrush.Visual> </VisualBrush> </Rectangle.Fill> </Rectangle> </Grid> </DataTemplate> tileRect属性返回ViewModel，因为您无法绑定Rect对象的Width和Height属性。

结果： 输入：x = 100，y = 50，高度= 222，宽度= 398，numTablesTall = 2，numTablesWide = 4