NAVIGATION Archives - 7 중 3 번째 페이지

[C#/MAUI/.NET6] TabBar 엘리먼트 사용하기

■ TabBar 엘리먼트를 사용하는 방법을 보여준다. ▶ 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">
    <TabBar>
        <Tab>
            <ShellContent ContentTemplate="{DataTemplate local:CatPage}" />
        </Tab>
    </TabBar>
</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">

<Tab>

</Tab>

</TabBar>

</Shell>

TestProject.zip

[C#/MAUI/.NET6] Shell 클래스 : FlyoutIsPresented 속성을 사용해 플라이아웃 표시하기

■ Shell 클래스의 FlyoutIsPresented 속성을 사용해 플라이아웃을 표시하는 방법을 보여준다. ▶ CatPage.xaml.cs


namespace TestProject;

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

    #region 생성자 - CatPage()

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

        this.testButton.Clicked += testButton_Clicked;
    }

    #endregion

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

    #region 테스트 버튼 클릭시 처리하기 - button_Clicked(sender, e)

    /// <summary>
    /// 테스트 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void testButton_Clicked(object sender, EventArgs e)
    {
        Shell.Current.FlyoutIsPresented = true;
    }

    #endregion
}

namespace TestProject;

/// <summary>

/// 고양이 페이지

/// </summary>

public partial class CatPage : ContentPage

{

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

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

#region 생성자 - CatPage()

/// <summary>

/// 생성자

/// </summary>

public CatPage()

{

InitializeComponent();

this.testButton.Clicked += testButton_Clicked;

}

#endregion

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

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

#region 테스트 버튼 클릭시 처리하기 - button_Clicked(sender, e)

/// <summary>

/// 테스트 버튼 클릭시 처리하기

/// </summary>

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

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

private void testButton_Clicked(object sender, EventArgs e)

{

Shell.Current.FlyoutIsPresented = true;

}

#endregion

}

TestProject.zip

[C#/MAUI/.NET6] ShellContent 엘리먼트 : FlyoutItemIsVisible 속성을 사용해 플라이아웃 항목 숨기기

■ ShellContent 엘리먼트의 FlyoutItemIsVisible 속성을 사용해 플라이아웃 항목을 숨기는 방법을 보여준다. ▶ 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">
        <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="원숭이"
            FlyoutItemIsVisible="False"
            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">

<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="원숭이"

FlyoutItemIsVisible="False"

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 클래스 : CurrentItem 속성을 사용해 플라이아웃 항목 선택하기

■ Shell 클래스의 CurrentItem 속성을 사용해 플라이아웃 항목을 선택하는 방법을 보여준다. ▶ 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">
        <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 x:Name="aboutItem"
        Icon="sample1.png"
        Title="정보"
        ContentTemplate="{DataTemplate local:AboutPage}" />
    <MenuItem
        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">

<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 x:Name="aboutItem"

Icon="sample1.png"

Title="정보"

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

<MenuItem

Text="도움말"

IconImageSource="sample2.png" />

</Shell>

▶ AppShell.xaml.cs


namespace TestProject;

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

    #region 생성자 - AppShell()

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

        Loaded += shell_Loaded;
    }

    #endregion

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

    #region 셸 로드시 처리하기 - shell_Loaded(sender, e)

    /// <summary>
    /// 셸 로드시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void shell_Loaded(object sender, EventArgs e)
    {
        Shell.Current.CurrentItem = this.aboutItem;
    }

    #endregion
}

namespace TestProject;

/// <summary>

/// 앱 쉘

/// </summary>

public partial class AppShell : Shell

{

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

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

#region 생성자 - AppShell()

/// <summary>

/// 생성자

/// </summary>

public AppShell()

{

InitializeComponent();

Loaded += shell_Loaded;

}

#endregion

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

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

#region 셸 로드시 처리하기 - shell_Loaded(sender, e)

/// <summary>

/// 셸 로드시 처리하기

/// </summary>

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

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

private void shell_Loaded(object sender, EventArgs e)

{

Shell.Current.CurrentItem = this.aboutItem;

}

#endregion

}

TestProject.zip

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

■ Shell 엘리먼트의 FlyoutFooter 속성을 사용해 플라이아웃 바닥글을 설정하는 방법을 보여준다. ▶ 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.FlyoutFooter>
        <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>
    </Shell.FlyoutFooter>
    <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.FlyoutFooter>

