社内SEの話

日々起きたことの記録用

Xamarin Formsでコントロールを横並びにしたときの幅

↓プログラミングで副業を考えたらこちら↓

f:id:boonv4m312s:20210329144532p:plain 絶賛初Androidアプリ開発をしています。
どうもこんにちはめじろです。
スマホ開発の開発環境を調べて開発できそうな言語がC#だけだったので、Xamarinで開発しています。
前回はエミュレーターの起動で躓いてしまいましたが、無事エミュレーターが起動できましたが、もう少し調べてから再度操作手順を書き連ねたいと思います。

さて本題
画面設計の際発生したトラブルがあまり情報がなかったので、情報を共有します。
f:id:boonv4m312s:20210329144108p:plain

発生した問題

Entryコントロールを設置するときにその左隣にコントロール名としてLabelを設置したい。
横並びにコントロールを設置する場合は比較的簡単に解決できた。
ただそのときに横並びにしたときに、Entryコントロールの幅が小さくなってしまった。
小さくなってしまったコントロールを画面幅いっぱいに広げたい

コントロールを横並びする

横並びにする場合はStackLayoutに括り、StackLayoutのOrientationプロパティを追加してあげる。

<Label Text="勾" FontSize="Title" />
<Entry x:Name="kou" Keyboard="Numeric" />

上下に表示されてしまってUIが悪い
これを横並びにしたい。

<StackLayout Orientation="Horizontal" Padding="10,20,0,0" >
    <Label Text="勾" FontSize="Title" />
    <Entry x:Name="kou" Keyboard="Numeric" />
</StackLayout>

これでStackLayout内に設置したコントロールは横並びになる
Paddingは任意に指定しています。

横並びにするとEntryコントロールが小さくなってしまう。

冷静に幅を制御しているオプションを一つずつ確認していく

<StackLayout Orientation="Horizontal" Padding="10,20,0,0" >
    <Label Text="勾" FontSize="Title" />
    <Entry x:Name="kou" Keyboard="Numeric" 
        VerticalOptions="Start" HorizontalOptions="FillAndExpand"/>
</StackLayout>

幅を広げたいコントロールに対して
VerticalOptions="Start"
HorizontalOptions="FillAndExpand"
をしてあげる。

VerticalOptions

まだ勉強不足ではあるが、多分Startで左揃えのような意味を持っていると推察
間違っていたら恐縮です。
docs.microsoft.com

HorizontalOptions

横方向の広がり方を制御していると推察
docs.microsoft.com

とりあえず上記のプロパティを設定してあげることで、目的の形にすることができた。