SHELL Archives - icodebroker

[C#/MAUI/.NET6] Shell 엘리먼트 : 태양 일출/일몰 및 달 위상 정보 조회하기

■ Shell 엘리먼트를 사용해 태양 일출/일몰 및 달 위상 정보를 조회하는 방법을 보여준다. ▶ Platforms/Android/AndroidManifest.xml


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application
        android:allowBackup="true"
        android:icon="@android:mipmap/sym_def_app_icon"
        android:roundIcon="@mipmap/appicon_round"
        android:supportsRtl="true" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"   />
    <uses-permission android:name="android.permission.INTERNET"               />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"   />
</manifest>

<?xml version="1.0" encoding="utf-8"?>

<application

android:allowBackup="true"

android:icon="@android:mipmap/sym_def_app_icon"

android:roundIcon="@mipmap/appicon_round"

android:supportsRtl="true" />

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

<uses-permission android:name="android.permission.INTERNET" />

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

</manifest>

▶ Platforms/iOS/info.plist


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
    <dict>
        <key>LSRequiresIPhoneOS</key>
        <true/>
        <key>UIDeviceFamily</key>
        <array>
            <integer>1</integer>
            <integer>2</integer>
        </array>
        <key>UIRequiredDeviceCapabilities</key>
        <array>
            <string>arm64</string>
        </array>
        <key>UISupportedInterfaceOrientations</key>
        <array>
            <string>UIInterfaceOrientationPortrait</string>
            <string>UIInterfaceOrientationLandscapeLeft</string>
            <string>UIInterfaceOrientationLandscapeRight</string>
        </array>
        <key>UISupportedInterfaceOrientations~ipad</key>
        <array>
            <string>UIInterfaceOrientationPortrait</string>
            <string>UIInterfaceOrientationPortraitUpsideDown</string>
            <string>UIInterfaceOrientationLandscapeLeft</string>
            <string>UIInterfaceOrientationLandscapeRight</string>
        </array>
        <key>XSAppIconAssets</key>
        <string>Assets.xcassets/appicon.appiconset</string>
        <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
        <string>Need the location to display sunrise and sunset times</string>
    </dict>
</plist>

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">

<dict>

<key>LSRequiresIPhoneOS</key>

<true/>

<key>UIDeviceFamily</key>

<array>

</array>

<key>UIRequiredDeviceCapabilities</key>

<array>

</array>

<key>UISupportedInterfaceOrientations</key>

<array>

<string>UIInterfaceOrientationPortrait</string>

<string>UIInterfaceOrientationLandscapeLeft</string>

<string>UIInterfaceOrientationLandscapeRight</string>

</array>

<key>UISupportedInterfaceOrientations~ipad</key>

<array>

<string>UIInterfaceOrientationPortrait</string>

<string>UIInterfaceOrientationPortraitUpsideDown</string>

<string>UIInterfaceOrientationLandscapeLeft</string>

<string>UIInterfaceOrientationLandscapeRight</string>

</array>

<key>XSAppIconAssets</key>

<string>Assets.xcassets/appicon.appiconset</string>

<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>

<string>Need the location to display sunrise and sunset times</string>

</dict>

</plist>

▶ Platforms/MacCatalyst/info.plist


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
    <dict>
        <key>UIDeviceFamily</key>
        <array>
            <integer>1</integer>
            <integer>2</integer>
        </array>
        <key>UIRequiredDeviceCapabilities</key>
        <array>
            <string>arm64</string>
        </array>
        <key>UISupportedInterfaceOrientations</key>
        <array>
            <string>UIInterfaceOrientationPortrait</string>
            <string>UIInterfaceOrientationLandscapeLeft</string>
            <string>UIInterfaceOrientationLandscapeRight</string>
        </array>
        <key>UISupportedInterfaceOrientations~ipad</key>
        <array>
            <string>UIInterfaceOrientationPortrait</string>
            <string>UIInterfaceOrientationPortraitUpsideDown</string>
            <string>UIInterfaceOrientationLandscapeLeft</string>
            <string>UIInterfaceOrientationLandscapeRight</string>
        </array>
        <key>XSAppIconAssets</key>
        <string>Assets.xcassets/appicon.appiconset</string>
        <key>NSLocationUsageDescription</key>
        <string>Need location to display sunrise and sunset info</string>
    </dict>
</plist>

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">

<dict>

<key>UIDeviceFamily</key>

<array>

</array>

<key>UIRequiredDeviceCapabilities</key>

<array>

</array>

<key>UISupportedInterfaceOrientations</key>

<array>

<string>UIInterfaceOrientationPortrait</string>

<string>UIInterfaceOrientationLandscapeLeft</string>

<string>UIInterfaceOrientationLandscapeRight</string>

</array>

<key>UISupportedInterfaceOrientations~ipad</key>

<array>

<string>UIInterfaceOrientationPortrait</string>

<string>UIInterfaceOrientationPortraitUpsideDown</string>

<string>UIInterfaceOrientationLandscapeLeft</string>

<string>UIInterfaceOrientationLandscapeRight</string>

</array>

<key>XSAppIconAssets</key>

<string>Assets.xcassets/appicon.appiconset</string>

<key>NSLocationUsageDescription</key>

<string>Need location to display sunrise and sunset info</string>

</dict>

</plist>

[C#/MAUI/.NET6] Shell 엘리먼트 : FlyoutFooterTemplate 속성을 사용해 플라이아웃 바닥글 설정하기

■ Shell 엘리먼트의 FlyoutFooterTemplate 속성을 사용해 플라이아웃 바닥글을 설정하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:sys="clr-namespace:System;assembly=netstandard"
    xmlns:local="clr-namespace:TestProject">
    <Shell.FlyoutFooterTemplate>
        <DataTemplate>
            <Grid BackgroundColor="Black">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Label Grid.Row="0"
                    HorizontalOptions="Center"
                    FontAttributes="Bold"
                    TextColor="White"
                    Text="TestProject" />
                <Label Grid.Row="1"
                    HorizontalOptions="Center"
                    TextColor="White"
                    Text="{Binding Source={x:Static sys:DateTime.Now}, StringFormat='{0:yyyy-MM-dd HH:mm:ss}'}" />
            </Grid>
        </DataTemplate>
    </Shell.FlyoutFooterTemplate>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab
            Icon="sample1.png"
            Title="고양이/개">
            <ShellContent
                Icon="sample2.png"
                Title="고양이"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Icon="sample3.png"
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
        <ShellContent
            Icon="sample1.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
        <ShellContent
            Icon="sample2.png"
            Title="코끼리"
            ContentTemplate="{DataTemplate local:ElephantPage}" />
        <ShellContent
            Icon="sample3.png"
            Title="곰"
            ContentTemplate="{DataTemplate local:BearPage}" />
    </FlyoutItem>
    <ShellContent
        Icon="sample1.png"
        Title="정보"
        ContentTemplate="{DataTemplate local:AboutPage}" />
    <MenuItem x:Name="helpMenuItem"
        Text="도움말"
        IconImageSource="sample2.png" />
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:sys="clr-namespace:System;assembly=netstandard"

xmlns:local="clr-namespace:TestProject">

<Shell.FlyoutFooterTemplate>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Label Grid.Row="0"

HorizontalOptions="Center"

FontAttributes="Bold"

TextColor="White"

Text="TestProject" />

<Label Grid.Row="1"

HorizontalOptions="Center"

TextColor="White"

Text="{Binding Source={x:Static sys:DateTime.Now}, StringFormat='{0:yyyy-MM-dd HH:mm:ss}'}" />

</Grid>

</DataTemplate>

</Shell.FlyoutFooterTemplate>

<Tab

Icon="sample1.png"

Title="고양이/개">

<ShellContent

Icon="sample2.png"

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Icon="sample3.png"

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</Tab>

<ShellContent

Icon="sample1.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

<ShellContent

Icon="sample2.png"

Title="코끼리"

ContentTemplate="{DataTemplate local:ElephantPage}" />

<ShellContent

Icon="sample3.png"

Title="곰"

ContentTemplate="{DataTemplate local:BearPage}" />

</FlyoutItem>

<ShellContent

Icon="sample1.png"

Title="정보"

ContentTemplate="{DataTemplate local:AboutPage}" />

<MenuItem x:Name="helpMenuItem"

Text="도움말"

IconImageSource="sample2.png" />

</Shell>

TestProject.zip

[C#/MAUI/.NET6] Shell 엘리먼트 : FlyoutHeaderTemplate 속성을 사용해 플라이아웃 헤더 설정하기

■ Shell 엘리먼트의 FlyoutHeaderTemplate 속성을 사용해 플라이아웃 헤더를 설정하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <Shell.FlyoutHeaderTemplate>
        <DataTemplate>
            <Grid BackgroundColor="Black">
                <Image
                    Aspect="AspectFill"
                    Opacity="0.6"
                    Source="sample1.png" />
                <Label
                    Margin="10"
                    HorizontalTextAlignment="Center"
                    VerticalTextAlignment="Center"
                    FontAttributes="Bold"
                    TextColor="White"
                    Text="Animals" />
            </Grid>
        </DataTemplate>
    </Shell.FlyoutHeaderTemplate>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab
            Icon="sample1.png"
            Title="고양이/개">
            <ShellContent
                Icon="sample2.png"
                Title="고양이"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Icon="sample3.png"
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
        <ShellContent
            Icon="sample1.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
        <ShellContent
            Icon="sample2.png"
            Title="코끼리"
            ContentTemplate="{DataTemplate local:ElephantPage}" />
        <ShellContent
            Icon="sample3.png"
            Title="곰"
            ContentTemplate="{DataTemplate local:BearPage}" />
    </FlyoutItem>
    <ShellContent
        Icon="sample1.png"
        Title="정보"
        ContentTemplate="{DataTemplate local:AboutPage}" />
    <MenuItem x:Name="helpMenuItem"
        Text="도움말"
        IconImageSource="sample2.png" />
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<Shell.FlyoutHeaderTemplate>

<Image

Aspect="AspectFill"

Opacity="0.6"

Source="sample1.png" />

<Label

Margin="10"

HorizontalTextAlignment="Center"

VerticalTextAlignment="Center"

FontAttributes="Bold"

TextColor="White"

Text="Animals" />

</Grid>

</DataTemplate>

</Shell.FlyoutHeaderTemplate>

<Tab

Icon="sample1.png"

Title="고양이/개">

<ShellContent

Icon="sample2.png"

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Icon="sample3.png"

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</Tab>

<ShellContent

Icon="sample1.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

<ShellContent

Icon="sample2.png"

Title="코끼리"

ContentTemplate="{DataTemplate local:ElephantPage}" />

<ShellContent

Icon="sample3.png"

Title="곰"

ContentTemplate="{DataTemplate local:BearPage}" />

</FlyoutItem>

<ShellContent

Icon="sample1.png"

Title="정보"

ContentTemplate="{DataTemplate local:AboutPage}" />

<MenuItem x:Name="helpMenuItem"

Text="도움말"

IconImageSource="sample2.png" />

</Shell>

TestProject.zip

[C#/MAUI/.NET6] Shell 엘리먼트 : FlyoutContentTemplate 속성 사용하기

■ Shell 엘리먼트의 FlyoutContentTemplate 속성을 사용하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell" x:Name="shell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <Shell.FlyoutContentTemplate>
        <DataTemplate>
            <CollectionView
                BindingContext="{x:Reference shell}"
                IsGrouped="True"
                ItemsSource="{Binding FlyoutItems}">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Label
                            FontSize="18"
                            TextColor="Black"
                            Text="{Binding Title}" />
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </DataTemplate>
    </Shell.FlyoutContentTemplate>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab
            Icon="sample1.png"
            Title="고양이/개">
            <ShellContent
                Icon="sample2.png"
                Title="고양이"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Icon="sample3.png"
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
        <ShellContent
            Icon="sample1.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
        <ShellContent
            Icon="sample2.png"
            Title="코끼리"
            ContentTemplate="{DataTemplate local:ElephantPage}" />
        <ShellContent
            Icon="sample3.png"
            Title="곰"
            ContentTemplate="{DataTemplate local:BearPage}" />
    </FlyoutItem>
    <ShellContent
        Icon="sample1.png"
        Title="정보"
        ContentTemplate="{DataTemplate local:AboutPage}" />
    <MenuItem x:Name="helpMenuItem"
        Text="도움말"
        IconImageSource="sample2.png" />
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell" x:Name="shell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<Shell.FlyoutContentTemplate>

<CollectionView

BindingContext="{x:Reference shell}"

IsGrouped="True"

ItemsSource="{Binding FlyoutItems}">

<CollectionView.ItemTemplate>

<Label

FontSize="18"

TextColor="Black"

Text="{Binding Title}" />

</DataTemplate>

</CollectionView.ItemTemplate>

</CollectionView>

</DataTemplate>

</Shell.FlyoutContentTemplate>

<Tab

Icon="sample1.png"

Title="고양이/개">

<ShellContent

Icon="sample2.png"

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Icon="sample3.png"

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</Tab>

<ShellContent

Icon="sample1.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

<ShellContent

Icon="sample2.png"

Title="코끼리"

ContentTemplate="{DataTemplate local:ElephantPage}" />

<ShellContent

Icon="sample3.png"

Title="곰"

ContentTemplate="{DataTemplate local:BearPage}" />

</FlyoutItem>

<ShellContent

Icon="sample1.png"

Title="정보"

ContentTemplate="{DataTemplate local:AboutPage}" />

<MenuItem x:Name="helpMenuItem"

Text="도움말"

IconImageSource="sample2.png" />

</Shell>

TestProject.zip

[C#/MAUI/.NET6] VisualStateManager 엘리먼트 : VisualStateGroups 첨부 속성을 Shell.ItemTemplate 속성에서 사용하기

■ VisualStateManager 엘리먼트의 VisualStateGroups 첨부 속성을 Shell.ItemTemplate 속성에서 사용하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell" x:Name="shell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <Shell.ItemTemplate>
        <DataTemplate>
            <Grid HeightRequest="50">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50" />
                    <ColumnDefinition Width="*"  />
                </Grid.ColumnDefinitions>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroupList>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="Transparent" />
                                    <Setter
                                        TargetName="label"
                                        Property="Label.TextColor"
                                        Value="Black" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Selected">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="RoyalBlue" />
                                    <Setter
                                        TargetName="label"
                                        Property="Label.TextColor"
                                        Value="White" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </VisualStateManager.VisualStateGroups>
                <Image Grid.Column="0"
                    HorizontalOptions="Center"
                    VerticalOptions="Center"
                    WidthRequest="32"
                    HeightRequest="32"
                    Source="{Binding FlyoutIcon}" />
                <Label x:Name="label" Grid.Column="1"
                    VerticalTextAlignment="Center"
                    FontSize="14"
                    Text="{Binding Title}" />
            </Grid>
        </DataTemplate>
    </Shell.ItemTemplate>
    <FlyoutItem
        Icon="sample1.png"
        Title="고양이"
        FlyoutDisplayOptions="AsSingleItem">
        <ShellContent ContentTemplate="{DataTemplate local:CatPage}" />
    </FlyoutItem>
    <FlyoutItem
        Icon="sample2.png"
        Title="개"
        FlyoutDisplayOptions="AsSingleItem">
        <ShellContent ContentTemplate="{DataTemplate local:DogPage}" />
    </FlyoutItem>
    <FlyoutItem
        Icon="sample3.png"
        Title="원숭이"
        FlyoutDisplayOptions="AsSingleItem">
        <ShellContent ContentTemplate="{DataTemplate local:MonkeyPage}" />
    </FlyoutItem>
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell" x:Name="shell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<Shell.ItemTemplate>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<VisualStateManager.VisualStateGroups>

<VisualState.Setters>

<Setter

TargetName="label"

Property="Label.TextColor"

Value="Black" />

</VisualState.Setters>

</VisualState>

<VisualState.Setters>

<Setter

TargetName="label"

Property="Label.TextColor"

Value="White" />

</VisualState.Setters>

</VisualState>

</VisualStateGroup>

</VisualStateGroupList>

</VisualStateManager.VisualStateGroups>

<Image Grid.Column="0"

HorizontalOptions="Center"

VerticalOptions="Center"

WidthRequest="32"

HeightRequest="32"

Source="{Binding FlyoutIcon}" />

<Label x:Name="label" Grid.Column="1"

VerticalTextAlignment="Center"

FontSize="14"

Text="{Binding Title}" />

</Grid>

</DataTemplate>

</Shell.ItemTemplate>

<FlyoutItem

Icon="sample1.png"

Title="고양이"

FlyoutDisplayOptions="AsSingleItem">

</FlyoutItem>

<FlyoutItem

Icon="sample2.png"

Title="개"

FlyoutDisplayOptions="AsSingleItem">

</FlyoutItem>

<FlyoutItem

Icon="sample3.png"

Title="원숭이"

FlyoutDisplayOptions="AsSingleItem">

</FlyoutItem>

</Shell>

TestProject.zip

[C#/MAUI/.NET6] FlyoutItem 엘리먼트 : FlyoutDisplayOptions 속성을 AsSingleItem으로 설정하기

■ FlyoutItem 엘리먼트의 FlyoutDisplayOptions 속성을 AsSingleItem으로 설정하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell" x:Name="shell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <FlyoutItem
        Icon="sample1.png"
        Title="고양이"
        FlyoutDisplayOptions="AsSingleItem">
        <ShellContent ContentTemplate="{DataTemplate local:CatPage}" />
    </FlyoutItem>
    <FlyoutItem
        Icon="sample2.png"
        Title="개"
        FlyoutDisplayOptions="AsSingleItem">
        <ShellContent ContentTemplate="{DataTemplate local:DogPage}" />
    </FlyoutItem>
    <FlyoutItem
        Icon="sample3.png"
        Title="원숭이"
        FlyoutDisplayOptions="AsSingleItem">
        <ShellContent ContentTemplate="{DataTemplate local:MonkeyPage}" />
    </FlyoutItem>
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell" x:Name="shell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<FlyoutItem

Icon="sample1.png"

Title="고양이"

FlyoutDisplayOptions="AsSingleItem">

</FlyoutItem>

<FlyoutItem

Icon="sample2.png"

Title="개"

FlyoutDisplayOptions="AsSingleItem">

</FlyoutItem>

<FlyoutItem

Icon="sample3.png"

Title="원숭이"

FlyoutDisplayOptions="AsSingleItem">

</FlyoutItem>

</Shell>

TestProject.zip

[C#/MAUI/.NET6] FlyoutItem 엘리먼트 : FlyoutDisplayOptions 속성을 AsMultipleItems으로 설정하기

■ FlyoutItem 엘리먼트의 FlyoutDisplayOptions 속성을 AsMultipleItems으로 설정하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell" x:Name="shell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent
            Icon="sample1.png"
            Title="고양이"
            ContentTemplate="{DataTemplate local:CatPage}" />
    </FlyoutItem>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent
            Icon="sample2.png"
            Title="개"
            ContentTemplate="{DataTemplate local:DogPage}" />
    </FlyoutItem>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent
            Icon="sample3.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
    </FlyoutItem>
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell" x:Name="shell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<ShellContent

Icon="sample1.png"

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

</FlyoutItem>

<ShellContent

Icon="sample2.png"

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</FlyoutItem>

<ShellContent

Icon="sample3.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

</FlyoutItem>

</Shell>

TestProject.zip

[C#/MAUI/.NET6] Shell 엘리먼트 : BackButtonBehavior 속성을 사용해 뒤로가기 버튼 동작 설정하기

■ Shell 엘리먼트의 BackButtonBehavior 속성을 사용해 뒤로가기 버튼 동작을 설정하는 방법을 보여준다. ▶ MonkeyDetailPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MonkeyDetailPage" x:Name="contentPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Title="Monkey Detail Page"
    BackgroundColor="White"
    BindingContext="{x:Reference contentPage}">
    <Shell.BackButtonBehavior>
        <BackButtonBehavior
            IconOverride="dotnet_bot.png"
            Command="{Binding BackButtonCommand}" />
    </Shell.BackButtonBehavior>
    <StackLayout>
        <Label x:Name="label"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="CenterAndExpand"
            Text="MONKEY DETAIL PAGE" />
    </StackLayout>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.MonkeyDetailPage" x:Name="contentPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

Title="Monkey Detail Page"

BackgroundColor="White"

BindingContext="{x:Reference contentPage}">

<Shell.BackButtonBehavior>

<BackButtonBehavior

IconOverride="dotnet_bot.png"

Command="{Binding BackButtonCommand}" />

</Shell.BackButtonBehavior>

<Label x:Name="label"

VerticalOptions="CenterAndExpand"

HorizontalOptions="CenterAndExpand"

Text="MONKEY DETAIL PAGE" />

</StackLayout>

</ContentPage>

▶ MonkeyDetailPage.xaml.cs


using System.Windows.Input;

using TestProject.Models;

namespace TestProject;

/// <summary>
/// 원숭이 페이지
/// </summary>
[QueryProperty(nameof(Monkey), "monkey")]
public partial class MonkeyDetailPage : ContentPage
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Property
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 뒤로가기 버튼 명령 - BackButtonCommand

    /// <summary>
    /// 뒤로가기 버튼 명령
    /// </summary>
    public ICommand BackButtonCommand { get; private set; } = new Command
    (
        () =>
        {
            Shell.Current.Navigation.PopAsync();
        }
    );

    #endregion
    #region 원숭이 - Monkey

    /// <summary>
    /// 원숭이
    /// </summary>
    public MonkeyModel Monkey {  get; set; }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - MonkeyDetailPage()

    /// <summary>
    /// 생성자
    /// </summary>
    public MonkeyDetailPage()
    {
        InitializeComponent();
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Protected

    #region 표시시 처리하기 - OnAppearing()

    /// <summary>
    /// 표시시 처리하기
    /// </summary>
    protected override void OnAppearing()
    {
        base.OnAppearing();

        if(Monkey != null)
        {
            this.label.Text = $"MONKEY DETAIL PAGE : {Monkey.Name}, {Monkey.Time:HH:mm:ss}";
        }
        else
        {
            this.label.Text = "MONKEY DETAIL PAGE";
        }
    }

    #endregion
}

using System.Windows.Input;

using TestProject.Models;

namespace TestProject;

/// <summary>

/// 원숭이 페이지

/// </summary>

[QueryProperty(nameof(Monkey), "monkey")]

public partial class MonkeyDetailPage : ContentPage

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 뒤로가기 버튼 명령 - BackButtonCommand

/// <summary>

/// 뒤로가기 버튼 명령

/// </summary>

public ICommand BackButtonCommand { get; private set; } = new Command

(

() =>

{

Shell.Current.Navigation.PopAsync();

}

);

#endregion

#region 원숭이 - Monkey

/// <summary>

/// 원숭이

/// </summary>

public MonkeyModel Monkey { get; set; }

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MonkeyDetailPage()

/// <summary>

/// 생성자

/// </summary>

public MonkeyDetailPage()

{

InitializeComponent();

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Protected

#region 표시시 처리하기 - OnAppearing()

/// <summary>

/// 표시시 처리하기

/// </summary>

protected override void OnAppearing()

{

base.OnAppearing();

if(Monkey != null)

{

this.label.Text = $"MONKEY DETAIL PAGE : {Monkey.Name}, {Monkey.Time:HH:mm:ss}";

}

else

{

this.label.Text = "MONKEY DETAIL PAGE";

}

#endregion

}

TestProject.zip

[C#/MAUI/.NET6] Shell 엘리먼트 : BackButtonBehavior 속성을 사용해 뒤로가기 버튼 동작 설정하기

■ Shell 엘리먼트의 BackButtonBehavior 속성을 사용해 뒤로가기 버튼 동작을 설정하는 방법을 보여준다. ▶ MonkeyDetailViewModel.cs


using System.Windows.Input;

namespace TestProject.ViewModels;

/// <summary>
/// 원숭이 상세 뷰 모델
/// </summary>
public class MonkeyDetailViewModel
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Property
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 뒤로가기 버튼 명령 - BackButtonCommand

    /// <summary>
    /// 뒤로가기 버튼 명령
    /// </summary>
    public ICommand BackButtonCommand { get; private set; }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - MonkeyDetailViewModel()

    /// <summary>
    /// 생성자
    /// </summary>
    public MonkeyDetailViewModel()
    {
        BackButtonCommand = new Command
        (
            () =>
            {
                Shell.Current.Navigation.PopAsync();
            }
        );
    }

    #endregion
}

using System.Windows.Input;

namespace TestProject.ViewModels;

/// <summary>

/// 원숭이 상세 뷰 모델

/// </summary>

public class MonkeyDetailViewModel

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 뒤로가기 버튼 명령 - BackButtonCommand

/// <summary>

/// 뒤로가기 버튼 명령

/// </summary>

public ICommand BackButtonCommand { get; private set; }

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MonkeyDetailViewModel()

/// <summary>

/// 생성자

/// </summary>

public MonkeyDetailViewModel()

{

BackButtonCommand = new Command

(

() =>

{

Shell.Current.Navigation.PopAsync();

}

);

}

#endregion

}

▶ MonkeyDetailPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MonkeyDetailPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:viewmodel="clr-namespace:TestProject.ViewModels"
    Title="Monkey Detail Page"
    BackgroundColor="White">
    <ContentPage.BindingContext>
        <viewmodel:MonkeyDetailViewModel />
    </ContentPage.BindingContext>
    <Shell.BackButtonBehavior>
        <BackButtonBehavior
            IconOverride="dotnet_bot.png"
            Command="{Binding BackButtonCommand}" />
    </Shell.BackButtonBehavior>
    <StackLayout>
        <Label x:Name="label"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="CenterAndExpand"
            Text="MONKEY DETAIL PAGE" />
    </StackLayout>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.MonkeyDetailPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:viewmodel="clr-namespace:TestProject.ViewModels"

Title="Monkey Detail Page"

BackgroundColor="White">

<ContentPage.BindingContext>

<viewmodel:MonkeyDetailViewModel />

</ContentPage.BindingContext>

<Shell.BackButtonBehavior>

<BackButtonBehavior

IconOverride="dotnet_bot.png"

Command="{Binding BackButtonCommand}" />

</Shell.BackButtonBehavior>

<Label x:Name="label"

VerticalOptions="CenterAndExpand"

HorizontalOptions="CenterAndExpand"

Text="MONKEY DETAIL PAGE" />

</StackLayout>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] ShellNavigatingEventArgs 클래스 : GetDeferral 메소드를 사용해 탐색 지연 사용하기

■ ShellNavigatingEventArgs 클래스의 GetDeferral 메소드를 사용해 탐색 지연을 사용하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell" x:Name="shell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <FlyoutItem
        Route="동물"
        FlyoutDisplayOptions="AsMultipleItems">
        <Tab
            Route="국내"
            Icon="sample1.png"
            Title="국내">
            <ShellContent
                Route="고양이"
                Icon="sample2.png"
                Title="고양이"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Route="개"
                Icon="sample3.png"
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
        <ShellContent
            Route="원숭이"
            Icon="sample1.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
        <ShellContent
            Route="코끼리"
            Icon="sample2.png"
            Title="코끼리"
            ContentTemplate="{DataTemplate local:ElephantPage}" />
        <ShellContent
            Route="곰"
            Icon="sample3.png"
            Title="곰"
            ContentTemplate="{DataTemplate local:BearPage}" />
    </FlyoutItem>
    <ShellContent
        Route="정보"
        Icon="sample1.png"
        Title="정보"
        ContentTemplate="{DataTemplate local:AboutPage}" />
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell" x:Name="shell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<FlyoutItem

Route="동물"

FlyoutDisplayOptions="AsMultipleItems">

<Tab

Route="국내"

Icon="sample1.png"

Title="국내">

<ShellContent

Route="고양이"

Icon="sample2.png"

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Route="개"

Icon="sample3.png"

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</Tab>

<ShellContent

Route="원숭이"

Icon="sample1.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

<ShellContent

Route="코끼리"

Icon="sample2.png"

Title="코끼리"

ContentTemplate="{DataTemplate local:ElephantPage}" />

<ShellContent

Route="곰"

Icon="sample3.png"

Title="곰"

ContentTemplate="{DataTemplate local:BearPage}" />

</FlyoutItem>

<ShellContent

Route="정보"

Icon="sample1.png"

Title="정보"

ContentTemplate="{DataTemplate local:AboutPage}" />

</Shell>

▶ AppShell.xaml.cs


namespace TestProject;

/// <summary>
/// 앱 쉘
/// </summary>
public partial class AppShell : Shell
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - AppShell()

    /// <summary>
    /// 생성자
    /// </summary>
    public AppShell()
    {
        InitializeComponent();

        Routing.RegisterRoute("원숭이/원숭이상세", typeof(MonkeyDetailPage));
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Protected

    #region 탐색 전 처리하기 - OnNavigating(e)

    /// <summary>
    /// 탐색 전 처리하기
    /// </summary>
    /// <param name="e">이벤트 인자</param>
    protected override async void OnNavigating(ShellNavigatingEventArgs e)
    {
        base.OnNavigating(e);

        if(e.Current != null && e.Current.Location.OriginalString.StartsWith("//동물/국내/") && e.Target.Location.OriginalString.StartsWith("//동물/국내/"))
        {
            return;
        }

        ShellNavigatingDeferral deferral = e.GetDeferral();

        string result = await DisplayActionSheet("확인", "예", "아니오", "페이지를 이동하시겠습니까?");

        if(result != "예")
        {
            e.Cancel();
        }

        deferral.Complete();
    }

    #endregion
}

namespace TestProject;

/// <summary>

/// 앱 쉘

/// </summary>

public partial class AppShell : Shell

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - AppShell()

/// <summary>

/// 생성자

/// </summary>

public AppShell()

{

InitializeComponent();

Routing.RegisterRoute("원숭이/원숭이상세", typeof(MonkeyDetailPage));

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Protected

#region 탐색 전 처리하기 - OnNavigating(e)

/// <summary>

/// 탐색 전 처리하기

/// </summary>

/// <param name="e">이벤트 인자</param>

protected override async void OnNavigating(ShellNavigatingEventArgs e)

{

base.OnNavigating(e);

if(e.Current != null && e.Current.Location.OriginalString.StartsWith("//동물/국내/") && e.Target.Location.OriginalString.StartsWith("//동물/국내/"))

{

return;

}

ShellNavigatingDeferral deferral = e.GetDeferral();

string result = await DisplayActionSheet("확인", "예", "아니오", "페이지를 이동하시겠습니까?");

if(result != "예")

{

e.Cancel();

}

deferral.Complete();

}

#endregion

}

TestProject.zip

[C#/MAUI/.NET6] Shell 클래스 : OnNavigating 메소드를 사용해 뒤로가기 탐색 취소하기

■ Shell 클래스의 OnNavigating 메소드를 사용해 뒤로가기 탐색을 취소하는 방법을 보여준다. ▶ AppShell.xaml.cs


namespace TestProject;

/// <summary>
/// 앱 쉘
/// </summary>
public partial class AppShell : Shell
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - AppShell()

    /// <summary>
    /// 생성자
    /// </summary>
    public AppShell()
    {
        InitializeComponent();
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Protected

    #region 탐색 전 처리하기 - OnNavigating(e)

    /// <summary>
    /// 탐색 전 처리하기
    /// </summary>
    /// <param name="e">이벤트 발생자</param>
    protected override void OnNavigating(ShellNavigatingEventArgs e)
    {
        base.OnNavigating(e);

        // 뒤로가기 탐색을 취소한다.
        if(e.Source == ShellNavigationSource.Pop)
        {
            e.Cancel();
        }
    }

    #endregion
}

namespace TestProject;

/// <summary>

/// 앱 쉘

/// </summary>

public partial class AppShell : Shell

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - AppShell()

/// <summary>

/// 생성자

/// </summary>

public AppShell()

{

InitializeComponent();

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Protected

#region 탐색 전 처리하기 - OnNavigating(e)

/// <summary>

/// 탐색 전 처리하기

/// </summary>

/// <param name="e">이벤트 발생자</param>

protected override void OnNavigating(ShellNavigatingEventArgs e)

{

base.OnNavigating(e);

// 뒤로가기 탐색을 취소한다.

if(e.Source == ShellNavigationSource.Pop)

{

e.Cancel();

}

#endregion

}

[C#/MAUI/.NET6] Shell 클래스 : GoToAsync 메소드를 사용해 뒤로 탐색하기

■ Shell 클래스의 GoToAsync 메소드를 사용해 뒤로 탐색하는 방법을 보여준다. ▶ 예제 코드 (C#)


await Shell.Current.GoToAsync("..");

await Shell.Current.GoToAsync("../route");

await Shell.Current.GoToAsync("../../route");

await Shell.Current.GoToAsync("..");

await Shell.Current.GoToAsync("../route");

await Shell.Current.GoToAsync("../../route");

[C#/MAUI/.NET6] Routing 클래스 : RegisterRoute 정적 메소드를 사용해 상세 페이지 경로 등록하기

■ Routing 클래스의 RegisterRoute 정적 메소드를 사용해 상세 페이지 경로를 등록하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell" x:Name="shell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <FlyoutItem
        Route="동물"
        FlyoutDisplayOptions="AsMultipleItems">
        <Tab
            Route="국내"
            Title="국내"
            Icon="sample1.png">
            <ShellContent
                Route="고양이"
                Title="고양이"
                Icon="sample2.png"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Route="개"
                Title="개"
                Icon="sample3.png"
                ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
        <ShellContent
            Route="원숭이"
            Title="원숭이"
            Icon="sample1.png"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
        <ShellContent
            Route="코끼리"
            Title="코끼리"
            Icon="sample2.png"
            ContentTemplate="{DataTemplate local:ElephantPage}" />
        <ShellContent
            Route="곰"
            Title="곰"
            Icon="sample3.png"
            ContentTemplate="{DataTemplate local:BearPage}" />
    </FlyoutItem>
    <ShellContent
        Route="정보"
        Title="정보"
        Icon="sample1.png"
        ContentTemplate="{DataTemplate local:AboutPage}" />
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell" x:Name="shell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<FlyoutItem

Route="동물"

FlyoutDisplayOptions="AsMultipleItems">

<Tab

Route="국내"

Title="국내"

Icon="sample1.png">

<ShellContent

Route="고양이"

Title="고양이"

Icon="sample2.png"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Route="개"

Title="개"

Icon="sample3.png"

ContentTemplate="{DataTemplate local:DogPage}" />

</Tab>

<ShellContent

Route="원숭이"

Title="원숭이"

Icon="sample1.png"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

<ShellContent

Route="코끼리"

Title="코끼리"

Icon="sample2.png"

ContentTemplate="{DataTemplate local:ElephantPage}" />

<ShellContent

Route="곰"

Title="곰"

Icon="sample3.png"

ContentTemplate="{DataTemplate local:BearPage}" />

</FlyoutItem>

<ShellContent

Route="정보"

Title="정보"

Icon="sample1.png"

ContentTemplate="{DataTemplate local:AboutPage}" />

</Shell>

▶ AppShell.xaml.cs


namespace TestProject;

/// <summary>
/// 앱 쉘
/// </summary>
public partial class AppShell : Shell
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - AppShell()

    /// <summary>
    /// 생성자
    /// </summary>
    public AppShell()
    {
        InitializeComponent();

        Routing.RegisterRoute("원숭이/원숭이상세", typeof(MonkeyDetailPage));
    }

    #endregion
}

namespace TestProject;

/// <summary>

/// 앱 쉘

/// </summary>

public partial class AppShell : Shell

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - AppShell()

/// <summary>

/// 생성자

/// </summary>

public AppShell()

{

InitializeComponent();

Routing.RegisterRoute("원숭이/원숭이상세", typeof(MonkeyDetailPage));

}

#endregion

}

▶ MonkeyPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MonkeyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Title="Monkey Page"
    BackgroundColor="White">
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center">
        <Label Text="MONKEY PAGE"
            VerticalOptions="Center"
            HorizontalOptions="Center" />
        <Button x:Name="detailButton"
            Margin="10"
            WidthRequest="120"
            HeightRequest="40"
            Text="원숭이 상세" />
    </StackLayout>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.MonkeyPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

Title="Monkey Page"

BackgroundColor="White">

<StackLayout

HorizontalOptions="Center"

VerticalOptions="Center">

<Label Text="MONKEY PAGE"

VerticalOptions="Center"

HorizontalOptions="Center" />

<Button x:Name="detailButton"

Margin="10"

WidthRequest="120"

HeightRequest="40"

Text="원숭이 상세" />

</StackLayout>

</ContentPage>

[C#/MAUI/.NET6] Shell 클래스 : GoToAsync 메소드를 사용해 페이지 이동하기

■ Shell 클래스의 GoToAsync 메소드를 사용해 페이지를 이동하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell" x:Name="shell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <FlyoutItem
        Route="동물"
        FlyoutDisplayOptions="AsMultipleItems">
        <Tab
            Route="국내"
            Icon="sample1.png"
            Title="국내">
            <ShellContent
                Route="고양이"
                Icon="sample2.png"
                Title="고양이"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Route="개"
                Icon="sample3.png"
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
        <ShellContent
            Route="원숭이"
            Icon="sample1.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
        <ShellContent
            Route="코끼리"
            Icon="sample2.png"
            Title="코끼리"
            ContentTemplate="{DataTemplate local:ElephantPage}" />
        <ShellContent
            Route="곰"
            Icon="sample3.png"
            Title="곰"
            ContentTemplate="{DataTemplate local:BearPage}" />
    </FlyoutItem>
    <ShellContent
        Route="정보"
        Icon="sample1.png"
        Title="정보"
        ContentTemplate="{DataTemplate local:AboutPage}" />
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell" x:Name="shell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<FlyoutItem

Route="동물"

FlyoutDisplayOptions="AsMultipleItems">

<Tab

Route="국내"

Icon="sample1.png"

Title="국내">

<ShellContent

Route="고양이"

Icon="sample2.png"

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Route="개"

Icon="sample3.png"

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</Tab>

<ShellContent

Route="원숭이"

Icon="sample1.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

<ShellContent

Route="코끼리"

Icon="sample2.png"

Title="코끼리"

ContentTemplate="{DataTemplate local:ElephantPage}" />

<ShellContent

Route="곰"

Icon="sample3.png"

Title="곰"

ContentTemplate="{DataTemplate local:BearPage}" />

</FlyoutItem>

<ShellContent

Route="정보"

Icon="sample1.png"

Title="정보"

ContentTemplate="{DataTemplate local:AboutPage}" />

</Shell>

▶ MonkeyPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MonkeyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Title="Monkey Page"
    BackgroundColor="White">
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center">
        <Label
            HorizontalOptions="Center"
            VerticalOptions="Center"
            Text="MONKEY PAGE" />
        <Button x:Name="catButton"
            Margin="10"
            WidthRequest="100"
            HeightRequest="40"
            Text="고양이" />
    </StackLayout>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.MonkeyPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

Title="Monkey Page"

BackgroundColor="White">

<StackLayout

HorizontalOptions="Center"

VerticalOptions="Center">

<Label

HorizontalOptions="Center"

VerticalOptions="Center"

Text="MONKEY PAGE" />

<Button x:Name="catButton"

Margin="10"

WidthRequest="100"

HeightRequest="40"

Text="고양이" />

</StackLayout>

</ContentPage>

▶ MonkeyPage.xaml.cs


namespace TestProject;

/// <summary>
/// 원숭이 페이지
/// </summary>
public partial class MonkeyPage : ContentPage
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - MonkeyPage()

    /// <summary>
    /// 생성자
    /// </summary>
    public MonkeyPage()
    {
        InitializeComponent();

        this.catButton.Clicked += catButton_Clicked;
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 고양이 버튼 클릭시 처리하기 - catButton_Clicked(sender, e)

    /// <summary>
    /// 고양이 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private async void catButton_Clicked(object sender, EventArgs e)
    {
        await Shell.Current.GoToAsync("//동물/국내/고양이");
    }

    #endregion
}

namespace TestProject;

/// <summary>

/// 원숭이 페이지

/// </summary>

public partial class MonkeyPage : ContentPage

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MonkeyPage()

/// <summary>

/// 생성자

/// </summary>

public MonkeyPage()

{

InitializeComponent();

this.catButton.Clicked += catButton_Clicked;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 고양이 버튼 클릭시 처리하기 - catButton_Clicked(sender, e)

/// <summary>

/// 고양이 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private async void catButton_Clicked(object sender, EventArgs e)

{

await Shell.Current.GoToAsync("//동물/국내/고양이");

}

#endregion

}

TestProject.zip

[C#/MAUI/.NET6] Shell 엘리먼트 : TitleView 속성을 사용해 쉘 제목 설정하기

■ Shell 엘리먼트의 TitleView 속성을 사용해 쉘 제목을 설정하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <TabBar>
        <ShellContent
            Icon="sample1.png"
            Title="고양이"
            ContentTemplate="{DataTemplate local:CatPage}" />
        <ShellContent
            Icon="sample2.png"
            Title="개"
            ContentTemplate="{DataTemplate local:DogPage}" />
        <ShellContent
            Icon="sample3.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
    </TabBar>
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<ShellContent

Icon="sample1.png"

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Icon="sample2.png"

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

<ShellContent

Icon="sample3.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

</TabBar>

</Shell>

▶ CatPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.CatPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Title="Cat Page"
    BackgroundColor="White">
    <Shell.TitleView>
        <Image
            HorizontalOptions="Center"
            VerticalOptions="Center"
            Source="dotnet_bot.png" />
    </Shell.TitleView>
    <StackLayout>
        <Label
            HorizontalOptions="CenterAndExpand"
            VerticalOptions="CenterAndExpand"
            Text="CAT PAGE" />
    </StackLayout>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.CatPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

Title="Cat Page"

BackgroundColor="White">

<Shell.TitleView>

<Image

HorizontalOptions="Center"

VerticalOptions="Center"

Source="dotnet_bot.png" />

</Shell.TitleView>

<Label

HorizontalOptions="CenterAndExpand"

VerticalOptions="CenterAndExpand"

Text="CAT PAGE" />

</StackLayout>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] Shell 엘리먼트 : NavBarIsVisible 첨부 속성을 사용해 탐색바 표시 여부 설정하기

■ Shell 엘리먼트의 NavBarIsVisible 첨부 속성을 사용해 탐색바 표시 여부를 설정하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent
            Icon="sample1.png"
            Title="고양이"
            ContentTemplate="{DataTemplate local:CatPage}" />
        <ShellContent
            Icon="sample2.png"
            Title="개"
            ContentTemplate="{DataTemplate local:DogPage}" />
        <ShellContent
            Icon="sample3.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
    </FlyoutItem>
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<ShellContent

Icon="sample1.png"

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Icon="sample2.png"

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

<ShellContent

Icon="sample3.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

</FlyoutItem>

</Shell>

▶ DogPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.DogPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Title="Dog Page"
    BackgroundColor="White"
    Shell.NavBarIsVisible="False">
    <StackLayout>
        <Label
            HorizontalOptions="CenterAndExpand"
            VerticalOptions="CenterAndExpand"
            Text="DOG PAGE" />
    </StackLayout>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.DogPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

Title="Dog Page"

BackgroundColor="White"

Shell.NavBarIsVisible="False">

<Label

HorizontalOptions="CenterAndExpand"

VerticalOptions="CenterAndExpand"

Text="DOG PAGE" />

</StackLayout>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] Shell 엘리먼트 : NavBarHasShadow 첨부 속성을 사용해 탐색바 그림자 설정하기 (프리뷰 버전 오류)

■ Shell 엘리먼트의 NavBarHasShadow 첨부 속성을 사용해 탐색바 그림자를 설정하는 방법을 보여준다. ▶ CatPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.CatPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Title="Cat Page"
    BackgroundColor="White"
    Shell.NavBarHasShadow="False">
    <StackLayout>
        <Label
            HorizontalOptions="CenterAndExpand"
            VerticalOptions="CenterAndExpand"
            Text="CAT PAGE" />
    </StackLayout>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.CatPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

Title="Cat Page"

BackgroundColor="White"

Shell.NavBarHasShadow="False">

<Label

HorizontalOptions="CenterAndExpand"

VerticalOptions="CenterAndExpand"

Text="CAT PAGE" />

</StackLayout>

</ContentPage>

▶ DogPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.DogPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Title="Dog Page"
    BackgroundColor="White"
    Shell.NavBarHasShadow="False">
    <StackLayout>
        <Label
            HorizontalOptions="CenterAndExpand"
            VerticalOptions="CenterAndExpand"
            Text="DOG PAGE" />
    </StackLayout>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.DogPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

Title="Dog Page"

BackgroundColor="White"

Shell.NavBarHasShadow="False">

<Label

HorizontalOptions="CenterAndExpand"

VerticalOptions="CenterAndExpand"

Text="DOG PAGE" />

</StackLayout>

</ContentPage>

▶ MonkeyPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MonkeyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Title="Monkey Page"
    BackgroundColor="White"
    Shell.NavBarHasShadow="False">
    <StackLayout>
        <Label
            HorizontalOptions="CenterAndExpand"
            VerticalOptions="CenterAndExpand"
            Text="MONKEY PAGE" />
    </StackLayout>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.MonkeyPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

Title="Monkey Page"

BackgroundColor="White"

Shell.NavBarHasShadow="False">

<Label

HorizontalOptions="CenterAndExpand"

VerticalOptions="CenterAndExpand"

Text="MONKEY PAGE" />

</StackLayout>

</ContentPage>

▶

[C#/MAUI/.NET6] Shell 엘리먼트 : PresentationMode 첨부 속성 사용하기 (프리뷰 버전 오류)

■ Shell 엘리먼트의 PresentationMode 첨부 속성을 사용하는 방법을 보여준다. ▶ CatPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.CatPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Title="Cat Page"
    BackgroundColor="White"
    Shell.PresentationMode="NotAnimated">
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Spacing="10">
        <Label
            HorizontalOptions="Center"
            Text="CAT PAGE" />
        <Button x:Name="dongPageButton"
            HorizontalOptions="Center"
            Text="개 페이지로 이동" />
        <Button x:Name="monkeyPageButton"
            HorizontalOptions="Center"
            Text="원숭이 페이지로 이동" />
    </StackLayout>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.CatPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

Title="Cat Page"

BackgroundColor="White"

Shell.PresentationMode="NotAnimated">

<StackLayout

HorizontalOptions="Center"

VerticalOptions="Center"

Spacing="10">

<Label

HorizontalOptions="Center"

Text="CAT PAGE" />

<Button x:Name="dongPageButton"

HorizontalOptions="Center"

Text="개 페이지로 이동" />

<Button x:Name="monkeyPageButton"

HorizontalOptions="Center"

Text="원숭이 페이지로 이동" />

</StackLayout>

</ContentPage>

▶ CatPage.xaml.cs


namespace TestProject;

/// <summary>
/// 고양이 페이지
/// </summary>
public partial class CatPage : ContentPage
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - CatPage()

    /// <summary>
    /// 생성자
    /// </summary>
    public CatPage()
    {
        InitializeComponent();

        this.dongPageButton.Clicked   += dongPageButton_Clicked;
        this.monkeyPageButton.Clicked += monkeyPageButton_Clicked;
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region 개 페이지로 이동 버튼 클릭시 처리하기 - dongPageButton_Clicked(sender, e)

    /// <summary>
    /// 개 페이지로 이동 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private async void dongPageButton_Clicked(object sender, EventArgs e)
    {
        await Shell.Current.GoToAsync("//동물/개", true);
    }

    #endregion
    #region 원숭이 페이지로 이동 버튼 클릭시 처리하기 - monkeyPageButton_Clicked(sender, e)

    /// <summary>
    /// 원숭이 페이지로 이동 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private async void monkeyPageButton_Clicked(object sender, EventArgs e)
    {
        await Shell.Current.GoToAsync("//동물/원숭이", true);
    }

    #endregion
}

namespace TestProject;

/// <summary>

/// 고양이 페이지

/// </summary>

public partial class CatPage : ContentPage

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - CatPage()

/// <summary>

/// 생성자

/// </summary>

public CatPage()

{

InitializeComponent();

this.dongPageButton.Clicked += dongPageButton_Clicked;

this.monkeyPageButton.Clicked += monkeyPageButton_Clicked;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 개 페이지로 이동 버튼 클릭시 처리하기 - dongPageButton_Clicked(sender, e)

/// <summary>

/// 개 페이지로 이동 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private async void dongPageButton_Clicked(object sender, EventArgs e)

{

await Shell.Current.GoToAsync("//동물/개", true);

}

#endregion

#region 원숭이 페이지로 이동 버튼 클릭시 처리하기 - monkeyPageButton_Clicked(sender, e)

/// <summary>

/// 원숭이 페이지로 이동 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private async void monkeyPageButton_Clicked(object sender, EventArgs e)

{

await Shell.Current.GoToAsync("//동물/원숭이", true);

}

#endregion

}

▶ DogPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.DogPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Title="Dog Page"
    BackgroundColor="White"
    Shell.PresentationMode="NotAnimated">
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Spacing="10">
        <Label
            HorizontalOptions="Center"
            Text="DOG PAGE" />
        <Button x:Name="catPageButton"
            HorizontalOptions="Center"
            Text="고양이 페이지로 이동" />
        <Button x:Name="monkeyPageButton"
            HorizontalOptions="Center"
            Text="원숭이 페이지로 이동" />
    </StackLayout>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.DogPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

Title="Dog Page"

BackgroundColor="White"

Shell.PresentationMode="NotAnimated">

<StackLayout

HorizontalOptions="Center"

VerticalOptions="Center"

Spacing="10">

<Label

HorizontalOptions="Center"

Text="DOG PAGE" />

<Button x:Name="catPageButton"

HorizontalOptions="Center"

Text="고양이 페이지로 이동" />

<Button x:Name="monkeyPageButton"

HorizontalOptions="Center"

Text="원숭이 페이지로 이동" />

</StackLayout>

</ContentPage>

▶ DogPage.xaml.cs


namespace TestProject;

/// <summary>
/// 개 페이지
/// </summary>
public partial class DogPage : ContentPage
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - DogPage()

    /// <summary>
    /// 생성자
    /// </summary>
    public DogPage()
    {
        InitializeComponent();

        this.catPageButton.Clicked    += catPageButton_Clicked;
        this.monkeyPageButton.Clicked += monkeyPageButton_Clicked;
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region 고양이 페이지로 이동 버튼 클릭시 처리하기 - catPageButton_Clicked(sender, e)

    /// <summary>
    /// 고양이 페이지로 이동 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private async void catPageButton_Clicked(object sender, EventArgs e)
    {
        await Shell.Current.GoToAsync("//동물/고양이", true);
    }

    #endregion
    #region 원숭이 페이지로 이동 버튼 클릭시 처리하기 - monkeyPageButton_Clicked(sender, e)

    /// <summary>
    /// 원숭이 페이지로 이동 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private async void monkeyPageButton_Clicked(object sender, EventArgs e)
    {
        await Shell.Current.GoToAsync("//동물/원숭이", true);
    }

    #endregion
}

namespace TestProject;

/// <summary>

/// 개 페이지

/// </summary>

public partial class DogPage : ContentPage

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - DogPage()

/// <summary>

/// 생성자

/// </summary>

public DogPage()

{

InitializeComponent();

this.catPageButton.Clicked += catPageButton_Clicked;

this.monkeyPageButton.Clicked += monkeyPageButton_Clicked;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 고양이 페이지로 이동 버튼 클릭시 처리하기 - catPageButton_Clicked(sender, e)

/// <summary>

/// 고양이 페이지로 이동 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private async void catPageButton_Clicked(object sender, EventArgs e)

{

await Shell.Current.GoToAsync("//동물/고양이", true);

}

#endregion

#region 원숭이 페이지로 이동 버튼 클릭시 처리하기 - monkeyPageButton_Clicked(sender, e)

/// <summary>

/// 원숭이 페이지로 이동 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private async void monkeyPageButton_Clicked(object sender, EventArgs e)

{

await Shell.Current.GoToAsync("//동물/원숭이", true);

}

#endregion

}

▶

[C#/MAUI/.NET6] Shell 엘리먼트 : BackgroundColor/TitleColor/UnselectedColor 첨부 속성 사용하기

■ Shell 엘리먼트의 BackgroundColor/TitleColor/UnselectedColor 첨부 속성을 사용하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <TabBar>
        <ShellContent
            Icon="sample1.png"
            Title="고양이"
            Shell.BackgroundColor="Blue"
            Shell.TitleColor="White"
            Shell.UnselectedColor="Magenta"
            ContentTemplate="{DataTemplate local:CatPage}" />
        <ShellContent
            Icon="sample2.png"
            Title="개"
            ContentTemplate="{DataTemplate local:DogPage}" />
        <ShellContent
            Icon="sample3.png"
            Title="원숭이"
            Shell.BackgroundColor="Blue"
            Shell.TitleColor="White"
            Shell.UnselectedColor="Magenta"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
    </TabBar>
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<ShellContent

Icon="sample1.png"

Title="고양이"

Shell.BackgroundColor="Blue"

Shell.TitleColor="White"

Shell.UnselectedColor="Magenta"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Icon="sample2.png"

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

<ShellContent

Icon="sample3.png"

Title="원숭이"

Shell.BackgroundColor="Blue"

Shell.TitleColor="White"

Shell.UnselectedColor="Magenta"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

</TabBar>

</Shell>

TestProject.zip

[C#/MAUI/.NET6] Shell 엘리먼트 : BackgroundColor/TitleColor/UnselectedColor 속성 사용하기

■ Shell 엘리먼트의 BackgroundColor/TitleColor/UnselectedColor 속성을 사용하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject"
    BackgroundColor="Blue"
    TitleColor="White"
    UnselectedColor="Magenta">
    <TabBar>
        <ShellContent
            Icon="sample1.png"
            Title="고양이"
            ContentTemplate="{DataTemplate local:CatPage}" />
        <ShellContent
            Icon="sample2.png"
            Title="개"
            ContentTemplate="{DataTemplate local:DogPage}" />
        <ShellContent
            Icon="sample3.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
    </TabBar>
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject"

BackgroundColor="Blue"

TitleColor="White"

UnselectedColor="Magenta">

<ShellContent

Icon="sample1.png"

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Icon="sample2.png"

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

<ShellContent

Icon="sample3.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

</TabBar>

</Shell>

TestProject.zip

[C#/MAUI/.NET6] ShellContent 엘리먼트 : Content 속성에서 ContentPage 객체를 앱 시작시 생성하기

■ ShellContent 엘리먼트의 Content 속성에서 ContentPage 객체를 앱 시작시 생성하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <TabBar>
        <ShellContent
            Icon="sample1.png"
            Title="고양이">
            <local:CatPage />
        </ShellContent>
        <ShellContent
            Icon="sample2.png"
            Title="개">
            <local:DogPage />
        </ShellContent>
        <ShellContent
            Icon="sample3.png"
            Title="원숭이">
            <local:MonkeyPage />
        </ShellContent>
    </TabBar>
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<ShellContent

Icon="sample1.png"

Title="고양이">

<local:CatPage />

</ShellContent>

<ShellContent

Icon="sample2.png"

Title="개">

<local:DogPage />

</ShellContent>

<ShellContent

Icon="sample3.png"

Title="원숭이">

<local:MonkeyPage />

</ShellContent>

</TabBar>

</Shell>

※ CatPage, DogPage 및 MonkeyPage는 탐색에 대한

[C#/MAUI/.NET6] ShellContent 엘리먼트 : IsVisible 속성 사용하기

■ ShellContent 엘리먼트의 IsVisible 속성을 사용하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <TabBar>
        <Tab
            Icon="sample1.png"
            Title="Domestic">
            <ShellContent
                Title="고양이"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}"
                IsVisible="False" />
        </Tab>
        <Tab
            Icon="sample2.png"
            Title="원숭이">
            <ShellContent ContentTemplate="{DataTemplate local:MonkeyPage}" />
        </Tab>
    </TabBar>
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<Tab

Icon="sample1.png"

Title="Domestic">

<ShellContent

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Title="개"

ContentTemplate="{DataTemplate local:DogPage}"

IsVisible="False" />

</Tab>

<Tab

Icon="sample2.png"

Title="원숭이">

</Tab>

</TabBar>

</Shell>

TestProject.zip

[C#/MAUI/.NET6] Shell 엘리먼트 : TabBarIsVisible 속성을 사용해 탭바 표시 숨기기

■ Shell 엘리먼트의 TabBarIsVisible 속성을 사용해 탭바 표시를 숨기는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject"
    TabBarIsVisible="false">
    <TabBar>
        <Tab
            Icon="sample1.png"
            Title="Domestic">
            <ShellContent
                Title="고양이"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
        <Tab
            Icon="sample2.png"
            Title="원숭이">
            <ShellContent ContentTemplate="{DataTemplate local:MonkeyPage}" />
        </Tab>
    </TabBar>
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject"

TabBarIsVisible="false">

<Tab

Icon="sample1.png"

Title="Domestic">

<ShellContent

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</Tab>

<Tab

Icon="sample2.png"

Title="원숭이">

</Tab>

</TabBar>

</Shell>

TestProject.zip

[C#/MAUI/.NET6] Shell 엘리먼트 : TabBarUnselectedColor 속성을 사용해 탭바 미선택 색상 설정하기

■ Shell 엘리먼트의 TabBarUnselectedColor 속성을 사용해 탭바 미선택 색상을 설정하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject"
    TabBarUnselectedColor="Red">
    <TabBar>
        <Tab
            Icon="sample1.png"
            Title="Domestic">
            <ShellContent
                Title="고양이"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
        <Tab
            Icon="sample2.png"
            Title="원숭이">
            <ShellContent ContentTemplate="{DataTemplate local:MonkeyPage}" />
        </Tab>
    </TabBar>
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject"

TabBarUnselectedColor="Red">

<Tab

Icon="sample1.png"

Title="Domestic">

<ShellContent

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</Tab>

<Tab

Icon="sample2.png"

Title="원숭이">

</Tab>

</TabBar>

</Shell>

TestProject.zip

[C#/MAUI/.NET6] Shell 엘리먼트 : TabBarTitleColor 속성을 사용해 탭바 제목 색상 설정하기

■ Shell 엘리먼트의 TabBarTitleColor 속성을 사용해 탭바 제목 색상을 설정하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject"
    TabBarTitleColor="Red">
    <TabBar>
        <Tab
            Icon="sample1.png"
            Title="Domestic">
            <ShellContent
                Title="고양이"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
        <Tab
            Icon="sample2.png"
            Title="원숭이">
            <ShellContent ContentTemplate="{DataTemplate local:MonkeyPage}" />
        </Tab>
    </TabBar>
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject"

TabBarTitleColor="Red">

<Tab

Icon="sample1.png"

Title="Domestic">

<ShellContent

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</Tab>

<Tab

Icon="sample2.png"

Title="원숭이">

</Tab>

</TabBar>

</Shell>

TestProject.zip