<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>

</Shell.FlyoutFooter>

<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 엘리먼트 : FlyoutContent 속성 사용하기

■ Shell 엘리먼트의 FlyoutContent 속성을 사용하는 방법을 보여준다. ▶ 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.FlyoutContent>
        <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>
    </Shell.FlyoutContent>
    <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.FlyoutContent>

<CollectionView

BindingContext="{x:Reference shell}"

IsGrouped="True"

ItemsSource="{Binding FlyoutItems}">

<CollectionView.ItemTemplate>

<Label

FontSize="18"

TextColor="Black"

Text="{Binding Title}" />

</DataTemplate>

</CollectionView.ItemTemplate>

</CollectionView>

</Shell.FlyoutContent>

<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 엘리먼트 : FlyoutBackdrop 속성을 사용해 플라이아웃 백드롭 설정하기

■ Shell 엘리먼트의 FlyoutBackdrop 속성을 사용해 플라이아웃 백드롭을 설정하는 방법을 보여준다. ▶ 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.FlyoutBackdrop>
        <LinearGradientBrush
            StartPoint="0,0"
            EndPoint="1,1">
            <GradientStop Offset="0.1" Color="#8a2387" />
            <GradientStop Offset="0.6" Color="#e94057" />
            <GradientStop Offset="1.0" Color="#f27121" />
        </LinearGradientBrush>
    </Shell.FlyoutBackdrop>
    <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.FlyoutBackdrop>

<LinearGradientBrush

StartPoint="0,0"

EndPoint="1,1">

</LinearGradientBrush>

</Shell.FlyoutBackdrop>

<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 엘리먼트 : FlyoutBackgroundImageAspect/FlyoutBackgroundImage 속성을 사용해 플라이아웃 배경 이미지 설정하기

■ Shell 엘리먼트의 FlyoutBackgroundImageAspect/FlyoutBackgroundImage 속성을 사용해 플라이아웃 배경 이미지를 설정하는 방법을 보여준다. ▶ 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"
    FlyoutBackgroundImageAspect="AspectFill"
    FlyoutBackgroundImage="sample4.jpg">
    <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"

FlyoutBackgroundImageAspect="AspectFill"

FlyoutBackgroundImage="sample4.jpg">

<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 엘리먼트 : FlyoutBackground 속성을 사용해 플라이아웃 배경 색상 설정하기

■ Shell 엘리먼트의 FlyoutBackground 속성을 사용해 플라이아웃 배경 색상을 설정하는 방법을 보여준다. ▶ 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.FlyoutBackground>
        <LinearGradientBrush
                StartPoint="0,0"
                EndPoint="1,1">
            <GradientStop Offset="0.1" Color="#8a2387" />
            <GradientStop Offset="0.6" Color="#e94057" />
            <GradientStop Offset="1.0" Color="#f27121" />
        </LinearGradientBrush>
    </Shell.FlyoutBackground>
    <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.FlyoutBackground>

<LinearGradientBrush

StartPoint="0,0"

EndPoint="1,1">

</LinearGradientBrush>

</Shell.FlyoutBackground>

<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 엘리먼트 : FlyoutBackgroundColor 속성을 사용해 플라이아웃 배경 색상 설정하기

■ Shell 엘리먼트의 FlyoutBackgroundColor 속성을 사용해 플라이아웃 배경 색상을 설정하는 방법을 보여준다. ▶ 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"
    FlyoutBackgroundColor="RoyalBlue">
    <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"

FlyoutBackgroundColor="RoyalBlue">

<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 엘리먼트 : FlyoutIcon 속성을 사용해 플라이아웃 아이콘 설정하기

■ Shell 엘리먼트의 FlyoutIcon 속성을 사용해 플라이아웃 아이콘을 설정하는 방법을 보여준다. ▶ 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"
    FlyoutIcon="sample1.png">
    <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"

FlyoutIcon="sample1.png">

<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 엘리먼트 : FlyoutWidth/FlyoutHeight 속성을 사용해 플라이아웃 너비 및 높이 설정하기

■ Shell 엘리먼트의 FlyoutWidth/FlyoutHeight 속성을 사용해 플라이아웃 너비 및 높이를 설정하는 방법을 보여준다. ▶ 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"
    FlyoutWidth="200"
    FlyoutHeight="200">
    <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"

FlyoutWidth="200"

FlyoutHeight="200">

