如何在XAML中对数据绑定的矩形进行细分？

Question

如何在XAML中对数据绑定的矩形进行细分？

5

我正在创建一个应用程序，根据地图配置文件显示表格的行。目前，我有一个XAML在正确位置显示矩形的外边界，但我找不到任何关于绘制分隔线的信息，这些分隔线在数据源中保存为numTablesWide和numTablesTall。

以下是绘制框在正确位置的XAML代码：

<ListBox.ItemContainerStyle>
    <Style TargetType="ListBoxItem">
        <Setter Property="Template">
            <!-- Selection stuff -->
        </Setter>

        <Setter Property="Canvas.Top" Value="{Binding y}"/>
        <Setter Property="Canvas.Left" Value="{Binding x}"/>

        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="Padding" Value="5"/>
        <Setter Property="Panel.ZIndex" Value="{Binding z}" />

        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Grid>
                        <Path Data="{Binding data}" Stroke="{Binding brush}" StrokeThickness="2" Stretch="Fill"/>
                        <TextBlock Text="{Binding i}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>
                </DataTemplate>
            </Setter.Value>
        </Setter>

        <Style.Triggers>
            <DataTrigger Binding="{Binding type}" Value="tableBlock">
                <Setter Property="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Grid>
                                <Rectangle Fill="{Binding fill}" Stroke="Black" StrokeThickness="5"
                                           Width="{Binding width}" Height="{Binding height}" Panel.ZIndex="50"/>
                                <TextBlock Text="{Binding id}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Grid>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</ListBox.ItemContainerStyle>

谢谢！

当前和客观的图像

- Benjin

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Novitchi S · Accepted Answer

这里是我在需要绘制网格时使用的解决方案，看看这个解决方案是否符合你的需求。没有简单的方法来绘制矩形的内部线条，或者至少我不知道有一种方法。如果你认为问题有点不同，那么有一种简单的方法可以实现从第二个屏幕中得到的结果。

当我看第二屏幕上的图形时，我看到一个被分成几个相等大小的矩形的矩形。

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

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

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

而使用 VisualBrush 的 ContentTemplate 如下：

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

< p > < code > ViewModel 的 tileRect 属性返回一个 < code > Rect ，因为您无法绑定 < code > Rect 对象的宽度和高度属性。

结果： 输入：x=100，y=50，height=222，width=398，numTablesTall=2，numTablesWide=4

Grid drawn with VisualBrush