帆布底部缺少 uwp答案

【问题标题】：canvas bottom missing uwp帆布底部缺少 uwp
【发布时间】：2017-03-21 09:03:55
【问题描述】：

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

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

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

【问题讨论】：

标签： xaml uwp winrt-xaml uwp-xaml

【解决方案1】：

如何在底部的画布中放置一个孩子？

Canvas是一个布局面板，支持uwp中子元素相对于canvas左上角的绝对定位。通过指定x和y坐标来控制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);
      }
  }

我也没有在 relativepanel 中找到任何合适的附加属性来将 child 定位在 relative 面板的底部。

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

【讨论】：