<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 엘리먼트 : FlyoutHeaderBehavior 속성 사용하기

■ Shell 엘리먼트의 FlyoutHeaderBehavior 속성을 사용하는 방법을 보여준다. ▶ 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"
    FlyoutHeaderBehavior="Scroll">
    <Shell.FlyoutHeader>
        <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>
    </Shell.FlyoutHeader>
    <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}" />
        <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}" />
        <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}" />
        <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}" />
        <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}" />
        <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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

<?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"

FlyoutHeaderBehavior="Scroll">

<Shell.FlyoutHeader>

<Image

Aspect="AspectFill"

Opacity="0.6"

Source="sample1.png" />

<Label

Margin="10"

HorizontalTextAlignment="Center"

VerticalTextAlignment="Center"

FontAttributes="Bold"

TextColor="White"

Text="Animals" />

</Grid>

</Shell.FlyoutHeader>

<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}" />

<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}" />

<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}" />

<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}" />

<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}" />

<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 엘리먼트 : FlyoutHeader 속성을 사용해 플라이아웃 헤더 설정하기

■ Shell 엘리먼트의 FlyoutHeader 속성을 사용해 플라이아웃 헤더를 설정하는 방법을 보여준다. ▶ 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.FlyoutHeader>
        <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>
    </Shell.FlyoutHeader>
    <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.FlyoutHeader>

<Image

Aspect="AspectFill"

Opacity="0.6"

Source="sample1.png" />

<Label

Margin="10"

HorizontalTextAlignment="Center"

VerticalTextAlignment="Center"

FontAttributes="Bold"

TextColor="White"

Text="Animals" />

</Grid>

</Shell.FlyoutHeader>

<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 엘리먼트 : FlyoutItem 및 MenuItem를 위한 3가지 스타일 클래스 사용하기

■ Shell 엘리먼트에서 FlyoutItem 및 MenuItem를 위한 3가지 스타일 클래스를 사용하는 방법을 보여준다. ▶ 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.Resources>
        <Style TargetType="Label" Class="FlyoutItemLabelStyle">
            <Setter Property="Margin"    Value="10"    />
            <Setter Property="TextColor" Value="Black" />
        </Style>
        <Style TargetType="Image" Class="FlyoutItemImageStyle">
            <Setter Property="Margin" Value="10"   />
            <Setter Property="Aspect" Value="Fill" />
        </Style>
        <Style TargetType="Layout" Class="FlyoutItemLayoutStyle"
            ApplyToDerivedTypes="True">
            <Setter Property="BackgroundColor" Value="Teal" />
        </Style>
    </Shell.Resources>
    <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.Resources>

</Style>

</Style>

<Style TargetType="Layout" Class="FlyoutItemLayoutStyle"

ApplyToDerivedTypes="True">

</Style>

</Shell.Resources>

<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 엘리먼트 : MenuItemTemplate 속성 사용하기

■ Shell 엘리먼트의 MenuItemTemplate 속성을 사용하는 방법을 보여준다. ▶ 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 ColumnDefinitions="0.2*,0.8*">
                <Image
                    Margin="5"
                    HeightRequest="45"
                    Source="{Binding FlyoutIcon}" />
                <Label Grid.Column="1"
                    VerticalTextAlignment="Center"
                    FontAttributes="Italic"
                    Text="{Binding Title}" />
            </Grid>
        </DataTemplate>
    </Shell.ItemTemplate>
    <Shell.MenuItemTemplate>
        <DataTemplate>
            <Grid ColumnDefinitions="0.2*,0.8*">
                <Image
                    Margin="5"
                    HeightRequest="45"
                    Source="{Binding Icon}" />
                <Label Grid.Column="1"
                    VerticalTextAlignment="Center"
                    FontAttributes="Italic"
                    Text="{Binding Text}" />
            </Grid>
        </DataTemplate>
    </Shell.MenuItemTemplate>
    <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.ItemTemplate>

<Image

Margin="5"

HeightRequest="45"

Source="{Binding FlyoutIcon}" />

<Label Grid.Column="1"

VerticalTextAlignment="Center"

FontAttributes="Italic"

Text="{Binding Title}" />

</Grid>

</DataTemplate>

</Shell.ItemTemplate>

<Shell.MenuItemTemplate>

<Image

Margin="5"

HeightRequest="45"

Source="{Binding Icon}" />

<Label Grid.Column="1"

