C#와 Uno Plastiform으로 만든 찌개 시어머니가 스펀지에 맞게.

며칠 전 탕시어머니는 UWP와 Web Assiembly를 사용해 안드로이드와 iOS에 대응할 수 있었지만 대응하지 않았다. 스펀지 스펀지 문제에 대응하기 어려웠기 때문이다.
하지만 안드로이드와 iOS가 대응해도 핸드폰에서 WebAssiembly가 보이죠 orz
그래서 대응이 안 되면 붕괴가 돼요!아니면 아이폰X에서 보면 실망스러워 보인다고 해서 고치고 싶어요.
마지막 기사: C#에서 Windows 응용 프로그램과 WebAssiembly를 사용해 탕시어머니(MVM 사용하지 않음)
시탕할머니: 탕파

현상

어느 정도 크기가 있으면 이런 느낌으로 표현할 수 있어요.

폭이 작아지면 왼쪽 하단의 주의사항과 오른쪽 계약서가 덮여 버튼을 누를 수 없는 경우도 있다.

(탕할머니의 카리스마가 넘친다.)

대응 방침

따라서 왼쪽 상단의 대사 부분과 오른쪽 상단의 리셋 버튼은 문제가 없는 듯 아래 요소만 대응하면 된다.이번에는 간단하게 폭이 작을 때 주의사항을 아래의 가로로 표시하고 계약서에 표시하고자 합니다.
아래의 느낌을 목표로 한다.

그러면 폭이 좁아지면 디스플레이를 전환하고, UWP 문서의 화면 크기와 단점에 있는 작은 화면은 폭이 640픽셀 이하로 정의되는데, 이보다 작으면 레이아웃을 바꾸고 싶다.
참조: 화면 크기 및 브레이크
현재 Grid라는 열과 줄을 정의하고 그곳에서 제어를 설정하는 레이아웃 패널을 사용하지만, 부드러운 느낌으로 만들 때 제어 사이의 상대적인 위치에서 레이아웃을 하는 Relative Panel을 사용하면 비교적 쉽기 때문에 패널을 교체할 수 있다.
그리고 Adaptivitigger를 사용하면 화면 크기에 따라 화면의 요소 속성을 바꿀 수 있기 때문에 그걸로 지면 설정을 바꾸고 싶습니다.스펀지처럼 느껴지는 화면을 UWP로 만들 때의 정석이다.
참조: XAML의 회전 레이아웃

이루어져라

먼저 Grid 는 RelativePanel 을 원합니다.같은 포석을 재현하면 이런 느낌의 XAML이 된다.

<UserControl
    x:Class="Yubaba.Uno.AppShell"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:infra="using:Yubaba.Uno.Infrastructures"
    xmlns:local="using:Yubaba.Uno"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:prism="using:Prism.Regions"
    d:DesignHeight="300"
    d:DesignWidth="400"
    mc:Ignorable="d">

    <RelativePanel>
        <Image
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Source="ms-appx:///Assets/Background.jpg"
            Stretch="UniformToFill" />
        <Border
            Margin="10"
            Padding="10"
            Background="{StaticResource RegionBackgroundBrush}"
            RelativePanel.AlignRightWithPanel="True"
            RelativePanel.AlignTopWithPanel="True">
            <ContentControl prism:RegionManager.RegionName="{x:Bind infra:RegionNames.CommandRegion}" />
        </Border>
        <Border
            Margin="10"
            Padding="10"
            Background="{StaticResource RegionBackgroundBrush}">
            <ContentControl prism:RegionManager.RegionName="{x:Bind infra:RegionNames.LogRegion}" />
        </Border>
        <Border
            Margin="10"
            Padding="10"
            Background="{StaticResource RegionBackgroundBrush}"
            RelativePanel.AlignBottomWithPanel="True"
            RelativePanel.AlignRightWithPanel="True">
            <ContentControl prism:RegionManager.RegionName="{x:Bind infra:RegionNames.ContractRegion}" />
        </Border>
        <Border
            Margin="10"
            Padding="10"
            Background="{ThemeResource SystemControlAcrylicElementBrush}"
            RelativePanel.AlignBottomWithPanel="True"
            RelativePanel.AlignLeftWithPanel="True">
            <TextBlock Foreground="{ThemeResource SystemAccentColorDark3}" Style="{StaticResource BodyTextBlockStyle}">
                <Run Text="この湯婆婆の画像は" />
                <Hyperlink NavigateUri="http://www.ghibli.jp/works/chihiro/">スタジオジブリのサイト</Hyperlink>
                <Run Text="で配布されているものを使用しています。" />
            </TextBlock>
        </Border>
    </RelativePanel>
</UserControl>

