[DEVEXPRESS/WPF] FrameNavigationService 엘리먼트 사용하기

▶ HomeViewModel.cs

using System.Windows.Input;

using DevExpress.Xpf.Mvvm;

namespace HowToNavigateBetweenViewsViaFrameNavigationService
{
    /// <summary>
    /// 홈 뷰 모델
    /// </summary>
    public class HomeViewModel : ViewModelBase
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 상세 뷰 탐색 명령 - NavigateDetailViewCommand

        /// <summary>
        /// 상세 뷰 탐색 명령
        /// </summary>
        public ICommand NavigateDetailViewCommand { get; private set; }

        #endregion

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

        #region 탐색 서비스 - NavigationService

        /// <summary>
        /// 탐색 서비스
        /// </summary>
        private INavigationService NavigationService
        {
            get
            {
                return ServiceContainer.GetService<INavigationService>();
            }
        }

        #endregion

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

        #region 생성자 - HomeViewModel()

        /// <summary>
        /// 생성자
        /// </summary>
        public HomeViewModel()
        {
            NavigateDetailViewCommand = new DelegateCommand(OnNavigateDetailViewCommandExecute);
        }

        #endregion

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

        #region 상세 뷰 탐색 명령 실행시 처리하기 - OnNavigateDetailViewCommandExecute()

        /// <summary>
        /// 상세 뷰 탐색 명령 실행시 처리하기
        /// </summary>
        private void OnNavigateDetailViewCommandExecute()
        {
            NavigationService.Navigate("DetailView", null, this);
        }

        #endregion
    }
}

 

728x90

 

▶ HomeView.xaml

<UserControl
    x:Class="HowToNavigateBetweenViewsViaFrameNavigationService.HomeView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dxlc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol" 
    xmlns:local="clr-namespace:FrameNavigationServiceApplication">
    <UserControl.DataContext>
        <local:HomeViewModel />
    </UserControl.DataContext>
    <Grid>
        <dxlc:TileLayoutControl>
            <dxlc:Tile
                Size="Small"
                Command="{Binding NavigateDetailViewCommand}">
                <TextBlock
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Text="Details" />
            </dxlc:Tile>
        </dxlc:TileLayoutControl>
    </Grid>
</UserControl>

 

300x250

 

▶ DetailViewModel.cs

using System.Windows.Input;

using DevExpress.Xpf.Mvvm;

namespace HowToNavigateBetweenViewsViaFrameNavigationService
{
    /// <summary>
    /// 상세 뷰 모델
    /// </summary>
    public class DetailViewModel : NavigationViewModelBase
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region Back 탐색 명령 - NavigateBackCommand

        /// <summary>
        /// Back 탐색 명령
        /// </summary>
        public ICommand NavigateBackCommand { get; private set; }

        #endregion

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

        #region 탐색 서비스 - NavigationService

        /// <summary>
        /// 탐색 서비스
        /// </summary>
        private INavigationService NavigationService
        {
            get
            {
                return ServiceContainer.GetService<INavigationService>();
            }
        }

        #endregion

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

        #region 생성자 - DetailViewModel()

        /// <summary>
        /// 생성자
        /// </summary>
        public DetailViewModel()
        {
            NavigateBackCommand = new DelegateCommand(OnNavigateBackCommandExecute, OnNavigateBackCommandCanExecute);
        }

        #endregion

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

        #region 탐색된 경우 처리하기 - OnNavigatedTo()

        /// <summary>
        /// 탐색된 경우 처리하기
        /// </summary>
        protected override void OnNavigatedTo()
        {
            base.OnNavigatedTo();

            (NavigateBackCommand as DelegateCommand).RaiseCanExecuteChanged();
        }

        #endregion

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

        #region Back 탐색 명령 실행시 처리하기 - OnNavigateBackCommandExecute()

        /// <summary>
        /// Back 탐색 명령 실행시 처리하기
        /// </summary>
        private void OnNavigateBackCommandExecute()
        {
            NavigationService.GoBack();
        }

        #endregion

        #region Back 탐색 명령 실행 가능 여부 조사시 처리하기 - OnNavigateBackCommandCanExecute()

        /// <summary>
        /// Back 탐색 명령 실행 가능 여부 조사시 처리하기
        /// </summary>
        /// <returns>Back 탐색 명령 실행 가능 여부</returns>
        private bool OnNavigateBackCommandCanExecute()
        {
            return NavigationService != null && NavigationService.CanGoBack;
        }

        #endregion
    }
}

 

▶ DetailView.xaml

<UserControl
    x:Class="HowToNavigateBetweenViewsViaFrameNavigationService.DetailView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dxwui="http://schemas.devexpress.com/winfx/2008/xaml/windowsui"
    xmlns:local="clr-namespace:HowToNavigateBetweenViewsViaFrameNavigationService">
    <UserControl.DataContext>
        <local:DetailViewModel />
    </UserControl.DataContext>
    <Grid>
        <dxwui:PageAdornerControl
            Header="Details"
            Padding="10">
            <Button
                Content="Back"
                HorizontalAlignment="Right"
                VerticalAlignment="Bottom"
                Width="75"
                Command="{Binding NavigateBackCommand}" />
        </dxwui:PageAdornerControl>
    </Grid>
</UserControl>

 

▶ MainViewModel.cs

using System.Windows.Input;

using DevExpress.Xpf.Mvvm;

namespace HowToNavigateBetweenViewsViaFrameNavigationService
{
    /// <summary>
    /// 메인 뷰 모델
    /// </summary>
    public class MainViewModel : ViewModelBase
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 윈도우 로드시 명령 - WindowLoadedCommand

        /// <summary>
        /// 윈도우 로드시 명령
        /// </summary>
        public ICommand WindowLoadedCommand { get; private set; }

        #endregion

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

        #region 생성자 - MainViewModel()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainViewModel()
        {
            WindowLoadedCommand = new DelegateCommand(OnWindowLoadedCommandExecute);
        }

        #endregion

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

        #region 윈도우 로드시 명령 실행시 처리하기 - OnWindowLoadedCommandExecute()

        /// <summary>
        /// 윈도우 로드시 명령 실행시 처리하기
        /// </summary>
        private void OnWindowLoadedCommandExecute()
        {
            ServiceContainer.GetService<INavigationService>().Navigate("HomeView", null, this);
        }

        #endregion
    }
}

 

▶ MainWindow.xaml

<Window
    x:Class="HowToNavigateBetweenViewsViaFrameNavigationService.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dxm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
    xmlns:dxwui="http://schemas.devexpress.com/winfx/2008/xaml/windowsui"
    xmlns:dxwuin="http://schemas.devexpress.com/winfx/2008/xaml/windowsui/navigation"
    xmlns:local="clr-namespace:HowToNavigateBetweenViewsViaFrameNavigationService" 
    Title="FrameNavigationService"
    Width="600"
    Height="450">
    <Window.DataContext>
        <local:MainViewModel />
    </Window.DataContext>
    <dxm:Interaction.Triggers>
        <dxm:EventToCommand EventName="Loaded" Command="{Binding WindowLoadedCommand}" />
    </dxm:Interaction.Triggers>
    <dxm:Interaction.Behaviors>
        <dxwuin:FrameNavigationService Frame="{Binding ElementName=frame}" />
    </dxm:Interaction.Behaviors>
    <Grid>
        <dxwui:NavigationFrame x:Name="frame" />
    </Grid>
</Window>