canvas 底部缺少 uwp

Question

我有一个 Canvas /RelativePanel，我在我的 uwp 应用程序中用作背景 "image"。

如何在底部的 canvas 中放置一个 child？没有像wpf中那样的canvas.bottom AP。我也没有在相对面板中找到任何合适的附加属性来将 child 定位在相关面板的底部。

        <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

How can I position a child in the canvas at the bottom?

Canvas是一个布局面板，支持子元素相对于canvas左上角的绝对定位，在uwp.You控制[=31]里面元素的定位=]通过指定x和y coordinates.Since canvas是绝对定位，child内容不受panel边界的约束，所以我们可以不直接定义canvas底部的child .但是我们可以尝试手动计算位置，让子位置在canvas的底部。例如，下面的演示可以显示 canvas.

底部的图像

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);
      }
  }

I also didn't find any proper attached property in the relativepanel to position the child at the bottom of the relative panel.

内部 relative panel, elements are positioned using a variety of attached properties. Relative panel provides 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>

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

canvas 底部缺少 uwp

canvas bottom missing uwp

xaml

winrt-xaml

uwp

uwp-xaml