VerticalTextAlignment="Center"

FontAttributes="Italic"

Text="{Binding Text}" />

</Grid>

</DataTemplate>

</Shell.MenuItemTemplate>

<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>

▶ AppShell.xaml.cs


namespace TestProject;

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

    #region 생성자 - AppShell()

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

        this.helpMenuItem.Clicked += helpMenuItem_Clicked;
    }

    #endregion

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

    #region 도움말 메뉴 항목 클릭시 처리하기 - helpMenuItem_Clicked(sender, e)

    /// <summary>
    /// 도움말 메뉴 항목 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private async void helpMenuItem_Clicked(object sender, EventArgs e)
    {
        MenuItem menuItem = sender as MenuItem;

        await DisplayAlert("정보", $"{menuItem.Text} 메뉴를 클릭했습니다.", "확인");
    }

    #endregion
}

namespace TestProject;

/// <summary>

/// 앱 쉘

/// </summary>

public partial class AppShell : Shell

{

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

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

#region 생성자 - AppShell()

/// <summary>

/// 생성자

/// </summary>

public AppShell()

{

InitializeComponent();

this.helpMenuItem.Clicked += helpMenuItem_Clicked;

}

#endregion

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

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

#region 도움말 메뉴 항목 클릭시 처리하기 - helpMenuItem_Clicked(sender, e)

/// <summary>

/// 도움말 메뉴 항목 클릭시 처리하기

/// </summary>

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

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

private async void helpMenuItem_Clicked(object sender, EventArgs e)

{

MenuItem menuItem = sender as MenuItem;

await DisplayAlert("정보", $"{menuItem.Text} 메뉴를 클릭했습니다.", "확인");

}

#endregion

}

TestProject.zip

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

■ Shell 엘리먼트의 ItemTemplate 속성을 사용하는 방법을 보여준다. ▶ 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.ItemTemplate>
        <DataTemplate>
            <Grid ColumnDefinitions="0.2*,0.8*">
                <Image
                    Margin="5"
                    HeightRequest="45"
                    Source="{Binding FlyoutIcon}" />
                <Label Grid.Column="1"
                    VerticalTextAlignment="Center"
                    FontAttributes="Italic"
                    Text="{Binding Title}" />
            </Grid>
        </DataTemplate>
    </Shell.ItemTemplate>
    <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}" />
</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.ItemTemplate>

<Image

Margin="5"

HeightRequest="45"

Source="{Binding FlyoutIcon}" />

<Label Grid.Column="1"

VerticalTextAlignment="Center"

FontAttributes="Italic"

Text="{Binding Title}" />

</Grid>

</DataTemplate>

</Shell.ItemTemplate>

<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}" />

</Shell>

TestProject.zip

