要素を重ねる方法

Question

私は4つの要素を持っています：1つのゲージと3つのテキストラベル。次のように

そのブロックのXAMLは、次のとおりです：

しかし私は、私の現在の製品はこのようになり、それらはゲージの中心を中心としているように、水平にテキストラベルを揃えるにしようとしています

<Grid Margin="0 283 0 0"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="83*"/> 
        <ColumnDefinition Width="149*"/> 
       </Grid.ColumnDefinitions> 
       <lvc:Gauge x:Name="FreeSpaceGauge" Height="85" 
        Uses360Mode="True" 
        From="0" To="100" Foreground="White" 
        HighFontSize="60" 
        InnerRadius="70" GaugeActiveFill="{DynamicResource PrimaryHueMidBrush}" Margin="-3,-31,3,33" Grid.ColumnSpan="2"> 
        <lvc:Gauge.GaugeRenderTransform> 
         <TransformGroup> 
          <RotateTransform Angle="90"></RotateTransform> 
          <ScaleTransform ScaleX="1"></ScaleTransform> 
         </TransformGroup> 
        </lvc:Gauge.GaugeRenderTransform> 
       </lvc:Gauge> 
       <TextBlock Name="FreeSpaceText" Foreground="Gray" FontWeight="Medium" FontSize="20" Width="Auto" Margin="10,-2,65,64" Grid.Column="1" /> 
       <TextBlock Name="FreeSpaceText_Used" Text="USED" Foreground="Gray" FontWeight="Thin" FontSize="15" Width="Auto" Margin="12,24,63,38" Grid.Column="1" /> 
       <TextBlock Name="FreeSpaceText_Available" Foreground="Gray" FontSize="15" Width="Auto" Margin="70,84,50,-22" Grid.ColumnSpan="2" /> 
      </Grid> 

どのように私は希望の中心配置を達成することができますか？

Answer 1

は通常、あなたが正確な実行を知っている必要がありますので、あなたが、彼らは（水平および/または垂直方向）を中心にしたい場合は特に、WPF要素の（すなわちMarginを使用して）、静的なポジショニングを使用するには良い選択ではないことあなたの要素をあらかじめ配置している要素の相対的な位置と大きさ。さらに、その位置とサイズのどちらかが一定である必要があります（これにより、将来の調整が本当の苦痛になります）か、醜いバインディングを設定することになります。

許可されることもありますが、幸いなことに、適切なコンテナ（Panel秒）とHorizontalAlignmentとVerticalAlignmentの値を組み合わせると、簡単に達成できます。私は希望のレイアウトを得ることに関連していないプロパティを省略さと、このコードはできるだけMCVEの多くを構成するようにEllipseであなたのGaugeコントロールを交換しました：

<StackPanel> 
    <Grid> 
     <Ellipse Stroke="LightBlue" StrokeThickness="16" Width="100" Height="100" /> 
     <StackPanel VerticalAlignment="Center"> 
      <TextBlock Text="0%" HorizontalAlignment="Center" /> 
      <TextBlock Text="USED" HorizontalAlignment="Center" /> 
     </StackPanel> 
    </Grid> 
    <TextBlock Text="8 EB free" HorizontalAlignment="Center" /> 
</StackPanel> 

は、ここでそれが実際にどのように見えるかです：

ここでコードを分解しましょう。最初に、2つのテキストが1つのパーセント値を表示し、もう1つの文字列が "USED"という文字列を水平に中央に配置するようにします。TextBlockをHorizontalAlignment="Center"で2つ作成して、StackPanelを上から下に並べます。 （StackPanelはOrientationプロパティを持ち、デフォルト値はVerticalです）。その部分をゲージ上に表示し、垂直に中央に表示します。したがって、ゲージとStackPanelは、Gridの前に並んで配置し、StackPanelにVerticalAlignment="Center"を設定します（ただし、列や行は定義しません）。最後に、その部分の下にテキストがいくつか必要なので、再びTextBlock（HorizontalAlignment="Center"）をStackPanelに入れて、ボイラー！

StackPanelを変更することで、部品全体を配置することができます。アライメントを設定し、適切なコンテナを使用することをお勧めしますが、Marginプロパティを使用することもできます。

Answer 2

Grx70はすでにかなり良いと小さな解決策を投稿しています。コントロールの配置方法と場所を少しだけ制御したい場合は、ネストされたグリッドを少し深めてください。

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="85" /> 
     <RowDefinition Height="Auto" /> 
    </Grid.RowDefinitions> 

    <Border x:Name="FreeSpaceGauge" Height="85" Width="85" BorderBrush="Black" BorderThickness="15" CornerRadius="50" /> 

    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="Auto" /> 
      <RowDefinition Height="Auto" /> 
      <RowDefinition Height="*" /> 
     </Grid.RowDefinitions> 

     <TextBlock Name="FreeSpaceText" Text="0%" Foreground="Gray" FontWeight="Medium" FontSize="20" Width="Auto" 
        VerticalAlignment="Center" HorizontalAlignment="Center" 
        Grid.Row="1"/> 
     <TextBlock Name="FreeSpaceText_Used" Text="USED" Foreground="Gray" FontWeight="Thin" FontSize="15" Width="Auto" 
        VerticalAlignment="Center" HorizontalAlignment="Center" 
        Grid.Row="2"/> 
    </Grid> 

    <TextBlock Name="FreeSpaceText_Available" Text="8 EB free" Foreground="Gray" FontSize="15" Width="Auto" Grid.Row="1" 
       VerticalAlignment="Center" HorizontalAlignment="Center"/> 
</Grid> 

あなたのアレンジメントには余計な余白がたくさんあります。そのため、このコントロールを配置することは困難です。