對齊 label 和條目，使條目自動調整寬度並在 xamarin forms 中右對齊

Question

我正在嘗試創建一個 label 旁邊的條目，我正在嘗試實現以下效果（我的條目將邊框設置為透明，這就是它下面沒有線條的原因） ：

在條目文本和 label 文本都對齊的情況下，隨着輸入更多數字並將“£”符號向左移動，條目應該向左“增長”，這是迄今為止我能做到的最好的：

這是使用代碼：

<StackLayout Orientation="Horizontal" Grid.Row="0" Grid.Column="1">
      <Label HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" Text="£" FontSize="20" FontFamily="{StaticResource RobotoLight}" TextColor="#C7C7C7" Grid.Column="0"/>
      <controls:BorderlessEntry Text="{Binding Income.MonthlyIncome}" WidthRequest="80" HorizontalOptions="EndAndExpand" PlaceholderColor="#C7C7C7" Placeholder="0" VerticalOptions="CenterAndExpand" FontSize="20" FontFamily="{StaticResource RobotoLight}" TextColor="#C7C7C7" Grid.Column="1"/>
 </StackLayout>

但是盡管兩者都居中，但條目文本略高於 label 文本，我也無法弄清楚如何使條目根據文本擴展寬度，或者如何將其對齊到右側（或堆棧布局端）。

我知道我在這里將 3 個問題捆綁在一起，所以如果有人可以幫助解決其中的 1 個問題，那將是一個很大的幫助。

Answer 1

我使用簡單的 Entry 和 Label 進行測試，您可以使用Horizo ntalOptions 屬性並設置為EndAndExpand或End以讓 label 和 Entry 右對齊，例如：

<StackLayout Orientation="Horizontal">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

        </Grid>
        <StackLayout Grid.Column="0"   VerticalOptions="Start" HeightRequest="60">
            <Label  Text="Monthly Income" VerticalOptions="CenterAndExpand"></Label>
        </StackLayout>

        <StackLayout Grid.Column="1"  Orientation="Horizontal"  HorizontalOptions="FillAndExpand" VerticalOptions="Start"  HeightRequest="60" >
            <Label HorizontalOptions="EndAndExpand" VerticalOptions="Center" Text="£" FontSize="20"  TextColor="#C7C7C7" />
            <Entry  PlaceholderColor="#C7C7C7" HorizontalOptions="End" WidthRequest="100" VerticalOptions="Center" FontSize="18"  TextColor="#C7C7C7" />
        </StackLayout>

</StackLayout>

效果如下：

並使條目自動調整寬度，也許您應該使用自定義渲染器來實現它

Answer 2

因此，為了使條目在您提到的左側增長，您可以嘗試將 HorizontalOptions 作為 EndAndExpand 賦予 StackLayout、Label 和 Entry。

同樣對於“條目文本略高於 label 文本”，您可以從底部到 Label 提供一些邊距。 像Margin="0,0,0,5"一樣，您可以嘗試使用 3,4,5 最適合 Margin。 發生這種情況是因為條目邊框設置為透明，所以它在那里但不可見。

如果您還有其他問題，請告訴我。