如何設定的目標圖像上方的標籤對象Xamarin形成

Question

我嘗試了幾種解決方案，但低於仍然存在，那我也做了測試： first solution

<RelativeLayout x:Name="locationLayout" Grid.Row="0" Grid.Column="0" VerticalOptions="End" HorizontalOptions="End"> 
    <Image x:Name="locationIcon"/> 
    <Label Text="Posizione" x:Name="posizioneLabel" TextColor="#fff" HorizontalTextAlignment="Center" FontSize="Medium"></Label> 
</RelativeLayout> 

我想，標籤高於圖像，我必須做出懸停效果。

你可以找到一個解決方案，動態的圖像仍然是底部的標籤對象？

Answer 1

你可以嘗試把對象在同一Grid

<Grid> 
    <Image x:Name="locationIcon"/> 
    <Label Text="Posizione" x:Name="posizioneLabel" TextColor="#fff" HorizontalTextAlignment="Center" FontSize="Medium"></Label> 
</Grid> 

，這會使得在背面的圖像和ontop的頂部

Answer 2

回答

的最佳方式水平居中文本要做到這一點，就要在C＃代碼隱藏中創建視圖，因爲在代碼隱藏中，我們可以利用使用Func來動態調整我們的UI大小，並將UI與其他元素相對齊。

這個堆棧溢出後有關於如何在Xamarin.Forms中心UI元素的詳細信息：

Xamarin.Forms: How to center views using Relative Layout? `Width` and `Height` return -1

示例代碼

using System; 

using Xamarin.Forms; 

namespace SampleApp 
{ 
    public class App : Application 
    { 
     public App() 
     { 
      var floatingLabel = new Label 
      { 
       Text = "This Label Is Centered" 
      }; 

      var circleImage = new Image 
      { 
       Source = "circle" 
      }; 

      var relativeLayout = new RelativeLayout(); 

      Func<RelativeLayout, double> getfloatingLabelHeight = (p) => floatingLabel.Measure(relativeLayout.Width, relativeLayout.Height).Request.Height; 
      Func<RelativeLayout, double> getfloatingLabelWidth = (p) => floatingLabel.Measure(relativeLayout.Width, relativeLayout.Height).Request.Width; 

      Func<RelativeLayout, double> getCircleImageHeight = (p) => circleImage.Measure(relativeLayout.Width, relativeLayout.Height).Request.Height; 
      Func<RelativeLayout, double> getCircleImageWidth = (p) => circleImage.Measure(relativeLayout.Width, relativeLayout.Height).Request.Width; 

      relativeLayout.Children.Add(circleImage, 
       Constraint.RelativeToParent(parent => parent.Width/2 - getCircleImageWidth(parent)/2), 
       Constraint.RelativeToParent(parent => parent.Height/2 - getCircleImageHeight(parent)/2) 
      ); 
      relativeLayout.Children.Add(floatingLabel, 
       Constraint.RelativeToView(circleImage, (parent, view) => view.X + getCircleImageWidth(parent)/2 - getfloatingLabelWidth(parent)/2), 
       Constraint.RelativeToView(circleImage, (parent, view) => view.Y + getCircleImageHeight(parent)/2 - getfloatingLabelHeight(parent)/2) 
      ); 

      MainPage = new ContentPage { Content = relativeLayout }; 
     } 
    } 
}