canvas bottom missing uwp

Question

我在我的uwp应用程序中使用了一个Canvas/RelativePanel作为背景“图像”。

我怎样才能将小孩放在画布的底部？没有像wpf中的canvas.bottom AP。我也没有在相关面板中找到任何适当的附加属性来将孩子定位在相关面板的底部。

 <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.You画布的左上角，通过指定控制画布内部元件的定位的x和y coordinates.Since画布是绝对的布局面板定位，子内容不受面板边界的限制，所以我们不能直接在画布底部定义子项。但是我们可以尝试手动计算位置，让小孩位于画布的底部。例如，以下演示可以在画布底部显示图像。

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。