3x3 Grid containing a Path in the center fills the entire grid

问题

I have the following ControlTemplate that I am using in an ItemsControl. It is essentially a 3x3 Grid with a Path in the center and a Textbox/Textblock on top of it. When I use this, the Path takes up all of the space within the ItemsControl, and ignores the column/row definition constraints. Can anyone tell me why this is happening? I tried wrapping the Path in a Canvas but that didn't seem to help.

Thanks!

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

The Style.

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

Edit

The source for this was downloaded from hereenter link description here. If you replace the <Path Style="{StaticResource Decision}" at line 469 with the following, you will get the same result that I do.

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

The following are pictures of what I am trying to accomplish and what the actual result is. I want to display a label and a text box on all four sides of the selected item when it is selected. Ultimately the label/textbox visibility will be databound to the DesignerItem.IsSelected dependency property, but that hasn't been wired up yet.

Expected result:

Actual result:

回答1:

Typically Canvas do to clip it's children by default so you need to set it explicitly as ClipToBounds="True"

eg

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

Update

Replace the Path element in FlowChartSymbols.xaml at line 469 with the following 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>

this is how you can achieve the same. also fixed toolbox issue by adding a trigger to detect if it is inside a designer item or simply in a toolbox

来源：https://stackoverflow.com/questions/24706878/3x3-grid-containing-a-path-in-the-center-fills-the-entire-grid