DEVEXPRESS Archives - 20 중 5 번째 페이지

[C#/WPF/DEVEXPRESS] DockLayoutManager 클래스 : 레이아웃 패널 내에서 컨트롤 레이아웃 구축하기

■ DockLayoutManager 클래스의 레이아웃 패널 내에서 컨트롤 레이아웃을 구축하는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"
    xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
    Width="800"
    Height="600"
    Title="레이아웃 패널 내에서 컨트롤 레이아웃 구축하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <dxd:DockLayoutManager x:Name="dockLayoutManager">
        <dxd:DockLayoutManager.LayoutRoot>
            <dxd:LayoutGroup Name="rootLayoutGroup">
                <dxd:LayoutPanel Caption="Panel 1">
                    <dxd:LayoutGroup Orientation="Vertical">
                        <dxd:LayoutGroup
                            GroupBorderStyle="GroupBox"
                            ShowCaption="True"
                            Caption="Personal info"
                            Orientation="Vertical">
                            <dxd:LayoutControlItem Caption="Title">
                                <dxe:TextEdit />
                            </dxd:LayoutControlItem>
                            <dxd:LayoutGroup ItemHeight="Auto">
                                <dxd:LayoutControlItem Caption="First name">
                                    <dxe:TextEdit />
                                </dxd:LayoutControlItem>
                                <dxd:LayoutControlItem Caption="Last name">
                                    <dxe:TextEdit />
                                </dxd:LayoutControlItem>
                            </dxd:LayoutGroup>
                        </dxd:LayoutGroup>
                        <dxd:LayoutGroup
                            GroupBorderStyle="GroupBox"
                            Caption="Notes"
                            ShowCaption="True">
                            <dxd:LayoutControlItem
                                Caption="Notes"
                                ShowCaption="False">
                                <dxe:TextEdit />
                            </dxd:LayoutControlItem>
                        </dxd:LayoutGroup>
                    </dxd:LayoutGroup>
                </dxd:LayoutPanel>
                <dxd:LayoutPanel Caption="Panel 2">
                    <dxd:LayoutGroup
                        GroupBorderStyle="GroupBox"
                        ShowCaption="True"
                        Caption="Address info"
                        Orientation="Vertical">
                        <dxd:LayoutGroup ItemHeight="Auto">
                            <dxd:LayoutControlItem Caption="Country">
                                <dxe:TextEdit />
                            </dxd:LayoutControlItem>
                            <dxd:LayoutControlItem Caption="Region">
                                <dxe:TextEdit />
                            </dxd:LayoutControlItem>
                        </dxd:LayoutGroup>
                        <dxd:LayoutGroup ItemHeight="Auto">
                            <dxd:LayoutControlItem Caption="City">
                                <dxe:TextEdit />
                            </dxd:LayoutControlItem>
                            <dxd:LayoutControlItem Caption="Postal code">
                                <dxe:TextEdit />
                            </dxd:LayoutControlItem>
                        </dxd:LayoutGroup>
                        <dxd:LayoutControlItem Caption="Address">
                            <dxe:TextEdit />
                        </dxd:LayoutControlItem>
                    </dxd:LayoutGroup>
                </dxd:LayoutPanel>
            </dxd:LayoutGroup>
        </dxd:DockLayoutManager.LayoutRoot>
    </dxd:DockLayoutManager>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"

xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"

Width="800"

Height="600"

Title="레이아웃 패널 내에서 컨트롤 레이아웃 구축하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<dxd:DockLayoutManager x:Name="dockLayoutManager">

<dxd:DockLayoutManager.LayoutRoot>

<dxd:LayoutGroup Name="rootLayoutGroup">

<dxd:LayoutPanel Caption="Panel 1">

<dxd:LayoutGroup Orientation="Vertical">

<dxd:LayoutGroup

GroupBorderStyle="GroupBox"

ShowCaption="True"

Caption="Personal info"

Orientation="Vertical">

<dxd:LayoutControlItem Caption="Title">

<dxe:TextEdit />

</dxd:LayoutControlItem>

<dxd:LayoutGroup ItemHeight="Auto">

<dxd:LayoutControlItem Caption="First name">

<dxe:TextEdit />

</dxd:LayoutControlItem>

<dxd:LayoutControlItem Caption="Last name">

<dxe:TextEdit />

</dxd:LayoutControlItem>

</dxd:LayoutGroup>

<dxd:LayoutGroup

GroupBorderStyle="GroupBox"

Caption="Notes"

ShowCaption="True">

<dxd:LayoutControlItem

Caption="Notes"

ShowCaption="False">

<dxe:TextEdit />

</dxd:LayoutControlItem>

</dxd:LayoutGroup>

</dxd:LayoutPanel>

<dxd:LayoutPanel Caption="Panel 2">

<dxd:LayoutGroup

GroupBorderStyle="GroupBox"

ShowCaption="True"

Caption="Address info"

Orientation="Vertical">

<dxd:LayoutGroup ItemHeight="Auto">

<dxd:LayoutControlItem Caption="Country">

<dxe:TextEdit />

</dxd:LayoutControlItem>

<dxd:LayoutControlItem Caption="Region">

<dxe:TextEdit />

</dxd:LayoutControlItem>

</dxd:LayoutGroup>

<dxd:LayoutGroup ItemHeight="Auto">

<dxd:LayoutControlItem Caption="City">

<dxe:TextEdit />

</dxd:LayoutControlItem>

<dxd:LayoutControlItem Caption="Postal code">

<dxe:TextEdit />

</dxd:LayoutControlItem>

</dxd:LayoutGroup>

<dxd:LayoutControlItem Caption="Address">

<dxe:TextEdit />

</dxd:LayoutControlItem>

</dxd:LayoutGroup>

</dxd:LayoutPanel>

</dxd:LayoutGroup>

</dxd:DockLayoutManager.LayoutRoot>

</dxd:DockLayoutManager>

</Window>

▶ MainWindow.xaml.cs


using System.Windows;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

        #endregion
    }
}

using System.Windows;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

}

#endregion

}

TestProject.zip

[C#/WPF/DEVEXPRESS] DockLayoutManager 클래스 : 도킹 패널의 복합 레이아웃 생성하기

■ DockLayoutManager 클래스에서 도킹 패널의 복합 레이아웃을 생성하는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"
    xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/core"
    Width="800"
    Height="600"
    Title="도킹 패널의 복합 레이아웃 생성하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <dxd:DockLayoutManager x:Name="dockLayoutManager"
            dxc:ThemeManager.ThemeName="Office2007Blue">
            <dxd:LayoutGroup x:Name="rootLayoutGroup"
                Orientation="Horizontal">
                <dxd:LayoutGroup x:Name="layoutGroup1"
                    Orientation="Vertical"
                    ItemWidth="3*">
                    <dxd:LayoutGroup x:Name="layoutGroup2"
                        Orientation="Horizontal"
                        ItemHeight="1.5*">
                        <dxd:LayoutPanel x:Name="toolboxLayoutPanel"
                            Caption="Toolbox" />
                        <dxd:LayoutPanel x:Name="findResultLayoutPanel"
                            Caption="Find Result" />
                        <dxd:DocumentGroup x:Name="documentGroup1">
                            <dxd:DocumentPanel Caption="Document 1">
                                <RichTextBox />
                            </dxd:DocumentPanel>
                            <dxd:DocumentPanel Caption="Document 2">
                                <RichTextBox />
                            </dxd:DocumentPanel>
                        </dxd:DocumentGroup>
                    </dxd:LayoutGroup>
                        <dxd:TabbedGroup>
                            <dxd:LayoutPanel x:Name="errorListLayoutPanel"
                                Caption="Error List">
                            </dxd:LayoutPanel>
                            <dxd:LayoutPanel x:Name="outputLayoutPanel"
                                Caption="Output">
                            </dxd:LayoutPanel>
                        </dxd:TabbedGroup>
                </dxd:LayoutGroup>
                <dxd:LayoutGroup x:Name="layoutGroup3"
                    Orientation="Vertical">
                    <dxd:LayoutPanel x:Name="solutionExplorerLayoutPanel"
                        ItemHeight="1*"
                        Caption="Solution Explorer">
                    </dxd:LayoutPanel>
                    <dxd:LayoutPanel x:Name="propertyLayoutPanel"
                        ItemHeight="1*"
                        Caption="Property">
                    </dxd:LayoutPanel>
                </dxd:LayoutGroup>
            </dxd:LayoutGroup>
        </dxd:DockLayoutManager>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"

xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/core"

Width="800"

Height="600"

Title="도킹 패널의 복합 레이아웃 생성하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<dxd:DockLayoutManager x:Name="dockLayoutManager"

dxc:ThemeManager.ThemeName="Office2007Blue">

<dxd:LayoutGroup x:Name="rootLayoutGroup"

Orientation="Horizontal">

<dxd:LayoutGroup x:Name="layoutGroup1"

Orientation="Vertical"

ItemWidth="3*">

<dxd:LayoutGroup x:Name="layoutGroup2"

Orientation="Horizontal"

ItemHeight="1.5*">

<dxd:LayoutPanel x:Name="toolboxLayoutPanel"

Caption="Toolbox" />

<dxd:LayoutPanel x:Name="findResultLayoutPanel"

Caption="Find Result" />

<dxd:DocumentGroup x:Name="documentGroup1">

<dxd:DocumentPanel Caption="Document 1">

</dxd:DocumentPanel>

<dxd:DocumentPanel Caption="Document 2">

</dxd:DocumentPanel>

</dxd:DocumentGroup>

</dxd:LayoutGroup>

<dxd:TabbedGroup>

<dxd:LayoutPanel x:Name="errorListLayoutPanel"

Caption="Error List">

</dxd:LayoutPanel>

<dxd:LayoutPanel x:Name="outputLayoutPanel"

Caption="Output">

</dxd:LayoutPanel>

</dxd:TabbedGroup>

</dxd:LayoutGroup>

<dxd:LayoutGroup x:Name="layoutGroup3"

Orientation="Vertical">

<dxd:LayoutPanel x:Name="solutionExplorerLayoutPanel"

ItemHeight="1*"

Caption="Solution Explorer">

</dxd:LayoutPanel>

<dxd:LayoutPanel x:Name="propertyLayoutPanel"

ItemHeight="1*"

Caption="Property">

</dxd:LayoutPanel>

</dxd:LayoutGroup>

</dxd:DockLayoutManager>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using System.Windows;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

        #endregion
    }
}

using System.Windows;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

}

#endregion

}

TestProject.zip

[C#/WPF/DEVEXPRESS] DockLayoutManager 클래스 : TabbedGroup과 DocumentGroup 그룹 생성하기

■ DockLayoutManager 클래스에서 TabbedGroup과 DocumentGroup 그룹을 생성하는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/core"
    xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"
    Width="800"
    Height="600"
    Title="TabbedGroup과 DocumentGroup 그룹 생성하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <dxd:DockLayoutManager x:Name="dockLayoutManager"
            dxc:ThemeManager.ThemeName="Office2007Blue">
            <dxd:LayoutGroup x:Name="rootLayoutGroup"
                Orientation="Horizontal">
                <dxd:TabbedGroup SelectedTabIndex="1">
                    <dxd:LayoutPanel x:Name="outputLayoutPanel"
                        Caption="Output">
                        <RichTextBox />
                    </dxd:LayoutPanel>
                    <dxd:LayoutPanel x:Name="findResultLayoutPanel"
                        Caption="Find Result">
                        <RichTextBox />
                    </dxd:LayoutPanel>
                </dxd:TabbedGroup>
                <dxd:DocumentGroup x:Name="documentGroup"
                    SelectedTabIndex="1">
                    <dxd:DocumentPanel Caption="Document 1">
                        <RichTextBox />
                    </dxd:DocumentPanel>
                    <dxd:DocumentPanel Caption="Document 2">
                        <RichTextBox />
                    </dxd:DocumentPanel>
                </dxd:DocumentGroup>
            </dxd:LayoutGroup>
        </dxd:DockLayoutManager>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/core"

xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"

Width="800"

Height="600"

Title="TabbedGroup과 DocumentGroup 그룹 생성하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<dxd:DockLayoutManager x:Name="dockLayoutManager"

dxc:ThemeManager.ThemeName="Office2007Blue">

<dxd:LayoutGroup x:Name="rootLayoutGroup"

Orientation="Horizontal">

<dxd:TabbedGroup SelectedTabIndex="1">

<dxd:LayoutPanel x:Name="outputLayoutPanel"

Caption="Output">

</dxd:LayoutPanel>

<dxd:LayoutPanel x:Name="findResultLayoutPanel"

Caption="Find Result">

</dxd:LayoutPanel>

</dxd:TabbedGroup>

<dxd:DocumentGroup x:Name="documentGroup"

SelectedTabIndex="1">

<dxd:DocumentPanel Caption="Document 1">

</dxd:DocumentPanel>

<dxd:DocumentPanel Caption="Document 2">

</dxd:DocumentPanel>

</dxd:DocumentGroup>

</dxd:LayoutGroup>

</dxd:DockLayoutManager>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using System.Windows;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

        #endregion
    }
}

