[C#/WPF] NavigationWindow 엘리먼트 : 페이지 탐색하기

■ NavigationWindow 엘리먼트를 사용해 페이지를 탐색하는 방법을 보여준다.

TestProject.zip

다운로드

▶ MainApplication.xaml

<Application
    x:Class="TestProject.MainApplication"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    StartupUri="MainWindow.xaml">
    <Application.Resources>
        <Style x:Key="HeaderTextStyleKey">
            <Setter Property="Label.VerticalAlignment" Value="Center"       />
            <Setter Property="Label.FontFamily"        Value="나눔고딕코딩" />
            <Setter Property="Label.FontWeight"        Value="Bold"         />
            <Setter Property="Label.FontSize"          Value="18"           />
            <Setter Property="Label.Foreground"        Value="#0066cc"      />
        </Style>
        <Style x:Key="LabelStyleKey" TargetType="{x:Type Label}">
            <Setter Property="Margin"              Value="0 0 0 5" />
            <Setter Property="VerticalAlignment"   Value="Top"     />
            <Setter Property="HorizontalAlignment" Value="Left"    />
            <Setter Property="FontWeight"          Value="Bold"    />
        </Style>
        <Style x:Key="ListHeaderStyleKey" TargetType="{x:Type Border}">
            <Setter Property="Height"     Value="35"      />
            <Setter Property="Padding"    Value="5"       />
            <Setter Property="Background" Value="#4e87d4" />
        </Style>
        <Style x:Key="ColumnHeaderStyleKey" TargetType="{x:Type DataGridColumnHeader}">
            <Setter Property="Height"     Value="35"      />
            <Setter Property="Padding"    Value="5"       />
            <Setter Property="Background" Value="#4e87d4" />
            <Setter Property="Foreground" Value="White"   />
        </Style>
        <Style x:Key="ListHeaderTextStyleKey" TargetType="{x:Type Label}">
            <Setter Property="Foreground"          Value="White"  />
            <Setter Property="VerticalAlignment"   Value="Center" />
            <Setter Property="HorizontalAlignment" Value="Left"   />
        </Style>
        <Style x:Key="ButtonStyleKey" TargetType="{x:Type Button}">
            <Setter Property="Width"               Value="125"      />
            <Setter Property="Height"              Value="25"       />
            <Setter Property="Margin"              Value="0 10 0 0" />
            <Setter Property="HorizontalAlignment" Value="Right"    />
        </Style>
    </Application.Resources>
</Application>

 

▶ MainWindow.xaml

<NavigationWindow
    x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="NavigationWindow 엘리먼트 : 페이지 탐색하기"
    Width="800"
    Height="600"
    FontFamily="나눔고딕코딩"
    FontSize="16"
    Source="ExpensePage.xaml">
</NavigationWindow>

 

▶ ExpensePage.xaml

<Page
    x:Class="TestProject.ExpensePage"
    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"
    mc:Ignorable="d"
    d:DesignWidth="600"
    d:DesignHeight="450"
	Title="비용 페이지">
    <Grid Margin="10 0 10 10">
        <Grid.Resources>
            <XmlDataProvider x:Key="ExpenseXmlDataProviderKey" XPath="Expenses">
                <x:XData>
                    <Expenses xmlns="">
                        <Person Name="홍길동" Department="총무">
                            <Expense ExpenseType="점심" ExpenseAmount="50" />
                            <Expense ExpenseType="교통" ExpenseAmount="50" />
                        </Person>
                        <Person Name="김영희" Department="영업">
                            <Expense ExpenseType="인쇄비" ExpenseAmount="50"  />
                            <Expense ExpenseType="경조"   ExpenseAmount="125" />
                        </Person>
                        <Person Name="이철수" Department="기술">
                            <Expense ExpenseType="잡지 구독"  ExpenseAmount="50"  />
                            <Expense ExpenseType="기구 구입"  ExpenseAmount="600" />
                            <Expense ExpenseType="소프트웨어" ExpenseAmount="500" />
                        </Person>
                        <Person Name="이동수" Department="재무">
                            <Expense ExpenseType="회식" ExpenseAmount="100" />
                        </Person>
                    </Expenses>
                </x:XData>
            </XmlDataProvider>
            <DataTemplate x:Key="NameDataTemplateKey">
                <Label Content="{Binding XPath=@Name}"/>
            </DataTemplate>
        </Grid.Resources>
        <Grid.Background>
            <ImageBrush ImageSource="IMAGE/background.png"  />
        </Grid.Background>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="230" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
            <RowDefinition />
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Label Grid.Row="0" Grid.Column="1"
            Style="{StaticResource HeaderTextStyleKey}"
            Content="비용 리포트 조회" />
        <Border Grid.Row="1" Grid.Column="1"
            Style="{StaticResource ListHeaderStyleKey}">
            <Label
                Style="{StaticResource ListHeaderTextStyleKey}"
                Content="성명" />
        </Border>
        <ListBox Name="listBox" Grid.Row="2" Grid.Column="1"
            ItemTemplate="{StaticResource NameDataTemplateKey}"
            ItemsSource="{Binding Source={StaticResource ExpenseXmlDataProviderKey}, XPath=Person}" />
        <Button Grid.Row="3" Grid.Column="1"
            Style="{StaticResource ButtonStyleKey}"
            Click="viewButton_Click"
            Content="조회" />
    </Grid>
</Page>

 

▶ ExpensePage.xaml.cs

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

namespace TestProject
{
    /// <summary>
    /// 비용 페이지
    /// </summary>
    public partial class ExpensePage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - ExpensePage()

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

        #endregion

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

        #region View 버튼 클릭시 처리하기 - viewButton_Click(sender, e)

        /// <summary>
        /// View 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void viewButton_Click(object sender, RoutedEventArgs e)
        {
            ExpenseReportPage page = new ExpenseReportPage(this.listBox.SelectedItem);

            NavigationService.Navigate(page);
        }

        #endregion
    }
}

 