[C#/MAUI/.NET6] FlyoutItem 엘리먼트 사용하기

■ FlyoutItem 엘리먼트를 사용하는 방법을 보여준다. ▶ 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">
    <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">

<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">
    <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">

<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">
    <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">

<Label

HorizontalOptions="CenterAndExpand"

VerticalOptions="CenterAndExpand"

Text="MONKEY PAGE" />

</StackLayout>

</ContentPage>

▶ ElephantPage.xaml


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

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

<ContentPage x:Class="TestProject.ElephantPage"

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

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

Title="Elephant Page"

BackgroundColor="White">

<Label

HorizontalOptions="CenterAndExpand"

VerticalOptions="CenterAndExpand"

Text="ELEPHANT PAGE" />

</StackLayout>

</ContentPage>

▶ BearPage.xaml


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

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

<ContentPage x:Class="TestProject.BearPage"

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

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

Title="Bear Page"

BackgroundColor="White">

<Label

HorizontalOptions="CenterAndExpand"

VerticalOptions="CenterAndExpand"

Text="BEAR PAGE" />

</StackLayout>

</ContentPage>

▶

[C#/MAUI/.NET6] Tab 엘리먼트 사용하기

■ Tab 엘리먼트를 사용하는 방법을 보여준다. ▶ 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
        Icon="sample1.png"
        Title="고양이">
        <Tab>
            <ShellContent ContentTemplate="{DataTemplate local:CatPage}" />
        </Tab>
    </FlyoutItem>
    <FlyoutItem
        Title="개/원숭이"
        Icon="sample2.png">
        <Tab>
            <ShellContent
                Icon="sample2.png"
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
            <ShellContent
                Icon="sample3.png"
                Title="원숭이"
                ContentTemplate="{DataTemplate local:MonkeyPage}" />
        </Tab>
    </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">

<FlyoutItem

Icon="sample1.png"

Title="고양이">

<Tab>

</Tab>

</FlyoutItem>

<FlyoutItem

Title="개/원숭이"

Icon="sample2.png">

<Tab>

<ShellContent

Icon="sample2.png"

Title="개"

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

<ShellContent

Icon="sample3.png"

Title="원숭이"

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

</Tab>

</FlyoutItem>

</Shell>

TestProject.zip

[C#/MAUI/.NET6] FlyoutItem 엘리먼트 사용하기

■ FlyoutItem 엘리먼트를 사용하는 방법을 보여준다. ▶ 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
        Title="고양이"
        Icon="sample1.png">
        <Tab>
            <ShellContent ContentTemplate="{DataTemplate local:CatPage}" />
        </Tab>
    </FlyoutItem>
    <FlyoutItem
        Title="개"
        Icon="sample2.png">
        <Tab>
            <ShellContent ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
    </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">

<FlyoutItem

Title="고양이"

Icon="sample1.png">

<Tab>

</Tab>

</FlyoutItem>

<FlyoutItem

Title="개"

Icon="sample2.png">

<Tab>

</Tab>

</FlyoutItem>

</Shell>

TestProject.zip

[C#/WPF] PageFunction 클래스 사용하기

■ PageFunction<T> 클래스를 사용하는 방법을 보여준다. ▶ MainPageFunction.xaml


<PageFunction x:Class="TestProject.MainPageFunction"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    x:TypeArguments="sys:String"
    Title="메인 페이지 함수"
    RemoveFromJournal="True">
    <Grid
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition              />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition               />
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" Grid.Column="0"
            VerticalAlignment="Center">
            입력 항목
        </TextBlock>
        <TextBox Name="textBox" Grid.Row="0" Grid.Column="1"
            Margin="10 0 0 0"
            Width="150"
            Height="25"
            VerticalContentAlignment="Center" />
        <StackPanel Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
            Margin="0 10 0 0"
            Orientation="Horizontal"
            HorizontalAlignment="Center">
            <Button Name="okButton"
                Width="60"
                Height="30"
                IsDefault="True">
                확인
            </Button>
            <Button Name="cancelButton"
                Margin="10 0 0 0"
                Width="60"
                Height="30"
                IsCancel="True">
                취소
            </Button>
        </StackPanel>
    </Grid>
</PageFunction>

<PageFunction x:Class="TestProject.MainPageFunction"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

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

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

x:TypeArguments="sys:String"

Title="메인 페이지 함수"

RemoveFromJournal="True">

<Grid

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBlock Grid.Row="0" Grid.Column="0"

VerticalAlignment="Center">

입력 항목

</TextBlock>

<TextBox Name="textBox" Grid.Row="0" Grid.Column="1"

Margin="10 0 0 0"

Width="150"

Height="25"

VerticalContentAlignment="Center" />

<StackPanel Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"

Margin="0 10 0 0"

Orientation="Horizontal"

HorizontalAlignment="Center">

<Button Name="okButton"

Width="60"

Height="30"

IsDefault="True">

확인

</Button>

<Button Name="cancelButton"

Margin="10 0 0 0"

Width="60"

Height="30"

IsCancel="True">

취소

</Button>

</StackPanel>

</Grid>

</PageFunction>

▶ MainPageFunction.xaml.cs


using System.Windows;
using System.Windows.Navigation;

namespace TestProject
{
    /// <summary>
    /// 메인 페이지 함수
    /// </summary>
    public partial class MainPageFunction : PageFunction<string>
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainPageFunction(text)

        /// <summary>
        /// 생성자
        /// </summary>
        /// <param name="text">텍스트</param>
        public MainPageFunction(string text)
        {
            InitializeComponent();

            this.textBox.Text = text;

            this.okButton.Click     += okButton_Click;
            this.cancelButton.Click += cancelButton_Click;
        }

        #endregion

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

        #region 확인 버튼 클릭시 처리하기 - okButton_Click(sender, e)

        /// <summary>
        /// 확인 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void okButton_Click(object sender, RoutedEventArgs e)
        {
            OnReturn(new ReturnEventArgs<string>(this.textBox.Text));
        }

        #endregion
        #region 취소 버튼 클릭시 처리하기 - cancelButton_Click(sender, e)

        /// <summary>
        /// 취소 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void cancelButton_Click(object sender, RoutedEventArgs e)
        {
            OnReturn(null);
        }

        #endregion
    }
}

using System.Windows;

using System.Windows.Navigation;

namespace TestProject

{

/// <summary>

/// 메인 페이지 함수

/// </summary>

public partial class MainPageFunction : PageFunction<string>

{

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

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

#region 생성자 - MainPageFunction(text)

/// <summary>

/// 생성자

/// </summary>

/// <param name="text">텍스트</param>

public MainPageFunction(string text)

{

InitializeComponent();

this.textBox.Text = text;

this.okButton.Click += okButton_Click;

this.cancelButton.Click += cancelButton_Click;

}

#endregion

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

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

#region 확인 버튼 클릭시 처리하기 - okButton_Click(sender, e)

/// <summary>

/// 확인 버튼 클릭시 처리하기

/// </summary>

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

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

private void okButton_Click(object sender, RoutedEventArgs e)

{

OnReturn(new ReturnEventArgs<string>(this.textBox.Text));

}

#endregion

#region 취소 버튼 클릭시 처리하기 - cancelButton_Click(sender, e)

/// <summary>

/// 취소 버튼 클릭시 처리하기

/// </summary>

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

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

private void cancelButton_Click(object sender, RoutedEventArgs e)

{

OnReturn(null);

}

#endregion

}

▶ MainPage.xaml


<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <TextBlock
                HorizontalAlignment="Center">
                <Hyperlink Name="hyperlink">페이지 함수 표시</Hyperlink>
            </TextBlock>
            <TextBlock Name="messageTextBlock"
                HorizontalAlignment="Center"
                Margin="0 10 0 0" />
        </StackPanel>
    </Grid>
</Page>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

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

<Grid>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<TextBlock

HorizontalAlignment="Center">

</TextBlock>

<TextBlock Name="messageTextBlock"

HorizontalAlignment="Center"

Margin="0 10 0 0" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;

namespace TestProject
{
    /// <summary>
    /// 메인 페이지
    /// </summary>
    public partial class MainPage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainPage()

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

            this.hyperlink.Click += hyperlink_Click;
        }

        #endregion

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

        #region 하이퍼링크 클릭시 처리하기 - hyperlink_Click(sender, e)

        /// <summary>
        /// 하이퍼링크 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void hyperlink_Click(object sender, RoutedEventArgs e)
        {
            MainPageFunction pageFunction = new MainPageFunction("테스트");

            pageFunction.Return += pageFunction_Return;

            NavigationService.Navigate(pageFunction);
        }

        #endregion
        #region 페이지 함수 반환시 처리하기 - pageFunction_Return(sender, e)

        /// <summary>
        /// 페이지 함수 반환시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void pageFunction_Return(object sender, ReturnEventArgs<string> e)
        {
            if(string.IsNullOrWhiteSpace(e.Result))
            {
                this.messageTextBlock.Text = "(결과 없음)";
            }
            else
            {
                this.messageTextBlock.Text = $"[{DateTime.Now.ToString("HH:mm:ss")}] {e.Result}";
            }
        }

        #endregion
    }
}

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Navigation;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : Page

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.hyperlink.Click += hyperlink_Click;

}

#endregion

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

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

#region 하이퍼링크 클릭시 처리하기 - hyperlink_Click(sender, e)

/// <summary>

/// 하이퍼링크 클릭시 처리하기

/// </summary>

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

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

private void hyperlink_Click(object sender, RoutedEventArgs e)

{

MainPageFunction pageFunction = new MainPageFunction("테스트");

pageFunction.Return += pageFunction_Return;

NavigationService.Navigate(pageFunction);

}

#endregion

#region 페이지 함수 반환시 처리하기 - pageFunction_Return(sender, e)

/// <summary>

/// 페이지 함수 반환시 처리하기

/// </summary>

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

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

private void pageFunction_Return(object sender, ReturnEventArgs<string> e)

{

if(string.IsNullOrWhiteSpace(e.Result))

{

this.messageTextBlock.Text = "(결과 없음)";

}

else

{

this.messageTextBlock.Text = $"[{DateTime.Now.ToString("HH:mm:ss")}] {e.Result}";

}

#endregion

}

TestProject.zip

[C#/WPF] Page 엘리먼트 : KeepAlive 속성을 사용해 저널에서 페이지 객체 유지하기

■ Page 엘리먼트의 KeepAlive 속성을 사용해 저널에서 페이지 객체를 유지하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    KeepAlive="True">
    <Grid>
        <TextBlock
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            An instance of this page is stored in the journal.
        </TextBlock>
    </Grid>
</Page>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

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

KeepAlive="True">

<Grid>

<TextBlock

HorizontalAlignment="Center"

VerticalAlignment="Center">

An instance of this page is stored in the journal.

</TextBlock>

</Grid>

</Page>

[C#/WPF] NavigationService 클래스 : Refresh 메소드를 사용해 페이지 갱신하기

■ NavigationService 클래스의 Refresh 메소드를 사용해 페이지를 갱신하는 방법을 보여준다. ▶ MainPage.xaml


<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <TextBlock Name="timeTextBlock" />
            <TextBlock
                Margin="0 10 0 0"
                HorizontalAlignment="Center">
                <Hyperlink Name="hyperlink">갱신하기</Hyperlink>
            </TextBlock>
        </StackPanel>
    </Grid>
</Page>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

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

<Grid>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<TextBlock

Margin="0 10 0 0"

HorizontalAlignment="Center">

</TextBlock>

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;

namespace TestProject
{
    /// <summary>
    /// 메인 페이지
    /// </summary>
    public partial class MainPage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainPage()

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

            Loaded               += Page_Loaded;
            this.hyperlink.Click += hyperlink_Click;
        }

        #endregion

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

        #region 페이지 로드시 처리하기 - Page_Loaded(sender, e)

        /// <summary>
        /// 페이지 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            this.timeTextBlock.Text = DateTime.Now.ToString();
        }

        #endregion
        #region 하이퍼링크 클릭시 처리하기 - hyperlink_Click(sender, e)

        /// <summary>
        /// 하이퍼링크 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void hyperlink_Click(object sender, RoutedEventArgs e)
        {
            NavigationService.Refresh();
        }

        #endregion
    }
}

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Navigation;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : Page

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

