Question

我有一个Canvas / RelativePanel，我在我的uwp app中用作背景“image”。

如何将孩子放在底部的画布中？在wpf中没有canvas.bottom AP。我也没有在relativepanel中找到任何适当的附加属性来将孩子定位在相对面板的底部。

        <RelativePanel>
            <ContentControl ContentTemplate="{StaticResource AsterioidTemplate}" />
            <Canvas x:Name="mountain_to_bottom" HorizontalAlignment="Stretch" VerticalAlignment="Bottom">
                <Path Width="126.389" Height="326.227" Canvas.Left="272.433" Canvas.Top="28.3291" Stretch="Fill" StrokeThickness="1.33333" StrokeLineJoin="Round" Stroke="#FF23232D" Fill="#FF23232D" Data="F1 M 398.155,353.889L 273.099,186.024L 315.298,28.9958L 398.155,353.889 Z "/>
            </Canvas>
        </RelativePanel>

Answer 1

如何将孩子放在底部的画布中？

Canvas是一个布局面板，支持uwp中相对于画布左上角的子元素的绝对定位。您可以通过指定x和y坐标来控制画布内元素的位置。绝对定位，子内容不受面板边界的约束，因此我们可能无法直接在画布底部定义子项。但我们可以尝试手动计算位置，让孩子位于画布底部。例如，以下演示可以在画布底部显示图像。

XAML代码

<Canvas  Background="Pink"  x:Name="mountain_to_bottom" Height="600">
    <Path x:Name="pathelement" Width="126.389" Height="326.227" VerticalAlignment="Bottom"   Stretch="Fill" StrokeThickness="1.33333" StrokeLineJoin="Round" Stroke="#FF23232D" Fill="#FF23232D" Data="F1 M 398.155,353.889L 273.099,186.024L 315.298,28.9958L 398.155,353.889 Z "/>
</Canvas> 
<Button x:Name="btnbottom" Click="btnbottom_Click" Content="to bottom"></Button>

背后的代码

  private void btnbottom_Click(object sender, RoutedEventArgs e)
  {  
      double canvasheight = mountain_to_bottom.ActualHeight;
      if (pathelement.ActualHeight < canvasheight)
      {
          double top = canvasheight - pathelement.ActualHeight;
          pathelement.SetValue(Canvas.TopProperty, top);
      }
  }

我也没有在relativepanel中找到任何适当的附加属性，以将孩子定位在相对面板的底部。

在relative panel内，使用各种附加属性定位元素。相对面板提供RelativePanel.AlignBottomWithPanel附加属性，用于将子项放置在面板底部。

 <RelativePanel BorderBrush="Gray" BorderThickness="10">
     <Path x:Name="pathelement" RelativePanel.AlignBottomWithPanel="True"  Width="126.389" Height="326.227" VerticalAlignment="Bottom"   Stretch="Fill" StrokeThickness="1.33333" StrokeLineJoin="Round" Stroke="#FF23232D" Fill="#FF23232D" Data="F1 M 398.155,353.889L 273.099,186.024L 315.298,28.9958L 398.155,353.889 Z "/>
 </RelativePanel>

如果画布和相关面板不能很好地满足您的要求，您可以考虑其他容器。使用什么容器取决于您的布局。例如，relativePanel是一个布局容器，可用于创建没有清晰线性模式的UI;也就是说，布局不是从根本上堆叠，包装或表格，您可以自然地使用StackPanel或Grid。更多详情请参阅Layout panels。

画布底部缺少uwp

1 个答案: