如何對齊重疊元素

我有四個元素在使用：一個標尺和三個文本標籤。我試圖水平對齊文本標籤，使它們在儀表的中心爲中心，但是我現在的產品是這樣的：如何對齊重疊元素

該塊的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>

有關如何實現所需中心對齊的任何想法？

來源

2017-10-11 user3342256

通常這不是WPF元素一個不錯的選擇使用靜態定位（即使用Margin），特別是如果你希望它們居中（水平和/或垂直），因爲你需要知道確切的運行 - 事先定位元素的元素的時間位置和大小。此外，無論是那個位置和大小都需要保持不變（這會使未來的調整成爲真正的痛苦），或者最終導致一系列醜陋的綁定。

當然，有時這是不可避免的，但幸運的是您的特定目標是與容器的正確組合（Panel S）和HorizontalAlignment和VerticalAlignment值容易實現。我ommitted這是不是在得到所需的佈局相關屬性，取而代之的Gauge控制與Ellipse使該代碼構成儘可能多的MCVE儘可能的：

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

這裏是它的外觀在實踐中：

現在讓我們分解代碼。首先，我們需要兩行文本 - 一個顯示百分比，另一個顯示一個字符串「USED」，兩個文本均爲水平居中，因此我們創建兩個TextBlock s，其中HorizontalAlignment="Center"，並按照從上到下的順序排列在StackPanel之間（StackPanel具有Orientation屬性，默認值爲Vertical）。然後，我們希望將該部分顯示在垂直居中的儀表上。所以我們將StackPanel的壓力錶和StackPanel放在Grid中，並且在StackPanel上設置VerticalAlignment="Center"（注意我們沒有定義任何列或行）。最後，我們需要一些低於該部分的文本，所以我們再次將該部分和TextBlock（與HorizontalAlignment="Center"）放在StackPanel中，並且聲音！

現在，您只需修改外部的StackPanel即可定位整個零件 - 同樣，通過設置對齊方式和使用正確的容器，建議您也可以使用Margin屬性。

來源

2017-10-12 07:07:42 Grx70

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>

您在安排中使用了大量不必要的邊距。這使得難以安排這種控制。

來源

2017-10-12 07:11:33 UrbanEsc

如何對齊重疊元素

回答

相關問題