c#-在画布中放置对象

2022-12-18 17:54:18

我正在跟一个项目I found online for diagrams一起修改它们的形状之一.目的是在“路径”几何图形周围放置一个文本框.这要归功于一些help on SO,但是现在我遇到了这个问题.

路径被包装在一个网格内,另一个网格被包装在根网格内.第二个Grid包含一系列堆栈面板,其放置在Path周围.

<!-- Square Shape -->
<Grid>
    <Grid Style="{StaticResource ShapeInputStyle}">
        <Canvas HorizontalAlignment="Center">
            <StackPanel Canvas.Top="-40"
                        Canvas.Left="-20">
                <TextBlock Text="Length"
                            HorizontalAlignment="Center" />
                <TextBox />
            </StackPanel>
        </Canvas>
        <Canvas VerticalAlignment="Center">
            <StackPanel Canvas.Left="-40"
                        Canvas.Top="-20">
                <TextBlock Text="Height"
                            HorizontalAlignment="Center" />
                <TextBox />
            </StackPanel>
        </Canvas>
        <Canvas VerticalAlignment="Center">
            <StackPanel Canvas.Right="-40"
                        Canvas.Top="-20">
                <TextBlock Text="Height"
                            HorizontalAlignment="Center" />
                <TextBox />
            </StackPanel>
        </Canvas>
        <Canvas VerticalAlignment="Center">
            <StackPanel Canvas.Bottom="-80"
                        Canvas.Left="-20">
                <TextBlock Text="Height"
                            HorizontalAlignment="Center" />
                <TextBox />
            </StackPanel>
        </Canvas>
    </Grid>
    <Path Style="{StaticResource Square}"
            x:Name="path"
            ToolTip="Decision">
        <controls:DesignerItem.MoveThumbTemplate>
            <ControlTemplate>
                <Path Style="{StaticResource Square_DragThumb}" />
            </ControlTemplate>
        </controls:DesignerItem.MoveThumbTemplate>
    </Path>
</Grid>

结果应该是这样的.实际上,它看起来确实像这样,直到我开始调整Path的大小为止.然后,路径仅在底部文本框的顶部重叠.其余的都很好

预期结果

实际结果

我使用canvas的Dependenct属性是否错误？

更新资料

我将所有内容移到了DockPanel中,而不是像注释中所建议的那样,但是最终得到了相同的结果.

这是我用于包含StackPanels的网格的样式

<Style x:Key="ShapeInputStyle"
       TargetType="Grid">
    <Setter Property="Margin"
            Value="-10 -10" />
    <Style.Triggers>
        <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType=controls:DesignerItem}}"
                     Value="{x:Null}">
            <Setter Property="Visibility"
                    Value="Collapsed" />
        </DataTrigger>

        <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType=controls:DesignerItem}, Path=IsSelected}"
                     Value="False">
            <Setter Property="Visibility"
                    Value="Hidden" />
        </DataTrigger>
    </Style.Triggers>
</Style>

更改的结果如下图所示.因此,您有一些悠久的历史,这是我试图在上面链接的SO帖子中解决的我的原始问题.最终解决方案是将StackPanels放在画布上,这是将我的问题解决在问题下方的原因.除底部画布外,它在所有画布上都可以正常工作.

更新2

我按照提供的答案进行操作,但结果不理想(实际上,昨晚我在OP中也有同样的问题).您可以在图像中看到形状开始很小.在上面提供示例项目的链接中,此模板既在工具箱*用户选择,又在画布上用于渲染/编辑.如果我设置了最小宽度/高度,那么它将在工具箱中变形.而且,围绕整个模板的装饰也不理想,因为如果装饰仅像使用画布时那样围绕形状,则将是首选.

还有其他想法吗？

用DockPanels替换画布

线框现在涵盖了整个底座.

解决方法:

干得好

这是底部面板

    <Canvas VerticalAlignment="Bottom" 
            HorizontalAlignment="Center">
        <StackPanel Canvas.Bottom="-40"
                    Canvas.Left="-20">
            <TextBlock Text="Height"
                        HorizontalAlignment="Center" />
            <TextBox />
        </StackPanel>
    </Canvas>

变化：

>在画布中将VerticalAlignment =“ Center”设置为VerticalAlignment =“ Bottom”
>在画布中添加了HorizontalAlignment =“ Center”
>在stackpanel中设置Canvas.Bottom =“-40”

结果

小费

同样,您为ShapeInputStyle创建了一种样式.您还可以将多余的元素包装到控件模板中,以使其也可重用

控制模板

<ControlTemplate x:Key="EditableSides"
                 TargetType="ContentControl">
    <Grid>
        <Grid Style="{StaticResource ShapeInputStyle}">
            <Canvas HorizontalAlignment="Center">
                <StackPanel Canvas.Top="-40"
                            Canvas.Left="-20">
                    <TextBlock Text="Length"
                               HorizontalAlignment="Center" />
                    <TextBox />
                </StackPanel>
            </Canvas>
            <Canvas VerticalAlignment="Center">
                <StackPanel Canvas.Left="-40"
                            Canvas.Top="-20">
                    <TextBlock Text="Height"
                               HorizontalAlignment="Center" />
                    <TextBox />
                </StackPanel>
            </Canvas>
            <Canvas VerticalAlignment="Center">
                <StackPanel Canvas.Right="-40"
                            Canvas.Top="-20">
                    <TextBlock Text="Height"
                               HorizontalAlignment="Center" />
                    <TextBox />
                </StackPanel>
            </Canvas>
            <Canvas VerticalAlignment="Bottom"
                    HorizontalAlignment="Center">
                <StackPanel Canvas.Bottom="-40"
                            Canvas.Left="-20">
                    <TextBlock Text="Height"
                               HorizontalAlignment="Center" />
                    <TextBox />
                </StackPanel>
            </Canvas>
        </Grid>
        <ContentPresenter />
    </Grid>
</ControlTemplate>

使用范例

    <ContentControl Template="{StaticResource EditableSides}">
        <Path Style="{StaticResource Decision}"
              ToolTip="Decision">
            <s:DesignerItem.MoveThumbTemplate>
                <ControlTemplate>
                    <Path Style="{StaticResource Decision_DragThumb}" />
                </ControlTemplate>
            </s:DesignerItem.MoveThumbTemplate>
        </Path>
    </ContentControl>

码农公寓

相关文章