包含中心路径的 3x3 网格填充整个网格

Question

我在 ItemsControl 中使用了以下 ControlTemplate。它本质上是一个 3x3 网格，中间有一个路径，顶部有一个文本框/文本块。当我使用它时，路径会占用 ItemsControl 中的所有空间，并忽略列/行定义约束。谁能告诉我为什么会这样？我尝试将路径包装在画布中，但这似乎没有帮助。

谢谢！

<controls:Toolbox x:Key="DrawingShapeTemplates"
                  DefaultItemSize="60, 60"
                  SnapsToDevicePixels="True"
                  ScrollViewer.HorizontalScrollBarVisibility="Disabled">

    <ItemsControl.Items>
        <Path Style="{StaticResource Square}"
              ToolTip="Square Shape">

            <controls:DesignerItem.MoveThumbTemplate>
                <ControlTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="1*" />
                            <RowDefinition Height="3*" />
                            <RowDefinition Height="1*" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="1*" />
                            <ColumnDefinition Width="3*" />
                            <ColumnDefinition Width="1*" />
                        </Grid.ColumnDefinitions>

                        <StackPanel Grid.Column="1">
                            <TextBlock Text="Length" />
                            <TextBox MinWidth="{Binding RelativeSource={RelativeSource AncestorType=controls:DesignerItem}, Path=ActualWidth}" />
                        </StackPanel>

                        <Canvas  Grid.Column="1"
                                 Grid.Row="1">
                            <Path Style="{StaticResource Square_DragThumb}" />
                        </Canvas>
                    </Grid>
                </ControlTemplate>
            </controls:DesignerItem.MoveThumbTemplate>
        </Path>
    </ItemsControl.Items>

</controls:Toolbox>

风格。

<Style x:Key="Square"
       TargetType="Path"
       BasedOn="{StaticResource StandardShapeStyle}">
    <Setter Property="Data">
        <Setter.Value>
            <RectangleGeometry Rect="50 50 50 50" />
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="Square_DragThumb"
       TargetType="Path"
       BasedOn="{StaticResource Square}">
    <Setter Property="IsHitTestVisible"
            Value="True" />
    <Setter Property="Fill"
            Value="Transparent" />
    <Setter Property="Stroke"
            Value="Transparent" />
</Style>

编辑

源代码是从这里enter link description here 下载的。如果您将第 469 行的 <Path Style="{StaticResource Decision}" 替换为以下内容，您将得到与我相同的结果。

        <Path Style="{StaticResource Decision}"
              ToolTip="Decision">
            <s:DesignerItem.MoveThumbTemplate>
                <ControlTemplate>

                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="1*" />
                            <RowDefinition Height="3*" />
                            <RowDefinition Height="1*" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="1*" />
                            <ColumnDefinition Width="3*" />
                            <ColumnDefinition Width="1*" />
                        </Grid.ColumnDefinitions>

                        <StackPanel Grid.Column="1">
                            <TextBlock Text="Length" />
                            <TextBox MinWidth="{Binding RelativeSource={RelativeSource AncestorType=s:DesignerItem}, Path=ActualWidth}" />
                        </StackPanel>
                        <Path Grid.Column="1"
                              Grid.Row="1"
                              Style="{StaticResource Decision_DragThumb}" />
                    </Grid>
                </ControlTemplate>
            </s:DesignerItem.MoveThumbTemplate>
        </Path>

以下是我要完成的工作以及实际结果的图片。我想在选定项目的所有四个边上显示一个标签和一个文本框。最终，标签/文本框的可见性将数据绑定到 DesignerItem.IsSelected 依赖属性，但尚未连接。

预期结果：

实际结果：

Answer 1

默认情况下，Canvas 会剪辑其子项，因此您需要将其显式设置为 ClipToBounds="True"

例如

<Canvas  Grid.Column="1"
         Grid.Row="1"
         ClipToBounds="True">
    <Path Style="{StaticResource Square_DragThumb}" />
</Canvas>

更新

将line 469处FlowChartSymbols.xaml中的Path元素替换为以下Grid

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <StackPanel Grid.Column="1">
            <TextBlock Text="Length" HorizontalAlignment="Center"/>
            <TextBox />
            <StackPanel.Style>
                <Style TargetType="StackPanel">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType=s:DesignerItem}}" 
                                     Value="{x:Null}">
                            <Setter Property="Visibility" Value="Collapsed"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </StackPanel.Style>
        </StackPanel>
        <Path Style="{StaticResource Decision}" 
            Grid.Row="1" Grid.Column="1"
            ToolTip="Decision">
            <s:DesignerItem.MoveThumbTemplate>
                <ControlTemplate>
                    <Path Style="{StaticResource Decision_DragThumb}" />
                </ControlTemplate>
            </s:DesignerItem.MoveThumbTemplate>
        </Path>
    </Grid>

这就是您实现相同目标的方法。还修复了工具箱问题，通过添加触发器来检测它是在设计器项目内还是仅仅在工具箱中