如何在XAML中繪制細分數據綁定矩形？

Question

我正在創建一個根據映射配置文件顯示表行的應用程序。 現在，我有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>

謝謝！

Answer 1

這是我在需要繪制網格時使用的解決方案，讓我們看看解決方案是否符合您的所有需求。 沒有簡單的方法來繪制矩形的內部線條，或者至少我不知道它的內部線條。 如果您認為問題稍有不同，可以通過第二個屏幕輕松實現結果。

當我從第二個屏幕看一個數字時，我看到了什么？

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

問題變成：如何使用單個矩形繪制內部網格並設置平鋪效果？

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

ViewModel tileRect屬性返回一個Rect因為您無法綁定Rect對象的Width和Height屬性。

結果：輸入：x = 100，y = 50，高度= 222，寬度= 398，numTablesTall = 2，numTablesWide = 4