using System.Windows;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

}

#endregion

}

TestProject.zip

[C#/WPF/DEVEXPRESS] DockLayoutManager 클래스 : XAML로 플로팅 패널 생성하기

■ DockLayoutManager 클래스에서 XAML로 플로팅 패널을 생성하는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/core"
    xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"
    Width="800"
    Height="600"
    Title="XAML로 플로팅 패널 생성하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <dxd:DockLayoutManager x:Name="dockLayoutManager"
            dxc:ThemeManager.ThemeName="Office2007Blue">
            <dxd:LayoutGroup x:Name="rootLayoutGroup"
                Orientation="Horizontal">
                <dxd:DocumentGroup x:Name="documentGroup">
                    <dxd:DocumentPanel x:Name="documentPanel"
                        Caption="Document">
                        <RichTextBox />
                    </dxd:DocumentPanel>
                </dxd:DocumentGroup>
            </dxd:LayoutGroup>
            <dxd:DockLayoutManager.FloatGroups>
                <dxd:FloatGroup
                    FloatLocation="30 30"
                    FloatSize="400 200">
                    <dxd:LayoutPanel x:Name="propertyLayoutPanel"
                        Caption="Property">
                        <RichTextBox />
                    </dxd:LayoutPanel>
                    <dxd:LayoutPanel x:Name="messageLayoutPanel"
                        Caption="Messages">
                        <RichTextBox />
                    </dxd:LayoutPanel>
                </dxd:FloatGroup>
                <dxd:FloatGroup
                    FloatLocation="100 100"
                    FloatSize="200 150">
                    <dxd:LayoutPanel x:Name="findResultLayoutPanel"
                        Caption="Find Result">
                        <RichTextBox />
                    </dxd:LayoutPanel>
                </dxd:FloatGroup>
            </dxd:DockLayoutManager.FloatGroups>
        </dxd:DockLayoutManager>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/core"

xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"

Width="800"

Height="600"

Title="XAML로 플로팅 패널 생성하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<dxd:DockLayoutManager x:Name="dockLayoutManager"

dxc:ThemeManager.ThemeName="Office2007Blue">

<dxd:LayoutGroup x:Name="rootLayoutGroup"

Orientation="Horizontal">

<dxd:DocumentGroup x:Name="documentGroup">

<dxd:DocumentPanel x:Name="documentPanel"

Caption="Document">

</dxd:DocumentPanel>

</dxd:DocumentGroup>

</dxd:LayoutGroup>

<dxd:DockLayoutManager.FloatGroups>

<dxd:FloatGroup

FloatLocation="30 30"

FloatSize="400 200">

<dxd:LayoutPanel x:Name="propertyLayoutPanel"

Caption="Property">

</dxd:LayoutPanel>

<dxd:LayoutPanel x:Name="messageLayoutPanel"

Caption="Messages">

</dxd:LayoutPanel>

</dxd:FloatGroup>

<dxd:FloatGroup

FloatLocation="100 100"

FloatSize="200 150">

<dxd:LayoutPanel x:Name="findResultLayoutPanel"

Caption="Find Result">

</dxd:LayoutPanel>

</dxd:FloatGroup>

</dxd:DockLayoutManager.FloatGroups>

</dxd:DockLayoutManager>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using System.Windows;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

        #endregion
    }
}

using System.Windows;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

}

#endregion

}

TestProject.zip

[C#/WPF/DEVEXPRESS] DockLayoutManager 클래스 : 자동 숨김 패널 생성하기

■ DockLayoutManager 클래스에서 자동 숨김 패널을 생성하는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/core"
    xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"
    Width="800"
    Height="600"
    Title="자동 숨김 패널 생성하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <dxd:DockLayoutManager x:Name="dockLayoutManager"
            dxc:ThemeManager.ThemeName="Office2007Blue">
            <dxd:LayoutGroup x:Name="rootLayoutGroup"
                Orientation="Horizontal">
                <dxd:DocumentGroup x:Name="documentGroup">
                    <dxd:DocumentPanel x:Name="documentPanel"
                        Caption="Document">
                        <RichTextBox />
                    </dxd:DocumentPanel>
                </dxd:DocumentGroup>
            </dxd:LayoutGroup>
            <dxd:DockLayoutManager.AutoHideGroups>
                <dxd:AutoHideGroup DockType="Right">
                    <dxd:LayoutPanel x:Name="propertyLayoutPanel"
                        ItemWidth="150"
                        Caption="Property">
                        <RichTextBox />
                    </dxd:LayoutPanel>
                    <dxd:LayoutPanel x:Name="messageLayoutPanel"
                        ItemWidth="150"
                        Caption="Message">
                        <RichTextBox />
                    </dxd:LayoutPanel>
                </dxd:AutoHideGroup>
                <dxd:AutoHideGroup DockType="Left">
                    <dxd:LayoutPanel x:Name="errorLayoutPanel"
                        ItemWidth="150"
                        Caption="Error">
                        <RichTextBox />
                    </dxd:LayoutPanel>
                    <dxd:LayoutPanel x:Name="warningLayoutPanel"
                        ItemWidth="150"
                        Caption="Warning">
                        <RichTextBox />
                    </dxd:LayoutPanel>
                </dxd:AutoHideGroup>
                <dxd:AutoHideGroup DockType="Left">
                    <dxd:LayoutPanel x:Name="findResultLayoutPanel"
                        ItemWidth="150"
                        Caption="Find Result">
                        <RichTextBox />
                    </dxd:LayoutPanel>
                </dxd:AutoHideGroup>
            </dxd:DockLayoutManager.AutoHideGroups>
        </dxd:DockLayoutManager>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/core"

xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"

Width="800"

Height="600"

Title="자동 숨김 패널 생성하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<dxd:DockLayoutManager x:Name="dockLayoutManager"

dxc:ThemeManager.ThemeName="Office2007Blue">

<dxd:LayoutGroup x:Name="rootLayoutGroup"

Orientation="Horizontal">

<dxd:DocumentGroup x:Name="documentGroup">

<dxd:DocumentPanel x:Name="documentPanel"

Caption="Document">

</dxd:DocumentPanel>

</dxd:DocumentGroup>

</dxd:LayoutGroup>

<dxd:DockLayoutManager.AutoHideGroups>

<dxd:AutoHideGroup DockType="Right">

<dxd:LayoutPanel x:Name="propertyLayoutPanel"

ItemWidth="150"

Caption="Property">

</dxd:LayoutPanel>

<dxd:LayoutPanel x:Name="messageLayoutPanel"

ItemWidth="150"

Caption="Message">

</dxd:LayoutPanel>

</dxd:AutoHideGroup>

<dxd:AutoHideGroup DockType="Left">

<dxd:LayoutPanel x:Name="errorLayoutPanel"

ItemWidth="150"

Caption="Error">

</dxd:LayoutPanel>

<dxd:LayoutPanel x:Name="warningLayoutPanel"

ItemWidth="150"

Caption="Warning">

</dxd:LayoutPanel>

</dxd:AutoHideGroup>

<dxd:AutoHideGroup DockType="Left">

<dxd:LayoutPanel x:Name="findResultLayoutPanel"

ItemWidth="150"

Caption="Find Result">

</dxd:LayoutPanel>

</dxd:AutoHideGroup>

</dxd:DockLayoutManager.AutoHideGroups>

</dxd:DockLayoutManager>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using System.Windows;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

        #endregion
    }
}

using System.Windows;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

}

#endregion

}

TestProject.zip

[C#/WPF/DEVEXPRESS] DockLayoutManager 클래스 : 2개 탭을 갖는 DocumentGroup 생성하기

■ DockLayoutManager 클래스에서 2개 탭을 갖는 DocumentGroup을 생성하는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/core"
    xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"
    Width="800"
    Height="600"
    Title="2개 탭을 갖는 DocumentGroup 생성하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <dxd:DockLayoutManager x:Name="dockLayoutManager">
            <dxd:LayoutGroup x:Name="rootLayoutGroup"
                Orientation="Vertical">
                <dxd:DocumentGroup x:Name="documentGroup"
                    ItemHeight="2*"
                    SelectedTabIndex="1">
                    <dxd:DocumentPanel x:Name="documentPanel1"
                        Caption="Document 1">
                        <RichTextBox />
                    </dxd:DocumentPanel>
                    <dxd:DocumentPanel x:Name="documentPanel2"
                        Caption="Document 2">
                        <RichTextBox />
                    </dxd:DocumentPanel>
                </dxd:DocumentGroup>
                <dxd:LayoutPanel x:Name="outputLayoutPanel"
                    Caption="Output" />
            </dxd:LayoutGroup>
        </dxd:DockLayoutManager>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/core"

xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"

Width="800"

Height="600"

Title="2개 탭을 갖는 DocumentGroup 생성하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<dxd:DockLayoutManager x:Name="dockLayoutManager">

<dxd:LayoutGroup x:Name="rootLayoutGroup"

Orientation="Vertical">

<dxd:DocumentGroup x:Name="documentGroup"

ItemHeight="2*"

SelectedTabIndex="1">

<dxd:DocumentPanel x:Name="documentPanel1"

Caption="Document 1">

</dxd:DocumentPanel>

<dxd:DocumentPanel x:Name="documentPanel2"

Caption="Document 2">

</dxd:DocumentPanel>

</dxd:DocumentGroup>

<dxd:LayoutPanel x:Name="outputLayoutPanel"

Caption="Output" />

</dxd:LayoutGroup>

</dxd:DockLayoutManager>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using System.Windows;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

        #endregion
    }
}

using System.Windows;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

}

#endregion

}

TestProject.zip

[C#/WPF/DEVEXPRESS] DockLayoutManager 클래스 : DocumentGroup을 위한 MDI 모드 활성화 하기

■ DockLayoutManager 클래스에서 DocumentGroup을 위한 MDI 모드를 활성화하는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/core"
    xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"
    dxc:ThemeManager.ThemeName="Office2007Blue"
    Width="800"
    Height="600"
    Title="DocumentGroup을 위한 MDI 모드 활성화 하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <dxd:DockLayoutManager x:Name="dockLayoutManager">
            <dxd:LayoutGroup x:Name="rootLayoutGroup"
                Orientation="Horizontal">
                <dxd:DocumentGroup x:Name="documentGroup"
                    MDIStyle="MDI"
                    ItemWidth="2*">
                    <dxd:DocumentPanel x:Name="documentPanel1"
                        MDISize="200 100"
                        Caption="Document 1">
                        <RichTextBox />
                    </dxd:DocumentPanel>
                    <dxd:DocumentPanel x:Name="documentPanel2"
                        MDILocation="50 120"
                        MDISize="200 100"
                        Caption="Document 2">
                        <RichTextBox />
                    </dxd:DocumentPanel>
                </dxd:DocumentGroup>
                <dxd:LayoutPanel x:Name="outputLayoutPanel"
                    Caption="Output" />
            </dxd:LayoutGroup>
        </dxd:DockLayoutManager>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/core"

xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"

dxc:ThemeManager.ThemeName="Office2007Blue"

Width="800"

Height="600"

Title="DocumentGroup을 위한 MDI 모드 활성화 하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<dxd:DockLayoutManager x:Name="dockLayoutManager">

<dxd:LayoutGroup x:Name="rootLayoutGroup"

Orientation="Horizontal">

<dxd:DocumentGroup x:Name="documentGroup"

MDIStyle="MDI"

ItemWidth="2*">

<dxd:DocumentPanel x:Name="documentPanel1"

MDISize="200 100"

Caption="Document 1">

</dxd:DocumentPanel>

<dxd:DocumentPanel x:Name="documentPanel2"

MDILocation="50 120"

MDISize="200 100"

Caption="Document 2">

</dxd:DocumentPanel>

</dxd:DocumentGroup>

<dxd:LayoutPanel x:Name="outputLayoutPanel"

Caption="Output" />

</dxd:LayoutGroup>

</dxd:DockLayoutManager>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using System.Windows;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

        #endregion
    }
}

using System.Windows;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

}

#endregion

}

TestProject.zip

[C#/WPF/DEVEXPRESS] DockLayoutManager 클래스 : MVVM 패턴을 사용해 도킹 UI 구축하기

■ DockLayoutManager 클래스에서 MVVM 패턴을 사용해 도킹 UI를 구축하는 방법을 보여준다. ▶ MainWindow.xaml


<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>

<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>

</Border>

</DataTemplate>

</Border>

</DataTemplate>

</Style>

</Style>

</Window.Resources>

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<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


using System.Windows;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

        #endregion
    }
}

using System.Windows;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

}

#endregion

}

▶ DockLayoutManagerViewModel.cs


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
    }
}

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

}

TestProject.zip

[C#/WPF/DEVEXPRESS] DockLayoutManager 클래스 : DX 도킹 라이브러리에서 제공된 명령을 버튼과 결합하기

■ DockLayoutManager 클래스에서 DX 도킹 라이브러리에서 제공된 명령을 버튼과 결합하는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"
    Width="800"
    Height="600"
    Title="DX 도킹 라이브러리에서 제공된 명령을 버튼과 결합하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <DockPanel>
        <ToolBar x:Name="toolBar"
            DockPanel.Dock="Top"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Height="26">
            <Button
                Command="dxd:DockControllerCommand.Close"
                CommandTarget="{Binding ElementName=dockLayoutManager}"
                CommandParameter="{Binding ElementName=dockLayoutManager, Path=ActiveDockItem}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Image Grid.Column="0"
                        Source="pack://application:,,,/Image/delete.png" />
                    <TextBlock Grid.Column="1"
                        VerticalAlignment="Center">
                        Close Active Dock Panel
                    </TextBlock>
                </Grid>
            </Button>
        </ToolBar>
        <dxd:DockLayoutManager x:Name="dockLayoutManager">
            <dxd:LayoutGroup Orientation="Horizontal">
                <dxd:LayoutGroup Orientation="Horizontal">
                    <dxd:LayoutPanel x:Name="layoutPanel1"
                        Caption="Panel 1" />
                    <dxd:LayoutPanel x:Name="layoutPanel2"
                        Caption="Panel 2" />
                </dxd:LayoutGroup>
                <dxd:DocumentGroup x:Name="documentGroup">
                    <dxd:DocumentPanel x:Name="documentPanel1"
                        Caption="Document 1">
                        <RichTextBox />
                    </dxd:DocumentPanel>
                    <dxd:DocumentPanel x:Name="documentPanel2"
                        Caption="Document 2">
                        <RichTextBox />
                    </dxd:DocumentPanel>
                </dxd:DocumentGroup>
            </dxd:LayoutGroup>
            <dxd:DockLayoutManager.AutoHideGroups>
                <dxd:AutoHideGroup DockType="Right">
                    <dxd:LayoutPanel x:Name="propertyLayoutPanel"
                        Caption="Property" />
                </dxd:AutoHideGroup>
            </dxd:DockLayoutManager.AutoHideGroups>
            <dxd:DockLayoutManager.FloatGroups>
                <dxd:FloatGroup
                    FloatLocation="200 100"
                    FloatSize="400 200">
                    <dxd:LayoutPanel x:Name="messageLayoutPanel"
                        Caption="Message">
                        <RichTextBox />
                    </dxd:LayoutPanel>
                </dxd:FloatGroup>
            </dxd:DockLayoutManager.FloatGroups>
        </dxd:DockLayoutManager>
    </DockPanel>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"

Width="800"

Height="600"

Title="DX 도킹 라이브러리에서 제공된 명령을 버튼과 결합하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<ToolBar x:Name="toolBar"

DockPanel.Dock="Top"

HorizontalAlignment="Left"

VerticalAlignment="Top"

Height="26">

<Button

Command="dxd:DockControllerCommand.Close"

CommandTarget="{Binding ElementName=dockLayoutManager}"

CommandParameter="{Binding ElementName=dockLayoutManager, Path=ActiveDockItem}">

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Image Grid.Column="0"

Source="pack://application:,,,/Image/delete.png" />

<TextBlock Grid.Column="1"

VerticalAlignment="Center">

Close Active Dock Panel

</TextBlock>

</Grid>

</Button>

</ToolBar>

<dxd:DockLayoutManager x:Name="dockLayoutManager">

<dxd:LayoutGroup Orientation="Horizontal">

<dxd:LayoutPanel x:Name="layoutPanel1"

Caption="Panel 1" />

<dxd:LayoutPanel x:Name="layoutPanel2"

Caption="Panel 2" />

</dxd:LayoutGroup>

<dxd:DocumentGroup x:Name="documentGroup">

<dxd:DocumentPanel x:Name="documentPanel1"

Caption="Document 1">

</dxd:DocumentPanel>

<dxd:DocumentPanel x:Name="documentPanel2"

Caption="Document 2">

</dxd:DocumentPanel>

</dxd:DocumentGroup>

</dxd:LayoutGroup>

<dxd:DockLayoutManager.AutoHideGroups>

<dxd:AutoHideGroup DockType="Right">

<dxd:LayoutPanel x:Name="propertyLayoutPanel"

Caption="Property" />

</dxd:AutoHideGroup>

</dxd:DockLayoutManager.AutoHideGroups>

<dxd:DockLayoutManager.FloatGroups>

<dxd:FloatGroup

FloatLocation="200 100"

FloatSize="400 200">

<dxd:LayoutPanel x:Name="messageLayoutPanel"

Caption="Message">

</dxd:LayoutPanel>

</dxd:FloatGroup>

</dxd:DockLayoutManager.FloatGroups>

</dxd:DockLayoutManager>

</DockPanel>

</Window>

▶ MainWindow.xaml.cs


using System.Windows;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

            this.dockLayoutManager.DockController.Activate(this.messageLayoutPanel);
        }

        #endregion
    }
}

using System.Windows;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

this.dockLayoutManager.DockController.Activate(this.messageLayoutPanel);

}

#endregion

}

TestProject.zip

[C#/WPF/DEVEXPRESS] DockLayoutManager 클래스 : Closed (숨김) 패널 생성하기

■ DockLayoutManager 클래스에서 Closed (숨김) 패널을 생성하는 방법을 보여준다. (E1640) ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/core"
    xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"
    Width="800"
    Height="600"
    Title="Closed (숨김) 패널 생성하기"
    dxc:ThemeManager.ThemeName="Office2007Blue"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <dxd:DockLayoutManager x:Name="dockLayoutManager"
            ClosedPanelsBarVisibility="Auto">
            <dxd:LayoutGroup x:Name="rootLayoutGroup"
                Orientation="Horizontal">
                <dxd:DocumentGroup x:Name="documentGroup">
                    <dxd:DocumentPanel x:Name="documentPanel"
                        Caption="Document">
                        <RichTextBox />
                    </dxd:DocumentPanel>
                </dxd:DocumentGroup>
            </dxd:LayoutGroup>
            <dxd:DockLayoutManager.ClosedPanels>
                <dxd:LayoutPanel x:Name="propertyLayoutPanel"
                    Caption="Property">
                    <RichTextBox />
                </dxd:LayoutPanel>
                <dxd:LayoutPanel x:Name="messageLayoutPanel"
                    Caption="Message">
                    <RichTextBox />
                </dxd:LayoutPanel>
                <dxd:LayoutPanel x:Name="findResultLayoutPanel"
                    Caption="Find Result">
                    <RichTextBox />
                </dxd:LayoutPanel>
            </dxd:DockLayoutManager.ClosedPanels>
        </dxd:DockLayoutManager>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/core"

xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"

Width="800"

Height="600"

Title="Closed (숨김) 패널 생성하기"

dxc:ThemeManager.ThemeName="Office2007Blue"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<dxd:DockLayoutManager x:Name="dockLayoutManager"

ClosedPanelsBarVisibility="Auto">

<dxd:LayoutGroup x:Name="rootLayoutGroup"

Orientation="Horizontal">

<dxd:DocumentGroup x:Name="documentGroup">

<dxd:DocumentPanel x:Name="documentPanel"

Caption="Document">

</dxd:DocumentPanel>

</dxd:DocumentGroup>

</dxd:LayoutGroup>

<dxd:DockLayoutManager.ClosedPanels>

<dxd:LayoutPanel x:Name="propertyLayoutPanel"

Caption="Property">

</dxd:LayoutPanel>

<dxd:LayoutPanel x:Name="messageLayoutPanel"

Caption="Message">

</dxd:LayoutPanel>

<dxd:LayoutPanel x:Name="findResultLayoutPanel"

Caption="Find Result">

</dxd:LayoutPanel>

</dxd:DockLayoutManager.ClosedPanels>

</dxd:DockLayoutManager>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using System.Windows;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

        #endregion
    }
}

using System.Windows;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

}

#endregion

}

TestProject.zip

[C#/WPF/DEVEXPRESS] DockLayoutManager 클래스 : 액션을 통한 패널의 컨텍스트 메뉴 커스텀 처리하기

■ DockLayoutManager 클래스에서 액션을 통한 패널의 컨텍스트 메뉴를 커스텀 처리하는 방법을 보여준다. ▶ MainWindow.xaml


<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:dxc="http://schemas.devexpress.com/winfx/2008/xaml/core"
    xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"
    Width="800"
    Height="600"
    Title="액션을 통한 패널의 컨텍스트 메뉴 커스텀 처리하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <dxd:DockLayoutManager x:Name="dockLayoutManager"
            dxc:ThemeManager.ThemeName="Office2007Blue">
            <dxd:DockLayoutManager.ContextMenuCustomizations>
                <dxb:BarButtonItem x:Name="aboutBarButtonItem"
                    dxb:BarItemLinkActionBase.ItemLinkIndex="0"
                    CategoryName="Help"
                    Content="About"
                    ItemClick="aboutBarButtonItem_ItemClick" />
                <dxb:InsertBarItemLinkAction ItemLinkIndex="1">
                    <dxb:BarItemLinkSeparator />
                </dxb:InsertBarItemLinkAction>
            </dxd:DockLayoutManager.ContextMenuCustomizations>
            <dxd:LayoutGroup x:Name="rootLayoutGroup"
                Orientation="Horizontal">
                <dxd:LayoutPanel x:Name="propertyLayoutPanel"
                    Caption="Property"
                    ItemWidth="150">
                    <RichTextBox>
                        <FlowDocument>
                            <Paragraph>
                                <Run>Right-click the panel's caption to invoke a context menu</Run>
                            </Paragraph>
                        </FlowDocument>
                    </RichTextBox>
                </dxd:LayoutPanel>
                <dxd:DocumentPanel x:Name="documentPanel"
                    Caption="Document">
                    <RichTextBox />
                </dxd:DocumentPanel>
            </dxd:LayoutGroup>
        </dxd:DockLayoutManager>
    </Grid>
</Window>

<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:dxc="http://schemas.devexpress.com/winfx/2008/xaml/core"

xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"

Width="800"

Height="600"

Title="액션을 통한 패널의 컨텍스트 메뉴 커스텀 처리하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<dxd:DockLayoutManager x:Name="dockLayoutManager"

dxc:ThemeManager.ThemeName="Office2007Blue">

<dxd:DockLayoutManager.ContextMenuCustomizations>

<dxb:BarButtonItem x:Name="aboutBarButtonItem"

dxb:BarItemLinkActionBase.ItemLinkIndex="0"

CategoryName="Help"

Content="About"

ItemClick="aboutBarButtonItem_ItemClick" />

<dxb:InsertBarItemLinkAction ItemLinkIndex="1">

<dxb:BarItemLinkSeparator />

</dxb:InsertBarItemLinkAction>

</dxd:DockLayoutManager.ContextMenuCustomizations>

<dxd:LayoutGroup x:Name="rootLayoutGroup"

Orientation="Horizontal">

<dxd:LayoutPanel x:Name="propertyLayoutPanel"

Caption="Property"

ItemWidth="150">

<Run>Right-click the panel's caption to invoke a context menu</Run>

</Paragraph>

</FlowDocument>

</RichTextBox>

</dxd:LayoutPanel>

<dxd:DocumentPanel x:Name="documentPanel"

Caption="Document">

</dxd:DocumentPanel>

</dxd:LayoutGroup>

</dxd:DockLayoutManager>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using System.Windows;

using DevExpress.Xpf.Bars;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

        #endregion

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

        #region About 바 버튼 항목 항목 클릭시 처리하기 - aboutBarButtonItem_ItemClick(sender, e)

        /// <summary>
        /// About 바 버튼 항목 항목 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void aboutBarButtonItem_ItemClick(object sender, ItemClickEventArgs e)
        {
            MessageBox.Show("About Window");
        }

        #endregion
    }
}

using System.Windows;

using DevExpress.Xpf.Bars;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

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

#region About 바 버튼 항목 항목 클릭시 처리하기 - aboutBarButtonItem_ItemClick(sender, e)

/// <summary>

/// About 바 버튼 항목 항목 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void aboutBarButtonItem_ItemClick(object sender, ItemClickEventArgs e)

{

MessageBox.Show("About Window");

}

#endregion

}

TestProject.zip

[C#/WPF/DEVEXPRESS] DockLayoutManager 클래스 : 코드로 패널을 다른 패널에 도킹하기

■ DockLayoutManager 클래스에서 코드로 패널을 다른 패널에 도킹하는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/core"
    xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"
    Width="800"
    Height="600"
    Title="코드로 패널을 다른 패널에 도킹하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <dxd:DockLayoutManager x:Name="dockLayoutManager"
            dxc:ThemeManager.ThemeName="Office2007Blue">
            <dxd:LayoutGroup x:Name="rootLayoutGroup" Orientation="Horizontal">
                <dxd:LayoutPanel x:Name="outputLayoutPanel"
                    Caption="Output"
                    ItemWidth="250">
                    <RichTextBox />
                </dxd:LayoutPanel>
                <dxd:DocumentGroup x:Name="documentGroup">
                    <dxd:DocumentPanel x:Name="documentPanel"
                        Caption="Document">
                        <RichTextBox />
                    </dxd:DocumentPanel>
                </dxd:DocumentGroup>
            </dxd:LayoutGroup>
            <dxd:DockLayoutManager.FloatGroups>
                <dxd:FloatGroup
                    FloatLocation="100 100"
                    FloatSize="200 150">
                    <dxd:LayoutPanel x:Name="propertyLayoutPanel"
                        Caption="Property">
                        <DockPanel>
                            <Button DockPanel.Dock="Top"
                                Height="40"
                                Content="Dock making a split container"
                                Click="dockMakingSplitContainerButton_Click" />
                            <Button DockPanel.Dock="Top"
                                Height="40"
                                Content="Dock making a tab container"
                                Click="dockMakingTabContainerButton_Click" />
                        </DockPanel>
                    </dxd:LayoutPanel>
                </dxd:FloatGroup>
            </dxd:DockLayoutManager.FloatGroups>
        </dxd:DockLayoutManager>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/core"

xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"

Width="800"

Height="600"

Title="코드로 패널을 다른 패널에 도킹하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<dxd:DockLayoutManager x:Name="dockLayoutManager"

dxc:ThemeManager.ThemeName="Office2007Blue">

<dxd:LayoutGroup x:Name="rootLayoutGroup" Orientation="Horizontal">

<dxd:LayoutPanel x:Name="outputLayoutPanel"

Caption="Output"

ItemWidth="250">

</dxd:LayoutPanel>

<dxd:DocumentGroup x:Name="documentGroup">

<dxd:DocumentPanel x:Name="documentPanel"

Caption="Document">

</dxd:DocumentPanel>

</dxd:DocumentGroup>

</dxd:LayoutGroup>

<dxd:DockLayoutManager.FloatGroups>

<dxd:FloatGroup

FloatLocation="100 100"

FloatSize="200 150">

<dxd:LayoutPanel x:Name="propertyLayoutPanel"

Caption="Property">

<Button DockPanel.Dock="Top"

Height="40"

Content="Dock making a split container"

Click="dockMakingSplitContainerButton_Click" />

<Button DockPanel.Dock="Top"

Height="40"

Content="Dock making a tab container"

Click="dockMakingTabContainerButton_Click" />

</DockPanel>

</dxd:LayoutPanel>

</dxd:FloatGroup>

</dxd:DockLayoutManager.FloatGroups>

</dxd:DockLayoutManager>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using System.Windows;

using DevExpress.Xpf.Layout.Core;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

        #endregion

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

        #region Dock Making Split Container 버튼 클릭시 처리하기 - dockMakingSplitContainerButton_Click(sender, e)

        /// <summary>
        /// Dock Making Split Container 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void dockMakingSplitContainerButton_Click(object sender, RoutedEventArgs e)
        {
            this.dockLayoutManager.DockController.Dock(this.propertyLayoutPanel, this.outputLayoutPanel, DockType.Bottom);
        }

        #endregion
        #region Dock Making Tab Container 버튼 클릭시 처리하기 - dockMakingTabContainerButton_Click(sender, e)

        /// <summary>
        /// Dock Making Tab Container 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void dockMakingTabContainerButton_Click(object sender, RoutedEventArgs e)
        {
            this.dockLayoutManager.DockController.Dock(this.propertyLayoutPanel, this.outputLayoutPanel, DockType.Fill);
        }

        #endregion
    }
}

using System.Windows;

using DevExpress.Xpf.Layout.Core;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

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

#region Dock Making Split Container 버튼 클릭시 처리하기 - dockMakingSplitContainerButton_Click(sender, e)

/// <summary>

/// Dock Making Split Container 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void dockMakingSplitContainerButton_Click(object sender, RoutedEventArgs e)

{

this.dockLayoutManager.DockController.Dock(this.propertyLayoutPanel, this.outputLayoutPanel, DockType.Bottom);

}

#endregion

#region Dock Making Tab Container 버튼 클릭시 처리하기 - dockMakingTabContainerButton_Click(sender, e)

/// <summary>

/// Dock Making Tab Container 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void dockMakingTabContainerButton_Click(object sender, RoutedEventArgs e)

{

this.dockLayoutManager.DockController.Dock(this.propertyLayoutPanel, this.outputLayoutPanel, DockType.Fill);

}

#endregion

}

TestProject.zip

[C#/WPF/DEVEXPRESS] LayoutPanel 클래스 : 도킹 패널에 바 내장하기

■ LayoutPanel 클래스에서 도킹 패널에 바를 내장하는 방법을 보여준다. ▶ MainWindow.xaml


<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"
    Width="800"
    Height="600"
    Title="도킹 패널에 바 내장하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <dxb:BarManager x:Name="barManager" CreateStandardLayout="True">
            <dxb:BarManager.Items>
                <dxb:BarButtonItem x:Name="cutBarButtonItem"   Content="Cut"   Glyph="pack://application:,,,/Image/cut16x16.png"   />
                <dxb:BarButtonItem x:Name="pasteBarButtonItem" Content="Paste" Glyph="pack://application:,,,/Image/paste16x16.png" />
                <dxb:BarButtonItem x:Name="undoBarButtonItem"  Content="Undo"  Glyph="pack://application:,,,/Image/undo16x16.png"  />
                <dxb:BarButtonItem x:Name="redoBarButtonItem"  Content="Redo"  Glyph="pack://application:,,,/Image/redo16x16.png"  />
                <dxb:BarButtonItem x:Name="exitBarButtonItem"  Content="Exit" />
                <dxb:BarSubItem    x:Name="fileBarSubItem"     Content="File">
                    <dxb:BarSubItem.ItemLinks>
                        <dxb:BarButtonItemLink BarItemName="exitBarButtonItem" />
                    </dxb:BarSubItem.ItemLinks>
                </dxb:BarSubItem>
            </dxb:BarManager.Items>
            <dxb:BarManager.Bars>
                <dxb:Bar x:Name="mainMenuBar"
                    IsMainMenu="True"
                    Caption="Main Menu">
                    <dxb:Bar.DockInfo>
                        <dxb:BarDockInfo ContainerType="Top" />
                    </dxb:Bar.DockInfo>
                    <dxb:Bar.ItemLinks>
                        <dxb:BarSubItemLink BarItemName="fileBarSubItem" />
                    </dxb:Bar.ItemLinks>
                </dxb:Bar>
                <dxb:Bar x:Name="bar1"
                    Caption="Bar 1">
                    <dxb:Bar.DockInfo>
                        <dxb:BarDockInfo ContainerName="toolboxLayoutPanelHeaderBarContainerControl" />
                    </dxb:Bar.DockInfo>
                    <dxb:Bar.ItemLinks>
                        <dxb:BarButtonItemLink BarItemName="cutBarButtonItem"   />
                        <dxb:BarButtonItemLink BarItemName="pasteBarButtonItem" />
                        <dxb:BarButtonItemLink BarItemName="undoBarButtonItem"  />
                        <dxb:BarButtonItemLink BarItemName="redoBarButtonItem"  />
                    </dxb:Bar.ItemLinks>
                </dxb:Bar>
            </dxb:BarManager.Bars>
            <dxd:DockLayoutManager Name="dockLayoutManager">
                <dxd:LayoutGroup Orientation="Horizontal">
                    <dxd:LayoutPanel x:Name="toolboxLayoutPanel"
                        HeaderBarContainerControlName="toolboxLayoutPanelHeaderBarContainerControl"
                        Caption="Toolbox">
                    </dxd:LayoutPanel>
                    <dxd:DocumentGroup>
                        <dxd:DocumentPanel x:Name="documentPanel"
                            Caption="Document">
                            <RichTextBox />
                        </dxd:DocumentPanel>
                    </dxd:DocumentGroup>
                </dxd:LayoutGroup>
            </dxd:DockLayoutManager>
        </dxb:BarManager>
    </Grid>
</Window>

<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"

Width="800"

Height="600"

Title="도킹 패널에 바 내장하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<dxb:BarManager x:Name="barManager" CreateStandardLayout="True">

<dxb:BarManager.Items>

<dxb:BarButtonItem x:Name="cutBarButtonItem" Content="Cut" Glyph="pack://application:,,,/Image/cut16x16.png" />

<dxb:BarButtonItem x:Name="pasteBarButtonItem" Content="Paste" Glyph="pack://application:,,,/Image/paste16x16.png" />

<dxb:BarButtonItem x:Name="undoBarButtonItem" Content="Undo" Glyph="pack://application:,,,/Image/undo16x16.png" />

<dxb:BarButtonItem x:Name="redoBarButtonItem" Content="Redo" Glyph="pack://application:,,,/Image/redo16x16.png" />

<dxb:BarButtonItem x:Name="exitBarButtonItem" Content="Exit" />

<dxb:BarSubItem x:Name="fileBarSubItem" Content="File">

<dxb:BarSubItem.ItemLinks>

<dxb:BarButtonItemLink BarItemName="exitBarButtonItem" />

</dxb:BarSubItem.ItemLinks>

</dxb:BarSubItem>

</dxb:BarManager.Items>

<dxb:BarManager.Bars>

<dxb:Bar x:Name="mainMenuBar"

IsMainMenu="True"

Caption="Main Menu">

<dxb:Bar.DockInfo>

<dxb:BarDockInfo ContainerType="Top" />

</dxb:Bar.DockInfo>

<dxb:Bar.ItemLinks>

<dxb:BarSubItemLink BarItemName="fileBarSubItem" />

</dxb:Bar.ItemLinks>

</dxb:Bar>

<dxb:Bar x:Name="bar1"

Caption="Bar 1">

<dxb:Bar.DockInfo>

<dxb:BarDockInfo ContainerName="toolboxLayoutPanelHeaderBarContainerControl" />

</dxb:Bar.DockInfo>

<dxb:Bar.ItemLinks>

<dxb:BarButtonItemLink BarItemName="cutBarButtonItem" />

<dxb:BarButtonItemLink BarItemName="pasteBarButtonItem" />

<dxb:BarButtonItemLink BarItemName="undoBarButtonItem" />

<dxb:BarButtonItemLink BarItemName="redoBarButtonItem" />

</dxb:Bar.ItemLinks>

</dxb:Bar>

</dxb:BarManager.Bars>

<dxd:DockLayoutManager Name="dockLayoutManager">

<dxd:LayoutGroup Orientation="Horizontal">

<dxd:LayoutPanel x:Name="toolboxLayoutPanel"

HeaderBarContainerControlName="toolboxLayoutPanelHeaderBarContainerControl"

Caption="Toolbox">

</dxd:LayoutPanel>

<dxd:DocumentGroup>

<dxd:DocumentPanel x:Name="documentPanel"

Caption="Document">

</dxd:DocumentPanel>

</dxd:DocumentGroup>

</dxd:LayoutGroup>

</dxd:DockLayoutManager>

</dxb:BarManager>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using System.Windows;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

        #endregion
    }
}

using System.Windows;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

}

#endregion

}

TestProject.zip

[C#/WPF/DEVEXPRESS] DockLayoutManager 클래스 : DocumentPanel 속으로 외부 Window 또는 UserControl 로드하기

■ DockLayoutManager 클래스에서 DocumentPanel 속으로 외부 Window 또는 UserControl를 로드하는 방법을 보여준다. ▶ MainWindow.xaml


<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:dxc="http://schemas.devexpress.com/winfx/2008/xaml/core"
    xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"
    Width="800"
    Height="600"
    dxc:ThemeManager.ThemeName="Office2007Black"
    Title="Load External Window Or UserControl Into DocumentPanel"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <dxb:BarManager Name="barManager">
        <dxb:BarManager.Items>
            <dxb:BarButtonItem x:Name="setDocumentPanel1BarButtonItem"
                Content="Set DocumentPanel 1"
                ItemClick="setDocumentPanel1BarButtonItem_ItemClick" />
            <dxb:BarButtonItem x:Name="addDocumentPanel3BarButtonItem"
                Content="Add DocumentPanel 3"
                ItemClick="addDocumentPanel3BarButtonItem_ItemClick" />
            <dxb:BarButtonItem x:Name="setDataContextForUserControlBarButtonItem"
                Content="Set DataContext for UserControl"
                ItemClick="setDataContextForUserControlBarButtonItem_ItemClick" />
        </dxb:BarManager.Items>
        <dxb:BarManager.Bars>
            <dxb:Bar>
                <dxb:Bar.ItemLinks>
                    <dxb:BarButtonItemLink BarItemName="setDocumentPanel1BarButtonItem" />
                </dxb:Bar.ItemLinks>
            </dxb:Bar>
            <dxb:Bar>
                <dxb:Bar.DockInfo>
                    <dxb:BarDockInfo Row="1" />
                </dxb:Bar.DockInfo>
                <dxb:Bar.ItemLinks>
                    <dxb:BarButtonItemLink BarItemName="addDocumentPanel3BarButtonItem"/>
                    <dxb:BarButtonItemLink BarItemName="setDataContextForUserControlBarButtonItem"/>
                </dxb:Bar.ItemLinks>
            </dxb:Bar>
        </dxb:BarManager.Bars>
        <dxd:DockLayoutManager x:Name="dockLayoutManager">
            <dxd:DockLayoutManager.LayoutRoot>
                <dxd:LayoutGroup>
                    <dxd:DocumentGroup x:Name="documentGroup"
                        MDIStyle="MDI"
                        DestroyOnClosingChildren="False"
                        SelectedTabIndex="1">
                        <dxd:DocumentPanel x:Name="documentPanel1"
                            Caption="DocumentPanel 1"
                            MDISize="300 250" />
                        <dxd:DocumentPanel x:Name="documentPanel2"
                            Caption="DocumentPanel 2"
                            MDILocation="100 100"
                            MDISize="300 250"
                            Content="{dxd:RelativeUri UriString=Source\\SourceWindow2.xaml}" />
                    </dxd:DocumentGroup>
                </dxd:LayoutGroup>
            </dxd:DockLayoutManager.LayoutRoot>
        </dxd:DockLayoutManager>
    </dxb:BarManager>
</Window>

<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:dxc="http://schemas.devexpress.com/winfx/2008/xaml/core"

xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"

Width="800"

Height="600"

dxc:ThemeManager.ThemeName="Office2007Black"

Title="Load External Window Or UserControl Into DocumentPanel"

FontFamily="나눔고딕코딩"

FontSize="16">

<dxb:BarManager Name="barManager">

<dxb:BarManager.Items>

<dxb:BarButtonItem x:Name="setDocumentPanel1BarButtonItem"

Content="Set DocumentPanel 1"

ItemClick="setDocumentPanel1BarButtonItem_ItemClick" />

<dxb:BarButtonItem x:Name="addDocumentPanel3BarButtonItem"

Content="Add DocumentPanel 3"

ItemClick="addDocumentPanel3BarButtonItem_ItemClick" />

<dxb:BarButtonItem x:Name="setDataContextForUserControlBarButtonItem"

Content="Set DataContext for UserControl"

ItemClick="setDataContextForUserControlBarButtonItem_ItemClick" />

</dxb:BarManager.Items>

<dxb:BarManager.Bars>

<dxb:Bar>

<dxb:Bar.ItemLinks>

<dxb:BarButtonItemLink BarItemName="setDocumentPanel1BarButtonItem" />

</dxb:Bar.ItemLinks>

</dxb:Bar>

<dxb:Bar>

<dxb:Bar.DockInfo>

<dxb:BarDockInfo Row="1" />

</dxb:Bar.DockInfo>

<dxb:Bar.ItemLinks>

<dxb:BarButtonItemLink BarItemName="addDocumentPanel3BarButtonItem"/>

<dxb:BarButtonItemLink BarItemName="setDataContextForUserControlBarButtonItem"/>

</dxb:Bar.ItemLinks>

</dxb:Bar>

</dxb:BarManager.Bars>

<dxd:DockLayoutManager x:Name="dockLayoutManager">

<dxd:DockLayoutManager.LayoutRoot>

<dxd:LayoutGroup>

<dxd:DocumentGroup x:Name="documentGroup"

MDIStyle="MDI"

DestroyOnClosingChildren="False"

SelectedTabIndex="1">

<dxd:DocumentPanel x:Name="documentPanel1"

Caption="DocumentPanel 1"

MDISize="300 250" />

<dxd:DocumentPanel x:Name="documentPanel2"

Caption="DocumentPanel 2"

MDILocation="100 100"

MDISize="300 250"

Content="{dxd:RelativeUri UriString=Source\\SourceWindow2.xaml}" />

</dxd:DocumentGroup>

</dxd:LayoutGroup>

</dxd:DockLayoutManager.LayoutRoot>

</dxd:DockLayoutManager>

</dxb:BarManager>

</Window>

▶ MainWindow.xaml.cs


using System;
using System.Windows;
using System.Windows.Media.Imaging;

using DevExpress.Xpf.Bars;
using DevExpress.Xpf.Docking;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// DocumentPanel 3
        /// </summary>
        private DocumentPanel documentPanel3 = null;

        #endregion

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

        #region 생성자 - MainWindow()

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

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private
        //////////////////////////////////////////////////////////////////////////////// Event

        #region Set DocumentPanel 1 바 버튼 항목 클릭시 처리하기 - setDocumentPanel1BarButtonItem_ItemClick(sender, e)

        /// <summary>
        /// Set DocumentPanel 1 바 버튼 항목 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void setDocumentPanel1BarButtonItem_ItemClick(object sender, ItemClickEventArgs e)
        {
            ActivateItem(this.documentPanel1);

            this.documentPanel1.Content = new Uri(@"Source\SourceWindow1.xaml", UriKind.Relative);
        }

        #endregion
        #region Add DocumentPanel 3 바 버튼 항목 클릭시 처리하기 - addDocumentPanel3BarButtonItem_ItemClick(sender, e)

        /// <summary>
        /// Add DocumentPanel 3 바 버튼 항목 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void addDocumentPanel3BarButtonItem_ItemClick(object sender, ItemClickEventArgs e)
        {
            if(this.documentPanel3 != null)
            {
                return;
            }

            this.documentPanel3 = this.dockLayoutManager.DockController.AddDocumentPanel
            (
                this.documentGroup,
                new Uri(@"Source\SourceUserControl3.xaml", UriKind.Relative)
            );

            this.documentPanel3.Caption = "DocumentPanel 3";

            DocumentPanel.SetMDILocation(this.documentPanel3, new Point(200, 200));
            DocumentPanel.SetMDISize(this.documentPanel3, new Size(400, 300));

            ActivateItem(this.documentPanel3);
        }

        #endregion
        #region Set DataContext For UserControl 바 버튼 항목 클릭시 처리하기 - setDataContextForUserControlBarButtonItem_ItemClick(sender, e)

        /// <summary>
        /// Set DataContext For UserControl 바 버튼 항목 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void setDataContextForUserControlBarButtonItem_ItemClick(object sender, ItemClickEventArgs e)
        {
            if(this.documentPanel3 == null)
            {
                return;
            }

            Uri uri = new Uri("/Image/background.jpg", UriKind.Relative);

            ImageInformation imageInformation = new ImageInformation();

            imageInformation.Source      = new BitmapImage(uri);
            imageInformation.Description = uri.ToString();

            (this.documentPanel3.Control as SourceUserControl3).SetDataContext(imageInformation);

            ActivateItem(this.documentPanel3);
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////// Function

        #region 항목 활성화 하기 - ActivateItem(baseLayoutItem)

        /// <summary>
        /// 항목 활성화 하기
        /// </summary>
        /// <param name="baseLayoutItem">BaseLayoutItem 객체</param>
        private void ActivateItem(BaseLayoutItem baseLayoutItem)
        {
            this.dockLayoutManager.LayoutController.Activate(baseLayoutItem);
        }

        #endregion
    }
}

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;

using System.Windows;

using System.Windows.Media.Imaging;

using DevExpress.Xpf.Bars;

using DevExpress.Xpf.Docking;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

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

#region Field

/// <summary>

/// DocumentPanel 3

/// </summary>

private DocumentPanel documentPanel3 = null;

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

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

//////////////////////////////////////////////////////////////////////////////// Event

#region Set DocumentPanel 1 바 버튼 항목 클릭시 처리하기 - setDocumentPanel1BarButtonItem_ItemClick(sender, e)

/// <summary>

/// Set DocumentPanel 1 바 버튼 항목 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void setDocumentPanel1BarButtonItem_ItemClick(object sender, ItemClickEventArgs e)

{

ActivateItem(this.documentPanel1);

this.documentPanel1.Content = new Uri(@"Source\SourceWindow1.xaml", UriKind.Relative);

}

#endregion

#region Add DocumentPanel 3 바 버튼 항목 클릭시 처리하기 - addDocumentPanel3BarButtonItem_ItemClick(sender, e)

/// <summary>

/// Add DocumentPanel 3 바 버튼 항목 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void addDocumentPanel3BarButtonItem_ItemClick(object sender, ItemClickEventArgs e)

{

if(this.documentPanel3 != null)

{

return;

}

this.documentPanel3 = this.dockLayoutManager.DockController.AddDocumentPanel

(

this.documentGroup,

new Uri(@"Source\SourceUserControl3.xaml", UriKind.Relative)

);

this.documentPanel3.Caption = "DocumentPanel 3";

DocumentPanel.SetMDILocation(this.documentPanel3, new Point(200, 200));

DocumentPanel.SetMDISize(this.documentPanel3, new Size(400, 300));

ActivateItem(this.documentPanel3);

}

#endregion

#region Set DataContext For UserControl 바 버튼 항목 클릭시 처리하기 - setDataContextForUserControlBarButtonItem_ItemClick(sender, e)

/// <summary>

/// Set DataContext For UserControl 바 버튼 항목 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void setDataContextForUserControlBarButtonItem_ItemClick(object sender, ItemClickEventArgs e)

{

if(this.documentPanel3 == null)

{

return;

}

Uri uri = new Uri("/Image/background.jpg", UriKind.Relative);

ImageInformation imageInformation = new ImageInformation();

imageInformation.Source = new BitmapImage(uri);

imageInformation.Description = uri.ToString();

(this.documentPanel3.Control as SourceUserControl3).SetDataContext(imageInformation);

ActivateItem(this.documentPanel3);

}

#endregion

//////////////////////////////////////////////////////////////////////////////// Function

#region 항목 활성화 하기 - ActivateItem(baseLayoutItem)

/// <summary>

/// 항목 활성화 하기

/// </summary>

/// <param name="baseLayoutItem">BaseLayoutItem 객체</param>

private void ActivateItem(BaseLayoutItem baseLayoutItem)

{

this.dockLayoutManager.LayoutController.Activate(baseLayoutItem);

}

#endregion

}

TestProject.zip

[C#/WPF/DEVEXPRESS] DockLayoutManager 클래스 : 코드로 레이아웃 항목 이동하기

■ DockLayoutManager 클래스에서 코드로 레이아웃 항목을 이동하는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"
    xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
    Width="800"
    Height="600"
    Title="코드로 레이아웃 항목 이동하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <dxd:DockLayoutManager x:Name="dockLayoutManager">
        <dxd:DockLayoutManager.LayoutRoot>
            <dxd:LayoutGroup x:Name="rootLayoutGroup"
                Orientation="Vertical">
                <dxd:LayoutControlItem>
                    <Button x:Name="moveButton"
                        Content="Click to move item"
                        Click="moveButton_Click" />
                </dxd:LayoutControlItem>
                <dxd:LayoutControlItem x:Name="buttonLayoutControlItem">
                    <Button x:Name="button1"
                        Content="Button 1" />
                </dxd:LayoutControlItem>
                <dxd:LayoutControlItem x:Name="buttonEditLayoutControlItem">
                    <dxe:ButtonEdit x:Name="buttonEdit"
                        Text="(555) 123 45 67 89" />
                </dxd:LayoutControlItem>
            </dxd:LayoutGroup>
        </dxd:DockLayoutManager.LayoutRoot>
    </dxd:DockLayoutManager>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"

xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"

Width="800"

Height="600"

Title="코드로 레이아웃 항목 이동하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<dxd:DockLayoutManager x:Name="dockLayoutManager">

<dxd:DockLayoutManager.LayoutRoot>

<dxd:LayoutGroup x:Name="rootLayoutGroup"

Orientation="Vertical">

<dxd:LayoutControlItem>

<Button x:Name="moveButton"

Content="Click to move item"

Click="moveButton_Click" />

</dxd:LayoutControlItem>

<dxd:LayoutControlItem x:Name="buttonLayoutControlItem">

<Button x:Name="button1"

Content="Button 1" />

</dxd:LayoutControlItem>

<dxd:LayoutControlItem x:Name="buttonEditLayoutControlItem">

<dxe:ButtonEdit x:Name="buttonEdit"

Text="(555) 123 45 67 89" />

</dxd:LayoutControlItem>

</dxd:LayoutGroup>

</dxd:DockLayoutManager.LayoutRoot>

</dxd:DockLayoutManager>

</Window>

▶ MainWindow.xaml.cs


using System.Windows;

using DevExpress.Xpf.Layout.Core;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

        #endregion

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

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

        /// <summary>
        /// Move 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void moveButton_Click(object sender, RoutedEventArgs e)
        {
            this.dockLayoutManager.LayoutController.Move(this.buttonEditLayoutControlItem, this.buttonLayoutControlItem, MoveType.Left);
        }

        #endregion
    }
}

using System.Windows;

using DevExpress.Xpf.Layout.Core;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

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

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

/// <summary>

/// Move 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void moveButton_Click(object sender, RoutedEventArgs e)

{

this.dockLayoutManager.LayoutController.Move(this.buttonEditLayoutControlItem, this.buttonLayoutControlItem, MoveType.Left);

}

#endregion

}

TestProject.zip

[C#/WPF/DEVEXPRESS] NavBarControl 클래스 : 네비게이션 패인 뷰에서 활성화 시킴으로써 그룹 탐색하기

■ NavBarControl 클래스의 네비게이션 패인 뷰에서 활성화 시킴으로써 그룹을 탐색하는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dxn="http://schemas.devexpress.com/winfx/2008/xaml/navbar"
    Width="800"
    Height="600"
    Title="네비게이션 패인 뷰에서 활성화 시킴으로써 그룹 탐색하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <DockPanel>
        <StackPanel Orientation="Horizontal" DockPanel.Dock="Top">
            <Button x:Name="firstButton"
                Command="dxn:NavBarCommands.SetActiveGroup"
                CommandTarget="{Binding Path=View, ElementName=navBarControl}"
                CommandParameter="{Binding ElementName=firstNavBarGroup}">
                First Group
            </Button>
            <Button x:Name="nextButton"
                Click="button_Click">
                Next Group
            </Button>
            <Button x:Name="previousButton"
                Click="button_Click">
                Prev Group
            </Button>
            <Button x:Name="lastButton"
                Command="dxn:NavBarCommands.SetActiveGroup"
                CommandTarget="{Binding Path=View, ElementName=navBarControl}"
                CommandParameter="{Binding ElementName=lastNavBarGroup}">
                Last Group
            </Button>
        </StackPanel>
        <dxn:NavBarControl Name="navBarControl">
            <dxn:NavBarControl.View>
                <dxn:NavigationPaneView ActiveGroupChanged="navigationPaneView_ActiveGroupChanged" />
            </dxn:NavBarControl.View>
            <dxn:NavBarControl.Groups>
                <dxn:NavBarGroup x:Name="firstNavBarGroup"
                    Header="Group1">
                    <dxn:NavBarItem>Item1</dxn:NavBarItem>
                </dxn:NavBarGroup>
                <dxn:NavBarGroup Header="Group2">
                    <dxn:NavBarItem>Item1</dxn:NavBarItem>
                    <dxn:NavBarItem>Item2</dxn:NavBarItem>
                </dxn:NavBarGroup>
                <dxn:NavBarGroup Header="Group3">
                    <dxn:NavBarItem>Item1</dxn:NavBarItem>
                    <dxn:NavBarItem>Item2</dxn:NavBarItem>
                    <dxn:NavBarItem>Item3</dxn:NavBarItem>
                </dxn:NavBarGroup>
                <dxn:NavBarGroup x:Name="lastNavBarGroup"
                    Header="Group4">
                    <dxn:NavBarItem>Item1</dxn:NavBarItem>
                    <dxn:NavBarItem>Item2</dxn:NavBarItem>
                    <dxn:NavBarItem>Item3</dxn:NavBarItem>
                    <dxn:NavBarItem>Item4</dxn:NavBarItem>
                </dxn:NavBarGroup>
            </dxn:NavBarControl.Groups>
        </dxn:NavBarControl>
    </DockPanel>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:dxn="http://schemas.devexpress.com/winfx/2008/xaml/navbar"

Width="800"

Height="600"

Title="네비게이션 패인 뷰에서 활성화 시킴으로써 그룹 탐색하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Button x:Name="firstButton"

Command="dxn:NavBarCommands.SetActiveGroup"

CommandTarget="{Binding Path=View, ElementName=navBarControl}"

CommandParameter="{Binding ElementName=firstNavBarGroup}">

First Group

</Button>

<Button x:Name="nextButton"

Click="button_Click">

Next Group

</Button>

<Button x:Name="previousButton"

Click="button_Click">

Prev Group

</Button>

<Button x:Name="lastButton"

Command="dxn:NavBarCommands.SetActiveGroup"

CommandTarget="{Binding Path=View, ElementName=navBarControl}"

CommandParameter="{Binding ElementName=lastNavBarGroup}">

Last Group

</Button>

</StackPanel>

<dxn:NavBarControl Name="navBarControl">

<dxn:NavBarControl.View>

<dxn:NavigationPaneView ActiveGroupChanged="navigationPaneView_ActiveGroupChanged" />

</dxn:NavBarControl.View>

<dxn:NavBarControl.Groups>

<dxn:NavBarGroup x:Name="firstNavBarGroup"

Header="Group1">

<dxn:NavBarItem>Item1</dxn:NavBarItem>

</dxn:NavBarGroup>

<dxn:NavBarGroup Header="Group2">

<dxn:NavBarItem>Item1</dxn:NavBarItem>

<dxn:NavBarItem>Item2</dxn:NavBarItem>

</dxn:NavBarGroup>

<dxn:NavBarGroup Header="Group3">

<dxn:NavBarItem>Item1</dxn:NavBarItem>

<dxn:NavBarItem>Item2</dxn:NavBarItem>

<dxn:NavBarItem>Item3</dxn:NavBarItem>

</dxn:NavBarGroup>

<dxn:NavBarGroup x:Name="lastNavBarGroup"

Header="Group4">

<dxn:NavBarItem>Item1</dxn:NavBarItem>

<dxn:NavBarItem>Item2</dxn:NavBarItem>

<dxn:NavBarItem>Item3</dxn:NavBarItem>

<dxn:NavBarItem>Item4</dxn:NavBarItem>

</dxn:NavBarGroup>

</dxn:NavBarControl.Groups>

</dxn:NavBarControl>

</DockPanel>

</Window>

▶ MainWindow.xaml.cs


using System.Windows;

using DevExpress.Xpf.NavBar;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

            SetButton();
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private
        //////////////////////////////////////////////////////////////////////////////// Event

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

        /// <summary>
        /// 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void button_Click(object sender, RoutedEventArgs e)
        {
            int activeGroupIndex = this.navBarControl.Groups.IndexOf(this.navBarControl.ActiveGroup);

            if(sender == this.nextButton)
            {
                this.navBarControl.ActiveGroup = this.navBarControl.Groups[activeGroupIndex + 1];
            }

            if(sender == this.previousButton)
            {
                this.navBarControl.ActiveGroup = this.navBarControl.Groups[activeGroupIndex - 1];
            }
        }

        #endregion
        #region 네비게이션 패인 뷰 활성 그룹 변경시 처리하기 - navigationPaneView_ActiveGroupChanged(sender, e)

        /// <summary>
        /// 네비게이션 패인 뷰 활성 그룹 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void navigationPaneView_ActiveGroupChanged(object sender, NavBarActiveGroupChangedEventArgs e)
        {
            SetButton();
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////// Function

        #region 버튼 설정하기 - SetButton()

        /// <summary>
        /// 버튼 설정하기
        /// </summary>
        private void SetButton()
        {
            this.nextButton.IsEnabled     = !(this.navBarControl.Groups.IndexOf(this.navBarControl.ActiveGroup) == this.navBarControl.Groups.Count - 1);
            this.previousButton.IsEnabled = !(this.navBarControl.Groups.IndexOf(this.navBarControl.ActiveGroup) == 0);
        }

        #endregion
    }
}

using System.Windows;

using DevExpress.Xpf.NavBar;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

SetButton();

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

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

//////////////////////////////////////////////////////////////////////////////// Event

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

/// <summary>

/// 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void button_Click(object sender, RoutedEventArgs e)

{

int activeGroupIndex = this.navBarControl.Groups.IndexOf(this.navBarControl.ActiveGroup);

if(sender == this.nextButton)

{

this.navBarControl.ActiveGroup = this.navBarControl.Groups[activeGroupIndex + 1];

}

if(sender == this.previousButton)

{

this.navBarControl.ActiveGroup = this.navBarControl.Groups[activeGroupIndex - 1];

}

#endregion

#region 네비게이션 패인 뷰 활성 그룹 변경시 처리하기 - navigationPaneView_ActiveGroupChanged(sender, e)

/// <summary>

/// 네비게이션 패인 뷰 활성 그룹 변경시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void navigationPaneView_ActiveGroupChanged(object sender, NavBarActiveGroupChangedEventArgs e)

{

SetButton();

}

#endregion

//////////////////////////////////////////////////////////////////////////////// Function

#region 버튼 설정하기 - SetButton()

/// <summary>

/// 버튼 설정하기

/// </summary>

private void SetButton()

{

this.nextButton.IsEnabled = !(this.navBarControl.Groups.IndexOf(this.navBarControl.ActiveGroup) == this.navBarControl.Groups.Count - 1);

this.previousButton.IsEnabled = !(this.navBarControl.Groups.IndexOf(this.navBarControl.ActiveGroup) == 0);

}

#endregion

}

TestProject.zip

[C#/WPF/DEVEXPRESS] NavBarControl 클래스 : 그룹을 통해 반복하고 확장 상태 토글하기

■ NavBarControl 클래스에서 그룹을 통해 반복하고 확장 상태를 토글하는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dxn="http://schemas.devexpress.com/winfx/2008/xaml/navbar"
    Width="800"
    Height="600"
    Title="그룹을 통해 반복하고 확장 상태 토글하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*"    />
        </Grid.RowDefinitions>
        <Button x:Name="toggleGroupStateButton"
            Grid.Row="0"
            Margin="10 10 10 5"
            Click="toggleGroupStateButton_Click">Toggle Group State</Button>
        <dxn:NavBarControl x:Name="navBarControl"
            Grid.Row="1"
            Margin="10 5 10 10">
            <dxn:NavBarControl.Groups>
                <dxn:NavBarGroup Header="Group1">
                    <dxn:NavBarItem>Item1</dxn:NavBarItem>
                    <dxn:NavBarItem>Item2</dxn:NavBarItem>
                </dxn:NavBarGroup>
                <dxn:NavBarGroup
                    IsExpanded="False"
                    Header="Group2">
                    <dxn:NavBarItem>Item1</dxn:NavBarItem>
                    <dxn:NavBarItem>Item2</dxn:NavBarItem>
                    <dxn:NavBarItem>Item3</dxn:NavBarItem>
                </dxn:NavBarGroup>
                <dxn:NavBarGroup Header="Group3">
                    <dxn:NavBarItem>Item1</dxn:NavBarItem>
                    <dxn:NavBarItem>Item2</dxn:NavBarItem>
                </dxn:NavBarGroup>
            </dxn:NavBarControl.Groups>
            <dxn:NavBarControl.View>
                <dxn:ExplorerBarView />
            </dxn:NavBarControl.View>
        </dxn:NavBarControl>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:dxn="http://schemas.devexpress.com/winfx/2008/xaml/navbar"

Width="800"

Height="600"

Title="그룹을 통해 반복하고 확장 상태 토글하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Button x:Name="toggleGroupStateButton"

Grid.Row="0"

Margin="10 10 10 5"

Click="toggleGroupStateButton_Click">Toggle Group State</Button>

<dxn:NavBarControl x:Name="navBarControl"

Grid.Row="1"

Margin="10 5 10 10">

<dxn:NavBarControl.Groups>

<dxn:NavBarGroup Header="Group1">

<dxn:NavBarItem>Item1</dxn:NavBarItem>

<dxn:NavBarItem>Item2</dxn:NavBarItem>

</dxn:NavBarGroup>

<dxn:NavBarGroup

IsExpanded="False"

Header="Group2">

<dxn:NavBarItem>Item1</dxn:NavBarItem>

<dxn:NavBarItem>Item2</dxn:NavBarItem>

<dxn:NavBarItem>Item3</dxn:NavBarItem>

</dxn:NavBarGroup>

<dxn:NavBarGroup Header="Group3">

<dxn:NavBarItem>Item1</dxn:NavBarItem>

<dxn:NavBarItem>Item2</dxn:NavBarItem>

</dxn:NavBarGroup>

</dxn:NavBarControl.Groups>

<dxn:NavBarControl.View>

<dxn:ExplorerBarView />

</dxn:NavBarControl.View>

</dxn:NavBarControl>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using System.Windows;

using DevExpress.Xpf.NavBar;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

        #endregion

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

        #region Toggle Group State 버튼 클릭시 처리하기 - toggleGroupStateButton_Click(sender, e)

        /// <summary>
        /// Toggle Group State 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void toggleGroupStateButton_Click(object sender, RoutedEventArgs e)
        {
            for(int i = 0; i < this.navBarControl.Groups.Count; i++)
            {
                NavBarGroup navBarGroup = this.navBarControl.Groups[i];

                navBarGroup.IsExpanded = !navBarGroup.IsExpanded;
            }
        }

        #endregion
    }
}

using System.Windows;

using DevExpress.Xpf.NavBar;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

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

#region Toggle Group State 버튼 클릭시 처리하기 - toggleGroupStateButton_Click(sender, e)

/// <summary>

/// Toggle Group State 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void toggleGroupStateButton_Click(object sender, RoutedEventArgs e)

{

for(int i = 0; i < this.navBarControl.Groups.Count; i++)

{

NavBarGroup navBarGroup = this.navBarControl.Groups[i];

navBarGroup.IsExpanded = !navBarGroup.IsExpanded;

}

#endregion

}