Loaded += Page_Loaded;

this.hyperlink.Click += hyperlink_Click;

}

#endregion

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

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

#region 페이지 로드시 처리하기 - Page_Loaded(sender, e)

/// <summary>

/// 페이지 로드시 처리하기

/// </summary>

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

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

private void Page_Loaded(object sender, RoutedEventArgs e)

{

this.timeTextBlock.Text = DateTime.Now.ToString();

}

#endregion

#region 하이퍼링크 클릭시 처리하기 - hyperlink_Click(sender, e)

/// <summary>

/// 하이퍼링크 클릭시 처리하기

/// </summary>

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

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

private void hyperlink_Click(object sender, RoutedEventArgs e)

{

NavigationService.Refresh();

}

#endregion

}

TestProject.zip

[C#/WPF] NavigationService 클래스 : Navigating 이벤트를 사용해 탐색 전 취소 여부 확인하기

■ NavigationService 클래스의 Navigating 이벤트를 사용해 탐색 전 취소 여부를 확인하는 방법을 보여준다. ▶ MainPage.xaml


<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <TextBlock
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <Hyperlink Name="hyperlink">두번째 페이지로 이동하기</Hyperlink>
        </TextBlock>
    </Grid>
</Page>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

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

<Grid>

<TextBlock

HorizontalAlignment="Center"

VerticalAlignment="Center">

</TextBlock>

</Grid>

</Page>

▶ MainPage.xaml.cs


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;

namespace TestProject
{
    /// <summary>
    /// 메인 페이지
    /// </summary>
    public partial class MainPage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainPage()

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

            Loaded               += Page_Loaded;
            this.hyperlink.Click += hyperlink_Click;
        }

        #endregion

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

        #region 네비게이션 서비스 탐색 전 처리하기 - NavigationService_Navigating(sender, e)

        /// <summary>
        /// 네비게이션 서비스 탐색 전 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void NavigationService_Navigating(object sender, NavigatingCancelEventArgs e)
        {
            NavigationService.Navigating -= NavigationService_Navigating;

            MessageBoxResult result;

            result = MessageBox.Show(Application.Current.MainWindow, "다음 페이지로 이동하시겠습니까?", "확인", MessageBoxButton.YesNo);

            if(result == MessageBoxResult.No)
            {
                e.Cancel = true;
            }
        }

        #endregion
        #region 페이지 로드시 처리하기 - Page_Loaded(sender, e)

        /// <summary>
        /// 페이지 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            NavigationService.Navigating += NavigationService_Navigating;
        }

        #endregion
        #region 하이퍼링크 클릭시 처리하기 - hyperlink_Click(sender, e)

        /// <summary>
        /// 하이퍼링크 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void hyperlink_Click(object sender, RoutedEventArgs e)
        {
            Uri uri = new Uri("SecondPage.xaml", UriKind.Relative);

            NavigationService.Navigate(uri);
        }

        #endregion
    }
}

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Navigation;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : Page

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

