web-dev-qa-db-ja.com

スタックレイアウトフォームのラベルが途切れるのを防ぐ方法

2つのラベルが隣り合っています。最初のものはかなり長く、必要に応じて切り捨てられるはずです。 2番目は完全に表示されるはずです-何があっても。

これは私のコードです：

MainPage = new ContentPage {
    Content = new StackLayout {
        Orientation = StackOrientation.Horizontal,
        VerticalOptions = LayoutOptions.CenterAndExpand,
        BackgroundColor = Color.Orange,
        Padding = 10,
        Children = {
            new Label {
                Text = "The answer to life the universe and everything",
                HorizontalOptions = LayoutOptions.Start,
                LineBreakMode = LineBreakMode.TailTruncation,
                BackgroundColor = Color.Yellow,
            },
            new Label {
                Text = "42",
                HorizontalOptions = LayoutOptions.EndAndExpand,
                LineBreakMode = LineBreakMode.NoWrap,
                BackgroundColor = Color.Yellow,
            },
        },
    },
};

これは私が得るものです：

私の質問：「42」が途切れるのを防ぐにはどうすればよいですか？

現在の結果の説明： 2番目のラベルが小さすぎる理由はわかっていると思います。両方のラベルのサイズは、最初のテキストが切り捨てられる前にネゴシエートされます。したがって、最初のラベルの方がうまく処理できますが、両方のラベルを少し縮小する必要があります。

アイデア1：（スタックレイアウトではなく）相対レイアウトを試しました。ただし、これはかなり複雑なアプローチであり、iOSとAndroidでは異なる結果が得られます。だから私はもっと簡単な修正を望んでいます。

アイデア2：レイアウトまたはサイズネゴシエーションメソッドの1つをオーバーライドする必要がありますか？たぶん、「42」レイアウトはそれが望ましい幅を得るのを強制することができます。

アイデア3： iOS用のカスタムラベルレンダラーとAndroid）を思い付くことができます。これは、期待どおりにサイズネゴシエーションを処理します。

更新

「42」はほんの一例です。私の最終的なアプリでは、これは動的に変化し、異なる長さの文字列になる可能性があります。したがって、MinimumWidthRequestを設定しても、レンダリングされた文字列の幅がわからないと役に立ちません。

layoutxamarin.iosxamarin.androidxamarin.forms
13
Falko

「42」が途切れるのを防ぐにはどうすればよいですか？

「42」MinimumWidthRequestにLabelを設定して、切断されないようにすることができます。

MinimumWidthRequestの詳細については、 ドキュメント の備考セクションを参照してください。

コード例：

MainPage = new ContentPage {
    Content = new StackLayout {
        Orientation = StackOrientation.Horizontal,
        VerticalOptions = LayoutOptions.CenterAndExpand,
        BackgroundColor = Color.Orange,
        Padding = 10,
        Children = {
           new Label {
              Text = "The answer to life the universe and everything The answer to life the universe and everything",
              HorizontalOptions = LayoutOptions.Start,
              LineBreakMode = LineBreakMode.TailTruncation,
              BackgroundColor = Color.Yellow,
           },
           new Label {
              MinimumWidthRequest = 50,
              Text = "42",
              HorizontalOptions = LayoutOptions.EndAndExpand,
              LineBreakMode = LineBreakMode.NoWrap,
              BackgroundColor = Color.Yellow,
           },
       },
    },
};

結果は次のとおりです。

enter image description here

9
Mike Ma

ここでは、Gridの代わりにStackLayoutを使用できます。これはあなたの問題を解決します。

グリッド：

var grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });
0
Sharat Chandra