▶ ExpenseReportPage.xaml

<Page
    x:Class="TestProject.ExpenseReportPage"
    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"
    mc:Ignorable="d"
    d:DesignWidth="600"
    d:DesignHeight="450"
    Title="비용 리포트 페이지">
    <Grid>
        <Grid.Resources>
            <DataTemplate x:Key="ExpenseTypeDataTemplateKey">
                <Label Content="{Binding XPath=@ExpenseType}"/>
            </DataTemplate>
            <DataTemplate x:Key="ExpenseAmountDataTemplateKey">
                <Label Content="{Binding XPath=@ExpenseAmount}"/>
            </DataTemplate>
        </Grid.Resources>
        <Grid.Background>
            <ImageBrush ImageSource="IMAGE/background.png" />
        </Grid.Background>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="230" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Label Grid.Row="0" Grid.Column="1"
            Style="{StaticResource HeaderTextStyleKey}"
            Content="대상자">
        </Label>
        <Grid Grid.Row="1" Grid.Column="1"
            Margin="10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition />
            </Grid.RowDefinitions>
            <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
                Orientation="Horizontal">
                <Label Style="{StaticResource LabelStyleKey}">성명 :</Label>
                <Label Style="{StaticResource LabelStyleKey}" Content="{Binding XPath=@Name}"></Label>
            </StackPanel>
            <StackPanel Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
                Orientation="Horizontal">
                <Label Style="{StaticResource LabelStyleKey}">부서 :</Label>
                <Label Style="{StaticResource LabelStyleKey}" Content="{Binding XPath=@Department}"></Label>
            </StackPanel>
            <Grid Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"
                HorizontalAlignment="Left"
                VerticalAlignment="Top">
                <DataGrid
                    RowHeaderWidth="0"
                    AutoGenerateColumns="False"
                    ColumnHeaderStyle="{StaticResource ColumnHeaderStyleKey}"
                    ItemsSource="{Binding XPath=Expense}">
                    <DataGrid.Columns>
                        <DataGridTextColumn Header="비용 구분" Binding="{Binding XPath=@ExpenseType}"   />
                        <DataGridTextColumn Header="금액"      Binding="{Binding XPath=@ExpenseAmount}" />
                    </DataGrid.Columns>
                </DataGrid>
            </Grid>
        </Grid>
    </Grid>
</Page>

 

▶ MainWindow.xaml.cs

using System.Windows.Controls;

namespace TestProject
{
    /// <summary>
    /// Expense Report Page
    /// </summary>
    public partial class ExpenseReportPage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - ExpenseReportPage()

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

        #endregion
        #region 생성자 - ExpenseReportPage(object sourceData) : this()

        /// <summary>
        /// 생성자
        /// </summary>
        /// <param name="sourceData">소스 데이터</param>
        public ExpenseReportPage(object sourceData) : this()
        {
            DataContext = sourceData;
        }

        #endregion
    }
}