■ 소개

이번에는 설치 프로그램에서 자주 사용되는 마법사 형식의 화면을 만듭니다.



[주의]
지금까지 설명한 조작 방법 등은 설명을 생략하거나 간략화하는 경우가 있습니다.

■ 개발 환경

Windows 10

Visual Studio Community 2015 Update 3

.NET Framework 4.x

■ 만들어 보자

태그 Window,,,

NavigationWindow 에,,,


다시 씁니다.


코드 비하인드에서 기본 클래스 Window
NavigationWindow로 다시 씁니다.


새 항목을 추가하여 페이지(WPF)를 세 개 추가합니다.
이름은 Page1.xaml , Page2.xaml , Page3.xaml입니다.


문서 개요에서 NavigationWindow를 선택하고 속성의 기타 지정에서 Source 속성을 Page1.xaml로 설정합니다.


Page1을 다음과 같이 편집합니다.


Page1.xaml

<Page x:Class="WpfApplication6.Page1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:WpfApplication6"
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
      Title="ページ(1/3)">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>

        <TextBlock Text="1ページ目" FontSize="36" Margin="10"/>

        <StackPanel Grid.Row="1">
            <CheckBox Content="チェック1" Margin="10"/>
            <TextBox Text="てきすと" Margin="10"/>
        </StackPanel>

        <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Right">
            <Button Content="次へ" Width="100" Margin="10" Click="Button_Click"/>
        </StackPanel>
    </Grid>
</Page>

NavigationService.Navigate 인수에 표시할 페이지를 전달합니다.

Page1.xaml.cs(발췌)

private static Page2 page2 = null;

// コンストラクタ
public Page1()
{
    InitializeComponent();
}

// 「次へ」ボタンの処理
private void Button_Click(object sender, RoutedEventArgs e)
{
    if (page2 == null)
    {
        // 次に表示するページ（ページ2）を生成、以後使いまわし
        page2 = new Page2();
    }

    // ページ2へ移動
    this.NavigationService.Navigate(page2);
}

Page2를 다음과 같이 편집합니다.


Page2.xaml

<Page x:Class="WpfApplication6.Page2"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:WpfApplication6"
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
      Title="ページ(2/3)">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>

        <TextBlock Text="2ページ目" FontSize="36" Margin="10"/>

        <TextBox Grid.Row="1" Text="TextBox"/>

        <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Right">
            <Button Content="次へ" Width="100" Margin="10" Click="Button_Click"/>
        </StackPanel>
    </Grid>
</Page>

Page2.xaml.cs(발췌)

private static Page3 page3 = null;

// コンストラクタ
public Page2()
{
    InitializeComponent();
}

// 「次へ」ボタンの処理
private void Button_Click(object sender, RoutedEventArgs e)
{
    if (page3 == null)
    {
        // 次に表示するページ（ページ3）を生成、以後使いまわし
        page3 = new Page3();
    }

    // ページ3へ移動
    this.NavigationService.Navigate(page3);
}

Page3를 다음과 같이 편집합니다.


Page3.xaml

<Page x:Class="WpfApplication6.Page3"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:WpfApplication6"
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
      Title="ページ(3/3)">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>

        <TextBlock Text="3ページ目" FontSize="36" Margin="10"/>
        <TextBlock Grid.Row="1"  Text="あああああ" FontSize="36" Margin="10"/>

        <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Right">
            <Button Content="完了" Width="100" Margin="10" Click="Button_Click"/>
        </StackPanel>
    </Grid>
</Page>

Page3.xaml.cs(발췌)

// コンストラクタ
public Page3()
{
    InitializeComponent();
}

// 「完了」ボタンの処理
private void Button_Click(object sender, RoutedEventArgs e)
{
    // メイン画面を閉じる
    App.Current.MainWindow.Close();
}

■ 움직여 보자

다음 버튼을 눌러 두 번째 페이지로 이동합니다.


다음 버튼을 눌러 세 번째 페이지로 이동합니다.


완료 버튼을 누르면 프로그램이 종료됩니다.
위에 표시된 버튼은 브라우저의 '뒤로', '앞으로' 버튼과 같은 기능입니다.
이를 표시하지 않으려면 NavigationWindow의 ShowsNavigationUI 속성을 false로 설정합니다.

세 번째 페이지에서 돌아가기 버튼으로 두 번째 페이지로 돌아왔습니다.
앞으로 버튼이 활성화되었습니다.


앞으로 버튼 드롭다운에서 페이지를 이동할 수 있습니다.


오시마

■참고 사이트

NavigationWindow 클래스 - MSDN

<< 첫 번째 기사 < 이전 기사 다음 기사 ＞