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

Question

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

谢谢！

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

<强>更新

使用以下Path替换FlowChartSymbols.xaml line 469中的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>

这是你如何实现同样的目标。还修复了工具箱问题，方法是添加一个触发器来检测它是在设计器项目内还是仅仅在工具箱中