UWP 실행을 통해 모양새를 확인합니다.Grid에서 RelativePanel로 바뀌는 것도 마찬가지다.예쁘다.
개발 과정에서 Uno Plaatform이 Windows 로컬 응용 프로그램으로 실행되고 있는지 확인할 수 있어 편리하다.이렇게 말하면 크로스플랫폼이 있다고 생각하지만 플랫폼이 바뀌면 외관에 변화가 있을 수 있기 때문에 최종 확인 시 실제 플랫폼을 대상으로 구축 확인을 해야 한다는 점은 변하지 않는다.

그런 다음 Adaptivitigger를 사용하여 화면 크기에 따라 레이아웃 정의를 변경합니다.이번 신용 표시와 계약 부분은 기본적으로 레이아웃 디자인을 설정하지 않습니다. Adaptivitighter에서는 조건이 일치할 때 레이아웃 디자인의 속성을 변경합니다.

<UserControl
    x:Class="Yubaba.Uno.AppShell"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:infra="using:Yubaba.Uno.Infrastructures"
    xmlns:local="using:Yubaba.Uno"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:prism="using:Prism.Regions"
    d:DesignHeight="590"
    d:DesignWidth="1118"
    mc:Ignorable="d">

    <RelativePanel>
        <Image
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Source="ms-appx:///Assets/Background.jpg"
            Stretch="UniformToFill" />
        <Border
            Margin="10"
            Padding="10"
            Background="{StaticResource RegionBackgroundBrush}"
            RelativePanel.AlignRightWithPanel="True"
            RelativePanel.AlignTopWithPanel="True">
            <ContentControl prism:RegionManager.RegionName="{x:Bind infra:RegionNames.CommandRegion}" />
        </Border>
        <Border
            Margin="10"
            Padding="10"
            Background="{StaticResource RegionBackgroundBrush}">
            <ContentControl prism:RegionManager.RegionName="{x:Bind infra:RegionNames.LogRegion}" />
        </Border>
        <Border
            x:Name="ContractRegion"
            Margin="10"
            Padding="10"
            Background="{StaticResource RegionBackgroundBrush}">
            <ContentControl prism:RegionManager.RegionName="{x:Bind infra:RegionNames.ContractRegion}" />
        </Border>
        <Border
            x:Name="CreditRegion"
            Margin="10"
            Padding="10"
            Background="{ThemeResource SystemControlAcrylicElementBrush}">
            <TextBlock Foreground="{ThemeResource SystemAccentColorDark3}" Style="{StaticResource BodyTextBlockStyle}">
                <Run Text="この湯婆婆の画像は" />
                <Hyperlink NavigateUri="http://www.ghibli.jp/works/chihiro/">スタジオジブリのサイト</Hyperlink>
                <Run Text="で配布されているものを使用しています。" />
            </TextBlock>
        </Border>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <!--  幅が 640 以上の時にこの Visual State になる  -->
                        <AdaptiveTrigger MinWindowWidth="640" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <!--  クレジットを左下に表示  -->
                        <Setter Target="CreditRegion.(RelativePanel.AlignLeftWithPanel)" Value="True" />
                        <Setter Target="CreditRegion.(RelativePanel.AlignRightWithPanel)" Value="False" />
                        <Setter Target="CreditRegion.(RelativePanel.AlignBottomWithPanel)" Value="True" />

                        <!--  契約書を右下に表示  -->
                        <Setter Target="ContractRegion.(RelativePanel.AlignBottomWithPanel)" Value="True" />
                        <Setter Target="ContractRegion.(RelativePanel.AlignRightWithPanel)" Value="True" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState>
                    <VisualState.StateTriggers>
                        <!--  640 より小さいとき  -->
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <!--  クレジット表記を下に幅いっぱいに表示する  -->
                        <Setter Target="CreditRegion.(RelativePanel.AlignLeftWithPanel)" Value="True" />
                        <Setter Target="CreditRegion.(RelativePanel.AlignRightWithPanel)" Value="True" />
                        <Setter Target="CreditRegion.(RelativePanel.AlignBottomWithPanel)" Value="True" />

                        <!--  契約書をクレジット表記の上に右寄せで右寄せで表示する  -->
                        <Setter Target="ContractRegion.(RelativePanel.Above)" Value="CreditRegion" />
                        <Setter Target="ContractRegion.(RelativePanel.AlignRightWithPanel)" Value="True" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </RelativePanel>
</UserControl>

실행하면 배치는 다음 크기에 따라 달라집니다.

아이폰X로 확인

그럼 수중에 문제가 있는 아이폰으로 표시해.먼저 처리하기 전에는 이런 느낌이에요.

이번 대응에 가세했다면 이렇게 됐을 거야.예쁘다.

총결산

UWP의 스펀지 대응 기능을 사용해 찌개 시어머니가 좁은 화면에서도 잠시 움직일 수 있도록 했다.RelativePanel 및 Adaptive Trigger를 사용하여 치수에 따라 레이아웃을 쉽게 변경할 수 있습니다.
그래서 오늘 이맘때 나는 스펀지 패드에 대응할 수 있다면 안드로이드와 iOS를 대상으로 하는 프로젝트를 취소해야 한다고 후회했다.