■ DockLayoutManager 클래스에서 MVVM 패턴을 사용해 도킹 UI를 구축하는 방법을 보여준다.
▶ MainWindow.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<Window x:Class="TestProject.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars" xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking" xmlns:local="clr-namespace:TestProject" Width="800" Height="600" Title="MVVM 패턴을 사용해 도킹 UI 구축하기" FontFamily="나눔고딕코딩" FontSize="16"> <Window.DataContext> <local:DockLayoutManagerViewModel /> </Window.DataContext> <Window.Resources> <DataTemplate DataType="{x:Type local:DocumentViewModel}"> <Border Background="#ffbec8d9"> <ContentPresenter Content="{Binding Content}" /> </Border> </DataTemplate> <DataTemplate DataType="{x:Type local:PanelViewModel}"> <Border Background="#ffdadfe4"> <ContentPresenter Content="{Binding Content}" /> </Border> </DataTemplate> <Style TargetType="dxd:LayoutPanel"> <Setter Property="Caption" Value="{Binding DisplayName}" /> </Style> <Style TargetType="dxd:DocumentPanel"> <Setter Property="Caption" Value="{Binding DisplayName}" /> </Style> </Window.Resources> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition /> </Grid.RowDefinitions> <StackPanel Orientation="Horizontal"> <Button x:Name="AddPanel" Content="Add Panel" Command="{Binding AddPanelCommand}" /> <Button x:Name="AddDocument" Content="Add Document" Command="{Binding AddDocumentCommand}" /> </StackPanel> <dxb:BarManager Grid.Row="1"> <dxd:DockLayoutManager ItemsSource="{Binding PanelViewModelCollection}"> <dxd:LayoutGroup> <dxd:LayoutGroup x:Name="PanelHost" DestroyOnClosingChildren="False" /> <dxd:DocumentGroup x:Name="DocumentHost" DestroyOnClosingChildren="False" /> </dxd:LayoutGroup> </dxd:DockLayoutManager> </dxb:BarManager> </Grid> </Window> |
▶ MainWindow.xaml.cs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
using System.Windows; namespace TestProject { /// <summary> /// 메인 윈도우 /// </summary> public partial class MainWindow : Window { //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainWindow() /// <summary> /// 생성자 /// </summary> public MainWindow() { InitializeComponent(); } #endregion } } |
▶ DockLayoutManagerViewModel.cs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 |
using System.Collections.ObjectModel; using System.Windows; using System.Windows.Input; using DevExpress.Xpf.Mvvm; namespace TestProject { /// <summary> /// DockLayoutManager 뷰 모델 /// </summary> public class DockLayoutManagerViewModel : DependencyObject { //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 패널 뷰 모델 컬렉션 /// </summary> private ObservableCollection<PanelViewModel> panelViewModelCollection; /// <summary> /// 패널 추가 명령 /// </summary> private ICommand addPanelCommand; /// <summary> /// 문서 추가 명령 /// </summary> private ICommand addDocumentCommand; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 패널 뷰 모델 컬렉션 - PanelViewModelCollection /// <summary> /// 패널 뷰 모델 컬렉션 /// </summary> public ObservableCollection<PanelViewModel> PanelViewModelCollection { get { if(this.panelViewModelCollection == null) { this.panelViewModelCollection = new ObservableCollection<PanelViewModel>(); } return this.panelViewModelCollection; } } #endregion #region 패널 추가 명령 - AddPanelCommand /// <summary> /// 패널 추가 명령 /// </summary> public ICommand AddPanelCommand { get { if(this.addPanelCommand == null) { this.addPanelCommand = new DelegateCommand(AddPanel); } return this.addPanelCommand; } } #endregion #region 문서 추가 명령 - AddDocumentCommand /// <summary> /// 문서 추가 명령 /// </summary> public ICommand AddDocumentCommand { get { if(this.addDocumentCommand == null) { this.addDocumentCommand = new DelegateCommand(AddDocument); } return this.addDocumentCommand; } } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private #region 패널 추가하기 - AddPanel() /// <summary> /// 패널 추가하기 /// </summary> private void AddPanel() { PanelViewModel panelViewModel = new PanelViewModel(); panelViewModel.DisplayName = "Panel View Model"; panelViewModel.Content = "Panel View Model"; PanelViewModelCollection.Add(panelViewModel); } #endregion #region 문서 추가하기 - AddDocument() /// <summary> /// 문서 추가하기 /// </summary> private void AddDocument() { DocumentViewModel documentViewModel = new DocumentViewModel(); documentViewModel.DisplayName = "Document View Model"; documentViewModel.Content = "Document View Model"; this.PanelViewModelCollection.Add(documentViewModel); } #endregion } } |