Loaded += Page_Loaded;

this.hyperlink.Click += hyperlink_Click;

}

#endregion

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

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

#region 네비게이션 서비스 탐색 전 처리하기 - NavigationService_Navigating(sender, e)

/// <summary>

/// 네비게이션 서비스 탐색 전 처리하기

/// </summary>

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

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

private void NavigationService_Navigating(object sender, NavigatingCancelEventArgs e)

{

NavigationService.Navigating -= NavigationService_Navigating;

MessageBoxResult result;

result = MessageBox.Show(Application.Current.MainWindow, "다음 페이지로 이동하시겠습니까?", "확인", MessageBoxButton.YesNo);

if(result == MessageBoxResult.No)

{

e.Cancel = true;

}

#endregion

#region 페이지 로드시 처리하기 - Page_Loaded(sender, e)

/// <summary>

/// 페이지 로드시 처리하기

/// </summary>

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

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

private void Page_Loaded(object sender, RoutedEventArgs e)

{

NavigationService.Navigating += NavigationService_Navigating;

}

#endregion

#region 하이퍼링크 클릭시 처리하기 - hyperlink_Click(sender, e)

/// <summary>

/// 하이퍼링크 클릭시 처리하기

/// </summary>

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

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

private void hyperlink_Click(object sender, RoutedEventArgs e)

{

Uri uri = new Uri("SecondPage.xaml", UriKind.Relative);

NavigationService.Navigate(uri);

}

#endregion

}