TestProject.zip

[C#/WPF/DEVEXPRESS] NavBarControl 클래스 : 그룹/항목 모양을 커스텀 처리하기 위해 스타일 사용하기

■ NavBarControl 클래스에서 그룹/항목 모양을 커스텀 처리하기 위해 스타일을 사용하는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dxn="http://schemas.devexpress.com/winfx/2008/xaml/navbar"
    Width="800"
    Height="600"
    Title="그룹/항목 모양을 커스텀 처리하기 위해 스타일 사용하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Style x:Key="CommonGroupStyleKey">
            <Setter Property="dxn:NavBarViewBase.LayoutSettings" Value="{dxn:NavBarLayoutSettings TextHorizontalAlignment=Right}" />
            <Setter Property="Control.Foreground"                Value="Yellow"                                                   />
            <Setter Property="Control.FontWeight"                Value="Bold"                                                     />
        </Style>
        <Style x:Key="CommonItemStyleKey">
            <Setter Property="dxn:NavBarViewBase.LayoutSettings" Value="{dxn:NavBarLayoutSettings TextHorizontalAlignment=Right}" />
            <Setter Property="Control.Foreground"                Value="Blue"                                                     />
        </Style>
        <Style x:Key="IndividualGroupStyleKey">
            <Setter Property="dxn:NavBarViewBase.LayoutSettings" Value="{dxn:NavBarLayoutSettings TextHorizontalAlignment=Center}" />
            <Setter Property="Control.Foreground"                Value="LightBlue"                                                 />
            <Setter Property="Control.FontWeight"                Value="Bold"                                                      />
            <Setter Property="Control.FontStyle"                 Value="Italic"                                                    />
        </Style>
        <Style x:Key="IndividualGroupItemStyleKey">
            <Setter Property="dxn:NavBarViewBase.LayoutSettings" Value="{dxn:NavBarLayoutSettings TextHorizontalAlignment=Center}" />
            <Setter Property="Control.Foreground"                Value="Gray"                                                      />
            <Setter Property="Control.FontStyle"                 Value="Italic"                                                    />
        </Style>
        <Style x:Key="IndividualItemStyleKey">
            <Setter Property="dxn:NavBarViewBase.LayoutSettings" Value="{dxn:NavBarLayoutSettings TextHorizontalAlignment=Left}" />
            <Setter Property="Control.Foreground"                Value="Black"                                                   />
            <Setter Property="Control.FontWeight"                Value="Bold"                                                    />
        </Style>
    </Window.Resources>
    <DockPanel Margin="10">
        <dxn:NavBarControl x:Name="navBarControl">
            <dxn:NavBarControl.View>
                <dxn:ExplorerBarView
                    GroupVisualStyle="{StaticResource CommonGroupStyleKey}"
                    ItemVisualStyle="{StaticResource CommonItemStyleKey}" />
            </dxn:NavBarControl.View>
            <dxn:NavBarControl.Groups>
                <dxn:NavBarGroup Header="Group1">
                    <dxn:NavBarItem>Item1</dxn:NavBarItem>
                </dxn:NavBarGroup>
                <dxn:NavBarGroup Header="Group2">
                    <dxn:NavBarItem>Item1</dxn:NavBarItem>
                    <dxn:NavBarItem>Item2</dxn:NavBarItem>
                </dxn:NavBarGroup>
                <dxn:NavBarGroup
                    VisualStyle="{StaticResource IndividualGroupStyleKey}"
                    ItemVisualStyle="{StaticResource IndividualGroupItemStyleKey}"
                    Header="Group3">
                    <dxn:NavBarItem>Item1</dxn:NavBarItem>
                    <dxn:NavBarItem>Item2</dxn:NavBarItem>
                    <dxn:NavBarItem
                        VisualStyle="{StaticResource IndividualItemStyleKey}">
                        Item3
                    </dxn:NavBarItem>
                </dxn:NavBarGroup>
            </dxn:NavBarControl.Groups>
        </dxn:NavBarControl>
    </DockPanel>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:dxn="http://schemas.devexpress.com/winfx/2008/xaml/navbar"

Width="800"

Height="600"

Title="그룹/항목 모양을 커스텀 처리하기 위해 스타일 사용하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

</Style>

</Style>

</Style>

</Style>

</Style>

</Window.Resources>

<dxn:NavBarControl x:Name="navBarControl">

<dxn:NavBarControl.View>

<dxn:ExplorerBarView

GroupVisualStyle="{StaticResource CommonGroupStyleKey}"

ItemVisualStyle="{StaticResource CommonItemStyleKey}" />

</dxn:NavBarControl.View>

<dxn:NavBarControl.Groups>

<dxn:NavBarGroup Header="Group1">

<dxn:NavBarItem>Item1</dxn:NavBarItem>

</dxn:NavBarGroup>

<dxn:NavBarGroup Header="Group2">

<dxn:NavBarItem>Item1</dxn:NavBarItem>

<dxn:NavBarItem>Item2</dxn:NavBarItem>

</dxn:NavBarGroup>

<dxn:NavBarGroup

VisualStyle="{StaticResource IndividualGroupStyleKey}"

ItemVisualStyle="{StaticResource IndividualGroupItemStyleKey}"

Header="Group3">

<dxn:NavBarItem>Item1</dxn:NavBarItem>

<dxn:NavBarItem>Item2</dxn:NavBarItem>

<dxn:NavBarItem

VisualStyle="{StaticResource IndividualItemStyleKey}">

Item3

</dxn:NavBarItem>

</dxn:NavBarGroup>

</dxn:NavBarControl.Groups>

</dxn:NavBarControl>

</DockPanel>

</Window>

▶ MainWindow.xaml.cs


using System.Windows;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

        #endregion
    }
}

using System.Windows;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

}

#endregion

}

TestProject.zip

[C#/WPF/DEVEXPRESS] NavBarControl 클래스 : 항목 선택 취소하기

■ NavBarControl 클래스에서 항목 선택을 취소하는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="항목 선택 취소하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <DockPanel x:Name="dockPanel" Margin="10" />
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="항목 선택 취소하기"

FontFamily="나눔고딕코딩"

FontSize="16">

</Window>

▶ MainWindow.xaml.cs


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Media.Imaging;

using DevExpress.Xpf.NavBar;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

            CreateNavBarControl();
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private
        //////////////////////////////////////////////////////////////////////////////// Event

        #region NavBarControl 뷰 항목 선택할 경우 처리하기 - navBarControl_View_ItemSelecting(sender, e)

        /// <summary>
        /// NavBarControl 뷰 항목 선택할 경우 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void navBarControl_View_ItemSelecting(object sender, NavBarItemSelectingEventArgs e)
        {
            if(e.NewItem.Content.ToString() == "Private")
            {
                MessageBoxResult messageBoxResult = MessageBox.Show("Are you sure to select the 'Private' item?", "Confirm Dialog", MessageBoxButton.YesNo);

                e.Cancel = (messageBoxResult == MessageBoxResult.No);
            }
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////// Function

        #region 그룹 1 생성하기 - CreateGroup1(navBarControl)

        /// <summary>
        /// 그룹 1 생성하기
        /// </summary>
        /// <param name="navBarControl">NavBarControl</param>
        private void CreateGroup1(NavBarControl navBarControl)
        {
            #region 그룹을 생성한다.

            NavBarGroup navBarGroup = new NavBarGroup();

            navBarGroup.ImageSource = new BitmapImage(new Uri("pack://application:,,,/Image/folder.png"));
            navBarGroup.Header      = "Items";

            navBarControl.Groups.Add(navBarGroup);

            #endregion
            #region 항목 1을 생성한다.

            NavBarItem navBarItem1 = new NavBarItem();

            navBarItem1.Content = "Home";

            navBarGroup.Items.Add(navBarItem1);

            #endregion
            #region 항목 1을 생성한다.

            NavBarItem navBarItem2 = new NavBarItem();

            navBarItem2.Content = "Work";

            navBarGroup.Items.Add(navBarItem2);

            #endregion
            #region 항목 3을 생성한다.

            NavBarItem navBarItem3 = new NavBarItem();

            navBarItem3.ImageSource = new BitmapImage(new Uri("pack://application:,,,/Image/private.png"));
            navBarItem3.Content     = "Private";

            Style style = new Style();

            style.Setters.Add(new Setter(NavBarViewBase.LayoutSettingsProperty, new LayoutSettings() { ImageDocking = Dock.Right }));

            navBarItem3.VisualStyle = style;

            navBarGroup.Items.Add(navBarItem3);

            #endregion
        }

        #endregion
        #region 그룹 2 생성하기 - CreateGroup2(navBarControl)

        /// <summary>
        /// 그룹 2 생성하기
        /// </summary>
        /// <param name="navBarControl">NavBarControl</param>
        private void CreateGroup2(NavBarControl navBarControl)
        {
            NavBarGroup navBarGroup = new NavBarGroup();

            navBarGroup.DisplaySource = DisplaySource.Content;
            navBarGroup.Header        = "Custom Content";

            StackPanel stackPanel = new StackPanel() { Orientation = Orientation.Horizontal };

            navBarGroup.Content = stackPanel;

            stackPanel.Children.Add(new TextBlock() { Text = "Selected Item : " });

            TextBlock textBlock = new TextBlock();
            Binding   binding   = new Binding("SelectedItem.Content");

            binding.Source = navBarControl;

            textBlock.SetBinding(TextBlock.TextProperty, binding);

            stackPanel.Children.Add(textBlock);

            navBarControl.Groups.Add(navBarGroup);
        }

        #endregion
        #region NavBarControl 생성하기 - CreateNavBarControl()

        /// <summary>
        /// NavBarControl 생성하기
        /// </summary>
        private void CreateNavBarControl()
        {
            NavBarControl navBarControl = new NavBarControl();

            this.dockPanel.Children.Add(navBarControl);

            DockPanel.SetDock(navBarControl, Dock.Left);

            CreateGroup1(navBarControl);
            CreateGroup2(navBarControl);

            navBarControl.View.ItemSelecting += navBarControl_View_ItemSelecting;
        }

        #endregion
    }
}

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

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Media.Imaging;

using DevExpress.Xpf.NavBar;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

CreateNavBarControl();

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

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

//////////////////////////////////////////////////////////////////////////////// Event

#region NavBarControl 뷰 항목 선택할 경우 처리하기 - navBarControl_View_ItemSelecting(sender, e)

/// <summary>

/// NavBarControl 뷰 항목 선택할 경우 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void navBarControl_View_ItemSelecting(object sender, NavBarItemSelectingEventArgs e)

{

if(e.NewItem.Content.ToString() == "Private")

{

MessageBoxResult messageBoxResult = MessageBox.Show("Are you sure to select the 'Private' item?", "Confirm Dialog", MessageBoxButton.YesNo);

e.Cancel = (messageBoxResult == MessageBoxResult.No);

}

#endregion

//////////////////////////////////////////////////////////////////////////////// Function

#region 그룹 1 생성하기 - CreateGroup1(navBarControl)

/// <summary>

/// 그룹 1 생성하기

/// </summary>

/// <param name="navBarControl">NavBarControl</param>

private void CreateGroup1(NavBarControl navBarControl)

{

#region 그룹을 생성한다.

NavBarGroup navBarGroup = new NavBarGroup();

navBarGroup.ImageSource = new BitmapImage(new Uri("pack://application:,,,/Image/folder.png"));

navBarGroup.Header = "Items";

navBarControl.Groups.Add(navBarGroup);

#endregion

#region 항목 1을 생성한다.

NavBarItem navBarItem1 = new NavBarItem();

navBarItem1.Content = "Home";

navBarGroup.Items.Add(navBarItem1);

#endregion

#region 항목 1을 생성한다.

NavBarItem navBarItem2 = new NavBarItem();

navBarItem2.Content = "Work";

navBarGroup.Items.Add(navBarItem2);

#endregion

#region 항목 3을 생성한다.

NavBarItem navBarItem3 = new NavBarItem();

navBarItem3.ImageSource = new BitmapImage(new Uri("pack://application:,,,/Image/private.png"));

navBarItem3.Content = "Private";

Style style = new Style();

style.Setters.Add(new Setter(NavBarViewBase.LayoutSettingsProperty, new LayoutSettings() { ImageDocking = Dock.Right }));

navBarItem3.VisualStyle = style;

navBarGroup.Items.Add(navBarItem3);

#endregion

}

#endregion

#region 그룹 2 생성하기 - CreateGroup2(navBarControl)

/// <summary>

/// 그룹 2 생성하기

/// </summary>

/// <param name="navBarControl">NavBarControl</param>

private void CreateGroup2(NavBarControl navBarControl)

{

NavBarGroup navBarGroup = new NavBarGroup();

navBarGroup.DisplaySource = DisplaySource.Content;

navBarGroup.Header = "Custom Content";

StackPanel stackPanel = new StackPanel() { Orientation = Orientation.Horizontal };

navBarGroup.Content = stackPanel;

stackPanel.Children.Add(new TextBlock() { Text = "Selected Item : " });

TextBlock textBlock = new TextBlock();

Binding binding = new Binding("SelectedItem.Content");

binding.Source = navBarControl;

textBlock.SetBinding(TextBlock.TextProperty, binding);

stackPanel.Children.Add(textBlock);

navBarControl.Groups.Add(navBarGroup);

}

#endregion

#region NavBarControl 생성하기 - CreateNavBarControl()

/// <summary>

/// NavBarControl 생성하기

/// </summary>

private void CreateNavBarControl()

{

NavBarControl navBarControl = new NavBarControl();

this.dockPanel.Children.Add(navBarControl);

DockPanel.SetDock(navBarControl, Dock.Left);

CreateGroup1(navBarControl);

CreateGroup2(navBarControl);

navBarControl.View.ItemSelecting += navBarControl_View_ItemSelecting;

}

#endregion

}

