キャンバスボトム不足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に任意の適切な添付プロパティを見つけることができませんでした。

の中には、要素がさまざまな付着プロパティを使用して配置されています。相対パネルは、パネルの下部に子を配置するために、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を参照してください。