TestProject.zip

[C#/WPF] NavigationService 클래스 : Navigate 메소드 사용하기 (Uri 객체 전달)

■ NavigationService 클래스의 Navigate 메소드를 사용하는 방법을 보여준다. (Uri 객체 전달) ▶ MainPage.xaml


<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <TextBlock
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <Hyperlink Name="hyperlink">두번째 페이지로 이동하기</Hyperlink>
        </TextBlock>
    </Grid>
</Page>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

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

<Grid>

<TextBlock

HorizontalAlignment="Center"

VerticalAlignment="Center">

</TextBlock>

</Grid>

</Page>

▶ MainPage.xaml.cs


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;

namespace TestProject
{
    /// <summary>
    /// 메인 페이지
    /// </summary>
    public partial class MainPage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainPage()

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

            this.hyperlink.Click += hyperlink_Click;
        }

        #endregion

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

        #region 하이퍼링크 클릭시 처리하기 - hyperlink_Click(sender, e)

        /// <summary>
        /// 하이퍼링크 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void hyperlink_Click(object sender, RoutedEventArgs e)
        {
            Uri uri = new Uri("SecondPage.xaml", UriKind.Relative);

            NavigationService.Navigate(uri);
        }

        #endregion
    }
}

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Navigation;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : Page

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.hyperlink.Click += hyperlink_Click;

}

#endregion

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

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

#region 하이퍼링크 클릭시 처리하기 - hyperlink_Click(sender, e)

/// <summary>

/// 하이퍼링크 클릭시 처리하기

/// </summary>

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

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

private void hyperlink_Click(object sender, RoutedEventArgs e)

{

Uri uri = new Uri("SecondPage.xaml", UriKind.Relative);

NavigationService.Navigate(uri);

}

#endregion

}

▶ SecondPage.xaml


<Page x:Class="TestProject.SecondPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <TextBlock
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            FontSize="48">
            두번째 페이지
        </TextBlock>
    </Grid>
</Page>

<Page x:Class="TestProject.SecondPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

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

<Grid>

<TextBlock

HorizontalAlignment="Center"

VerticalAlignment="Center"

FontSize="48">

두번째 페이지

</TextBlock>

</Grid>

</Page>

▶ SecondPage.xaml.cs