質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Xamarin

Xamarin(ザマリン)は、iPhoneなどのiOSやAndroidで動作し、C# 言語を用いてアプリを開発できるクロスプラットフォーム開発環境です。Xamarin Studioと C# 言語を用いて、 iOS と Android の両方の開発を行うことができます。

Q&A

解決済

1回答

2313閲覧

カスタムセルのHorizontalTextAlignment = TextAlignment.Endを指定したラベルの表示位置

otaota

総合スコア30

Xamarin

Xamarin(ザマリン)は、iPhoneなどのiOSやAndroidで動作し、C# 言語を用いてアプリを開発できるクロスプラットフォーム開発環境です。Xamarin Studioと C# 言語を用いて、 iOS と Android の両方の開発を行うことができます。

0グッド

0クリップ

投稿2017/07/06 09:33

###前提・実現したいこと

添付したソースのままだと、下図のように各セルの右上に小さい文字が期待通り表示されるのですが、
イメージ説明

return new ViewCellのところをコメントアウトしている方に切り替えて、横2段組になるように表示すると、小さい文字が下の文字列の長さに合わせて表示されてしまっています。(上図のように右上に表示させたい)
イメージ説明

2段組の上の図のように右上に表示させるためにはどのようにすればよろしいでしょうか?

###該当のソースコード

using System; using System.Collections.Generic; using Xamarin.Forms; namespace XXXXX { public class Test2Page : ContentPage { struct Data { public string textA { get; set; } public string textB { get; set; } public string time { get; set; } }; public Test2Page() { var ar = new List<Data>(); ar.Add( new Data { textA = "あいうえおかきくけこ", textB = "阿", time = "1970-01-01 00:00:00", }); ar.Add( new Data { textA = "さしすせそ", textB = "伊", time = "1980-02-02 22:22:22", }); ar.Add( new Data { textA = "いろはにほへと", textB = "宇", time = "1990-03-03 03:33:33", }); var listView = new ListView { ItemsSource = ar, HasUnevenRows = true, }; listView.ItemTemplate = new DataTemplate(() => { var textA = new Label() { FontSize = 20, }; textA.SetBinding(Label.TextProperty, "textA"); var textB = new Label() { FontSize = 20, }; textB.SetBinding(Label.TextProperty, "textB"); var time = new Label() { FontSize = 10, HorizontalTextAlignment = TextAlignment.End, }; time.SetBinding(Label.TextProperty, "time"); return new ViewCell { //View = new StackLayout //{ // Orientation = StackOrientation.Horizontal, // Children = { // textB, // new StackLayout { // Children = { // time, // textA, // }, // }, // }, //}, View = new StackLayout { Children = { time, textA, textB, }, }, }; }); Content = new StackLayout { Children = { listView, }, }; } } }

###試したこと

View = new StackLayout { Children = { time, new StackLayout { Orientation = StackOrientation.Horizontal, Children = { textB, new StackLayout { Children = { textA, }, }, }, }, }, },

のように上下2段、かつ下段を左右2段に分ける方法ではうまくいくので、左右2段のままできるかの質問になります。

###補足情報(言語/FW/ツール等のバージョンなど)
Xamarin 6.3(build 864)
Mac Note Pro
OS X Yosemite(10.10.5)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

元のソースコードの場合、入れ子になっている方のStackLayoutのHorizontalOptionsをFillAndExpandに変更すると実現できます。

csharp

1View = new StackLayout 2{ 3 Orientation = StackOrientation.Horizontal, 4 Children = { 5 textB, 6 new StackLayout { 7 // ↓この行を追加 8 HorizontalOptions = LayoutOptions.FillAndExpand, 9 Children = { 10 time, 11 textA, 12 }, 13 }, 14 }, 15},

ただ、StackLayoutの入れ子はレイアウトのコストが高く、よりコストの低いGridAbsoluteLayoutを使用した方が高速になります。
同等のレイアウトをGridで再現すると以下のようなコードとなります。

csharp

1var grid = new Grid 2{ 3 ColumnDefinitions ={ 4 new ColumnDefinition{ Width = GridLength.Auto }, 5 new ColumnDefinition{ Width = GridLength.Star }, 6 }, 7 RowDefinitions = { 8 new RowDefinition{ Height = GridLength.Auto }, 9 new RowDefinition{ Height = GridLength.Auto }, 10 }, 11 RowSpacing = 0, 12 ColumnSpacing = 0, 13}; 14 15grid.Children.Add(textB, 0, 0); 16Grid.SetRowSpan(textB, 2); 17grid.Children.Add(time, 1, 0); 18grid.Children.Add(textA, 1, 1); 19 20return new ViewCell 21{ 22 View = grid, 23};

投稿2017/07/06 17:05

P3PPP

総合スコア359

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

otaota

2017/07/07 02:27

ありがとうございます。 早速試してみてどちらの方法もうまくいきました。 Gridの方が高速ということで今回はそちらを採用しようと思います。 ただ、現在、Gridを使った別パターンで似たような問題ではまっていることがあり、 (今回の質問で一緒に解決することを期待していたのですが)そちらはまだ解決しないので 簡単なサンプルを作ってまた質問させていただきたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問