將標簽大小調整為換行文本

試圖格式化 2 個標簽。標簽應該代表標題和價值。他們應該在右下角有位置。在平板電腦上一切看起來都很好，但在手機上需要包裝“價值”。無法容納第一行換行文本的空間仍然存在。

所以最后，文本格式看起來很奇怪。文本無法容納的空白空間。在這種情況下，我可以想象第二個標簽的大小會調整為在線最長文本的大小...

<StackLayout Orientation="Horizontal" HorizontalOptions="End" VerticalOptions="End">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Label
            Grid.Column="0"
            BackgroundColor="Bisque"
            FontSize="Medium"
            Text="Version of Co.:"
            HorizontalOptions="EndAndExpand"/>

        <Label
            Grid.Column="1"
            BackgroundColor="BlanchedAlmond"
            HorizontalOptions="End"
            HorizontalTextAlignment="Start"
            FontSize="Medium"
            Text="This is vereverevery longversiontitle."/>
    </Grid>
        
    
</StackLayout>

當我將第二個標簽上的水平文本對齊設定為“開始”時，結果將如下所示，我將再次有奇怪的空白空間。

對于不需要換行的短文本，整個布局看起來不錯，就像我想要的：

更新： 預期行為：

uj5u.com熱心網友回復：

只需在網格中再添加一列，

并將標簽的位置分別更改為1、2。

<StackLayout Orientation="Horizontal" HorizontalOptions="End" VerticalOptions="End">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Label
            Grid.Column="1"
            BackgroundColor="Bisque"
            FontSize="Medium"
            Text="Version of Co.:"
            HorizontalOptions="EndAndExpand"/>

        <Label
            Grid.Column="2"
            BackgroundColor="BlanchedAlmond"
            HorizontalOptions="End"
            HorizontalTextAlignment="Start"
            FontSize="Medium"
            Text="This is vereverevery longversiontitle."/>
    </Grid>
        
    
</StackLayout>

uj5u.com熱心網友回復：

• 將外部 StackLayout 設定Orientation為Vertical.

• 將額外的列添加到網格，并在其上設定精確的寬度值。

• 將標簽設定HorizontalTextAlignment為End.

示例代碼

    <StackLayout Orientation="Vertical" HorizontalOptions="End" VerticalOptions="End">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="30" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <Label
                Grid.Column="1"
                BackgroundColor="Bisque"
                FontSize="Medium"
                Text="Version of Co.:"
                HorizontalOptions="EndAndExpand"
                HorizontalTextAlignment="End"/>

            <Label 
                Grid.Column="2"
                BackgroundColor="BlanchedAlmond"    
                HorizontalOptions="End"
                HorizontalTextAlignment="End"
                FontSize="Medium"
                Text="This is vereverevery   longversiontitle."/>
        </Grid>
    </StackLayout>

標籤：css xml 沙马林

上一篇：WPFXAML系結中的自動欄位更新-簡單示例不起作用

下一篇：如何為GridRowDefinition高度變化設定影片（當Height="Auto"時）