Windows 앱에 대한 탐색 기록 및 뒤로 탐색

앱에서 뒤로 탐색을 구현하려면 앱 UI의 왼쪽 위 모서리에 뒤로 단추를 배치합니다. 사용자는 뒤로 버튼이 앱의 탐색 기록에서 이전 위치로 이동하기를 기대합니다. 기본적으로 프레임 컨트롤은 BackStack 및 ForwardStack에 탐색 작업을 기록합니다. 그러나 탐색 기록에 추가되는 탐색 작업을 수정할 수 있습니다.

뒤로 버튼

뒤로 단추를 앱의 왼쪽 위 모서리에 배치하는 것이 좋습니다. 제목 표시줄을 사용자 지정하는 경우 제목 표시줄에 뒤로 단추를 놓습니다. 자세한 내용은 제목 표시줄 디자인 > 뒤로 단추를 참조하세요.

TitleBar 컨트롤을 사용하여 사용자 지정 제목 표시줄을 만드는 경우 기본 제공 뒤로 단추를 사용합니다. IsBackButtonVisible을 true필요에 따라 IsBackButtonEnabled로 설정하고 탐색할 BackRequested 이벤트를 처리합니다.

독립 실행형 뒤로 단추를 만들려면 리소스와 함께 TitleBarBackButtonStyle 컨트롤을 사용하고 앱 UI의 왼쪽 위 모서리에 단추를 배치합니다(자세한 내용은 아래 XAML 코드 예제 참조).

<Page>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Button x:Name="BackButton"
                Click="BackButton_Click"
                Style="{StaticResource TitleBarBackButtonStyle}"
                IsEnabled="{x:Bind Frame.CanGoBack, Mode=OneWay}" 
                ToolTipService.ToolTip="Back"/>

    </Grid>
</Page>

앱에 최상위 CommandBar가 있는 경우 해당 영역에 컨트롤을 Button 배치합니다 CommandBar.Content .

<Page>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        
        <CommandBar>
            <CommandBar.Content>
                <Button x:Name="BackButton"
                        Click="BackButton_Click"
                        Style="{StaticResource TitleBarBackButtonStyle}"
                        IsEnabled="{x:Bind Frame.CanGoBack, Mode=OneWay}" 
                        ToolTipService.ToolTip="Back"/>
            </CommandBar.Content>
        
            <AppBarButton Icon="Delete" Label="Delete"/>
            <AppBarButton Icon="Save" Label="Save"/>
        </CommandBar>
    </Grid>
</Page>

앱 내 UI 요소의 불필요한 이동을 최소화하려면, 백스택(IsEnabled="{x:Bind Frame.CanGoBack, Mode=OneWay}")에 아무 것도 없을 경우 비활성화된 뒤로 가기 버튼을 표시하세요. 그러나 앱에 백스택이 없을 것으로 예상하는 경우 뒤로 단추를 전혀 표시할 필요가 없습니다.

뒤로 가기

이 섹션에서는 뒤로 탐색을 처리하는 코드를 보여 줍니다. 뒤로 탐색 요청의 일반적인 원본은 TitleBar.BackRequested 이벤트, NavigationView.BackRequested 이벤트 또는 뒤로 단추 클릭 이벤트입니다.

이 예제 코드는 뒤로 단추를 사용하여 뒤로 탐색 동작을 구현하는 방법을 보여 줍니다. 코드는 Button Click 이벤트에 응답하여 이동합니다.

뒤로 단추를 사용하거나 NavigationView 컨트롤에서 TitleBar 프레임 탐색 코드를 각 페이지에 대해 복제할 필요 없이 이벤트 처리기 메서드에 직접 배치할 수 있습니다. 그러나 앱 페이지의 콘텐츠에 뒤로 단추를 만드는 경우 각 페이지의 코드 숨김 파일에서 프레임 탐색 코드를 복제해야 합니다. 중복을 방지하려면 코드 숨김 페이지의 클래스에 AppApp.xaml.* 탐색 관련 코드를 배치한 다음 여기에 표시된 대로 앱의 어디에서나 호출할 수 있습니다.

// MainPage.xaml.cs
private void BackButton_Click(object sender, RoutedEventArgs e)
{
    App.TryGoBack();
}

// App.xaml.cs
//
// Add this method to the App class.
public static bool TryGoBack()
{
    Frame rootFrame = Window.Content as Frame;
    if (rootFrame.CanGoBack)
    {
        rootFrame.GoBack();
        return true;
    }
    return false;
}

public static Window Window { get { return m_window; } }
private static Window m_window;

// MainPage.h
namespace winrt::AppName::implementation
{
    struct MainPage : MainPageT<MainPage>
    {
        MainPage();
 
        void MainPage::BackButton_Click(IInspectable const&, RoutedEventArgs const&)
        {
            App::TryGoBack();
        }
    };
}

// App.xaml.h
using namespace winrt;
using namespace Windows::UI::Xaml::Controls;

struct App : AppT<App>
{
    App();

    static winrt::Microsoft::UI::Xaml::Window Window() { return window; };

    // ...

    // Perform back navigation if possible.
    static bool TryGoBack()
    {
        Frame rootFrame{ nullptr };
        auto content = App::Window().Content();
        if (content)
        {
            rootFrame = content.try_as<Frame>();
            if (rootFrame.CanGoBack())
            {
                rootFrame.GoBack();
                return true;
            }
        }
        return false;
    }

private:
    static winrt::Microsoft::UI::Xaml::Window window;
};

// App.xaml.cpp
winrt::Microsoft::UI::Xaml::Window App::window{ nullptr };

관련된 문서

• 탐색 기본 사항
• 기본 탐색 구현