TestProject.zip

[C#/WPF/DEVEXPRESS] NavBarControl 클래스 : 코드를 통해 컨트롤 뷰 변경하기

■ NavBarControl 클래스에서 코드를 통해 컨트롤 뷰를 변경하는 방법을 보여준다. ▶ 예제 코드 (C#)


using DevExpress.Xpf.NavBar;

...

NavBarControl navBarControl = new NavBarControl();

...

NavigationPaneView navigationPaneView = new NavigationPaneView();

navigationPaneView.ActiveGroupMinHeight = 200;

navBarControl.View = navigationPaneView;

using DevExpress.Xpf.NavBar;

...

NavBarControl navBarControl = new NavBarControl();

...

NavigationPaneView navigationPaneView = new NavigationPaneView();

navigationPaneView.ActiveGroupMinHeight = 200;

navBarControl.View = navigationPaneView;

[C#/WPF/DEVEXPRESS] NavBarControl 클래스 : ItemTemplate를 생성해 DXNavBar 항목의 긴 텍스트 랩핑하기

■ NavBarControl 클래스에서 ItemTemplate를 생성해 DXNavBar 항목의 긴 텍스트를 랩핑하는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dxn="http://schemas.devexpress.com/winfx/2008/xaml/navbar"
    Width="800"
    Height="600"
    Title="ItemTemplate를 생성해 DXNavBar 항목의 긴 텍스트 랩핑하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <DataTemplate x:Key="ItemDataTemplateKey">
            <TextBlock
                Margin="5"
                TextWrapping="Wrap"
                Text="{Binding Path=Content}" />
        </DataTemplate>
    </Window.Resources>
    <dxn:NavBarControl MaxWidth="200">
        <dxn:NavBarControl.View>
            <dxn:ExplorerBarView ItemTemplate="{StaticResource ItemDataTemplateKey}" />
        </dxn:NavBarControl.View>
        <dxn:NavBarControl.Groups>
            <dxn:NavBarGroup Header="Group1">
                <dxn:NavBarGroup.Items>
                    <dxn:NavBarItem Content="VeryVeryVeryVeryVeryVeryLongText1" />
                    <dxn:NavBarItem Content="VeryVeryVeryVeryVeryVeryLongText2" />
                    <dxn:NavBarItem Content="VeryVeryVeryVeryVeryVeryLongText3" />
                </dxn:NavBarGroup.Items>
            </dxn:NavBarGroup>
        </dxn:NavBarControl.Groups>
    </dxn:NavBarControl>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:dxn="http://schemas.devexpress.com/winfx/2008/xaml/navbar"

Width="800"

Height="600"

Title="ItemTemplate를 생성해 DXNavBar 항목의 긴 텍스트 랩핑하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

<TextBlock

Margin="5"

TextWrapping="Wrap"

Text="{Binding Path=Content}" />

</DataTemplate>

</Window.Resources>

<dxn:NavBarControl MaxWidth="200">

<dxn:NavBarControl.View>

<dxn:ExplorerBarView ItemTemplate="{StaticResource ItemDataTemplateKey}" />

</dxn:NavBarControl.View>

<dxn:NavBarControl.Groups>

<dxn:NavBarGroup Header="Group1">

<dxn:NavBarGroup.Items>

<dxn:NavBarItem Content="VeryVeryVeryVeryVeryVeryLongText1" />

<dxn:NavBarItem Content="VeryVeryVeryVeryVeryVeryLongText2" />

<dxn:NavBarItem Content="VeryVeryVeryVeryVeryVeryLongText3" />

</dxn:NavBarGroup.Items>

</dxn:NavBarGroup>

</dxn:NavBarControl.Groups>

</dxn:NavBarControl>

</Window>

▶ MainWindow.xaml.cs


using System.Windows;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

        #endregion
    }
}

using System.Windows;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

}

#endregion

}

TestProject.zip

[C#/WPF/DEVEXPRESS] NavBarControl 엘리먼트 : XAML로 컨트롤 뷰 변경하기

■ NavBarControl 엘리먼트에서 XAML로 컨트롤 뷰를 변경하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<dxn:NavBarControl x:Name="navBarControl">
    <dxn:NavBarControl.View>
        <dxn:NavigationPaneView ActiveGroupMinHeight="200" />
    </dxn:NavBarControl.View>
    <dxn:NavBarControl.Groups>
        <dxn:NavBarGroup Header="Group 1">
            <dxn:NavBarItem Content="Item 1" />
            <dxn:NavBarItem Content="Item 2" />
            <dxn:NavBarItem Content="Item 3" />
        </dxn:NavBarGroup>
        <dxn:NavBarGroup Header="Group 2">
            <dxn:NavBarItem Content="Item 1" />
            <dxn:NavBarItem Content="Item 2" />
        </dxn:NavBarGroup>
        <dxn:NavBarGroup Header="Group 3">
            <dxn:NavBarItem Content="Item 1" />
            <dxn:NavBarItem Content="Item 2" />
            <dxn:NavBarItem Content="Item 3" />
        </dxn:NavBarGroup>
    </dxn:NavBarControl.Groups>
</dxn:NavBarControl>

<dxn:NavBarControl x:Name="navBarControl">

<dxn:NavBarControl.View>

<dxn:NavigationPaneView ActiveGroupMinHeight="200" />

</dxn:NavBarControl.View>

<dxn:NavBarControl.Groups>

<dxn:NavBarGroup Header="Group 1">

<dxn:NavBarItem Content="Item 1" />

<dxn:NavBarItem Content="Item 2" />

<dxn:NavBarItem Content="Item 3" />

</dxn:NavBarGroup>

<dxn:NavBarGroup Header="Group 2">

<dxn:NavBarItem Content="Item 1" />

<dxn:NavBarItem Content="Item 2" />

</dxn:NavBarGroup>

<dxn:NavBarGroup Header="Group 3">

<dxn:NavBarItem Content="Item 1" />

<dxn:NavBarItem Content="Item 2" />

<dxn:NavBarItem Content="Item 3" />

</dxn:NavBarGroup>

</dxn:NavBarControl.Groups>

</dxn:NavBarControl>

※ xmlns:dxn="http://schemas.devexpress.com/winfx/2008/xaml/navbar"

[C#/WPF/DEVEXPRESS] LayoutGroup 클래스 : 헤더 스타일 수정하기

■ LayoutGroup 클래스에서 헤더 스타일을 수정하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<lc:LayoutGroup
    View="GroupBox"
    Orientation="Vertical"
    Header="Group 1">
    <lc:LayoutGroup.GroupBoxStyle>
        <Style TargetType="lc:GroupBox">
            <Setter Property="TitleBackground" Value="LightYellow" />
            <Setter Property="Foreground"      Value="Blue"        />
            <Setter Property="Background"      Value="White"       />
        </Style>
    </lc:LayoutGroup.GroupBoxStyle>
    ...
</lc:LayoutGroup>

<lc:LayoutGroup

View="GroupBox"

Orientation="Vertical"

Header="Group 1">

<lc:LayoutGroup.GroupBoxStyle>

</Style>

</lc:LayoutGroup.GroupBoxStyle>

...

</lc:LayoutGroup>

※ xmlns:lc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol"

[C#/WPF/DEVEXPRESS] LayoutControl 클래스 : 개별 또는 모든 레이아웃 항목 레이블 스타일 변경하기

■ LayoutControl 클래스에서 개별 또는 모든 레이아웃 항목 레이블 스타일을 변경하는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:lc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol"
    Width="800"
    Height="600"
    Title="개별 또는 모든 레이아웃 항목 레이블 스타일 변경하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Style x:Key="DefaultLayoutItemStyleKey" TargetType="lc:LayoutItem">
            <Setter Property="LabelStyle">
                <Setter.Value>
                    <Style TargetType="lc:LayoutItemLabel">
                        <Setter Property="Foreground" Value="#ff0000ff" />
                    </Style>
                </Setter.Value>
            </Setter>
            <Setter Property="ElementSpace" Value="8" />
        </Style>
        <Style x:Key="CustomLabelStyleKey" TargetType="lc:LayoutItemLabel">
            <Setter Property="Foreground" Value="#ffff0000" />
        </Style>
    </Window.Resources>
    <lc:LayoutControl x:Name="layoutControl"
        ItemStyle="{StaticResource DefaultLayoutItemStyleKey}">
        <lc:LayoutGroup View="GroupBox" Orientation="Vertical" Header="Group 1">
            <lc:LayoutItem
                LabelStyle="{StaticResource CustomLabelStyleKey}"
                Label="Model :">
                <TextBlock Text="530i" />
            </lc:LayoutItem>
            <lc:LayoutItem Label="HP :" >
                <TextBlock Text="225" />
            </lc:LayoutItem>
            <lc:LayoutItem Label="# of Gears :">
                <TextBlock Text="5" />
            </lc:LayoutItem>
        </lc:LayoutGroup>
    </lc:LayoutControl>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:lc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol"

Width="800"

Height="600"

Title="개별 또는 모든 레이아웃 항목 레이블 스타일 변경하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

<Setter.Value>

</Style>

</Setter.Value>

</Setter>

</Style>

</Style>

</Window.Resources>

<lc:LayoutControl x:Name="layoutControl"

ItemStyle="{StaticResource DefaultLayoutItemStyleKey}">

<lc:LayoutGroup View="GroupBox" Orientation="Vertical" Header="Group 1">

<lc:LayoutItem

LabelStyle="{StaticResource CustomLabelStyleKey}"

Label="Model :">

</lc:LayoutItem>

<lc:LayoutItem Label="HP :" >

</lc:LayoutItem>

<lc:LayoutItem Label="# of Gears :">

</lc:LayoutItem>

</lc:LayoutGroup>

</lc:LayoutControl>

</Window>

▶ MainWindow.xaml.cs


using System.Windows;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

        #endregion
    }
}

using System.Windows;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

}

#endregion

}

TestProject.zip

[C#/WPF/DEVEXPRESS] LayoutControl 클래스 : LayoutItem 레이블 표시를 위해 사용되는 DataTemplate 지정하기

■ LayoutControl 클래스에서 LayoutItem 레이블 표시를 위해 사용되는 DataTemplate을 지정하는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:lc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol"
    Width="800"
    Height="600"
    Title="LayoutItem 레이블 표시를 위해 사용되는 DataTemplate 지정하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <lc:LayoutControl Orientation="Vertical">
            <lc:LayoutControl.ItemStyle>
                <Style TargetType="lc:LayoutItem">
                    <Setter Property="LabelTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding}" />
                                    <TextBlock Text=" : "       />
                                </StackPanel>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </lc:LayoutControl.ItemStyle>
            <lc:LayoutGroup View="GroupBox" Orientation="Vertical" Header="Group 1">
                <lc:LayoutItem Label="Item 1">
                    <TextBox />
                </lc:LayoutItem>
                <lc:LayoutItem Label="Item 2">
                    <TextBox />
                </lc:LayoutItem>
                <lc:LayoutItem Label="Item 3">
                    <TextBox />
                </lc:LayoutItem>
            </lc:LayoutGroup>
        </lc:LayoutControl>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:lc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol"

Width="800"

Height="600"

Title="LayoutItem 레이블 표시를 위해 사용되는 DataTemplate 지정하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<lc:LayoutControl Orientation="Vertical">

<lc:LayoutControl.ItemStyle>

<Setter.Value>

</StackPanel>

</DataTemplate>

</Setter.Value>

</Setter>

</Style>

</lc:LayoutControl.ItemStyle>

<lc:LayoutGroup View="GroupBox" Orientation="Vertical" Header="Group 1">

<lc:LayoutItem Label="Item 1">

</lc:LayoutItem>

<lc:LayoutItem Label="Item 2">

</lc:LayoutItem>

<lc:LayoutItem Label="Item 3">

</lc:LayoutItem>

</lc:LayoutGroup>

</lc:LayoutControl>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using System.Windows;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

        #endregion
    }
}

using System.Windows;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

}

#endregion

}

TestProject.zip