4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

.NET MAUIのXAML忘備録その1

Last updated at Posted at 2023-04-27

デバイス種類ごとに違う値(サイズ等)を指定するにはOnIdiom

単行

<Frame 
    RowHeight="{OnIdiom,Desktop=100,Phone=70,Tablet=80,Default=90}"
/>

MarginやPaddingなどは','(カンマ)が邪魔するので👇のように

<Frame>
    <Frame.Margin>
        <OnIdiom x:TypeArguments="Thickness" 
                         Default="15,0,0,0"
                         Tablet="0,15,0,3"
                         Desktop="0"
                         Phone="15,0,0,5">
        </OnIdiom>
    </Frame.Margin>
</Frame>        

OS/プラットフォームごとならOnPlatform

単行

<Frame 
    WidthRequest="{OnPlatform Android=350,iOS=400,Default=600}"
/>

MarginとPadding等👇

<Frame>
    <Frame.Margin>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="0" />
            <On Platform="Android" Value="15,0,25,0" />
            <On Platform="WinUI" Value="55,0,0,10" />
            <On Platform="Default" Value="15,0,0,10" />
        </OnPlatform>
    </Frame.Margin>
</Frame>
        

MicrosoftのドキュメントでMAUI向けを見つけられませんでした。
Windows向けをどう記述すべきかわかるかた教えてほしいです。
👇はxamarinのドキュメントでOn Platform="UWP"としていますがMAUではうまく動作しないようです(?)
わかりましたら追記します。

追記
コメントいただきました。
WinUIとするそうです(私は検証できていません検証しました)。


追追記

合わせ技

OnPlatformとOnIdiom を入れ子する(Android且つスマホ・タブレット等分ける)

単行

<Frame 
    WidthRequest="{OnIdiom Phone={OnPlatform iOS=400, Android=375},Tablet=650, Default=650}"   
/>

MarginとPadding等👇

<Frame>
    <Frame.Margin>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="0,0,0,95" />
            <On Platform="Android" >
                <OnIdiom x:TypeArguments="Thickness" 
                     Tablet="20,0,20,22"
                     Phone="0,0,0,22">
                </OnIdiom>
            </On>
            <On Platform="WinUI" Value="0,0,0,50" />
            <On Platform="Default" Value="0" />
        </OnPlatform>
    </Frame.Margin>
</Frame>
4
2
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?