[DEVEXPRESS/WPF] GridControl 클래스 : 상세 영역에서 차트 표시하기

TestProject.zip

다운로드

▶ 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/charts"
    xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
    Width="800"
    Height="600"
    Title="상세 영역에서 차트 표시하기"
    FontFamily="나눔고딕코딩"
    FontSize="16"
    Loaded="Window_Loaded">
    <Window.Resources>
        <DataTemplate x:Key="DetailContentDataTemplateKey">
            <Grid Margin="10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <StackPanel
                    Grid.Column="0"
                    Orientation="Vertical">
                    <TextBlock>
                        <Bold>Note :</Bold>
                    </TextBlock>
                    <TextBlock
                        TextWrapping="Wrap"
                        Text="{Binding Path=Note}" />
                </StackPanel>
                <dxc:ChartControl
                    Grid.Column="1"
                    Margin="10"
                    Height="200"
                    DataSource="{Binding Path=OrderList}">
                    <dxc:SimpleDiagram2D>
                        <dxc:SimpleDiagram2D.Series>
                            <dxc:PieSeries2D x:Name="pieSeries2D"
                                ArgumentDataMember="Supplier"
                                ValueDataMember="Quantity"
                                LabelsVisibility="True">
                                <dxc:PieSeries2D.PointOptions>
                                    <dxc:PointOptions>
                                        <dxc:PointOptions.ValueNumericOptions>
                                            <dxc:NumericOptions Format="Percent" Precision="0"/>
                                        </dxc:PointOptions.ValueNumericOptions>
                                    </dxc:PointOptions>
                                </dxc:PieSeries2D.PointOptions>
                                <dxc:PieSeries2D.LegendPointOptions>
                                    <dxc:PointOptions Pattern="{}{A}"/>
                                </dxc:PieSeries2D.LegendPointOptions>
                            </dxc:PieSeries2D>
                        </dxc:SimpleDiagram2D.Series>
                    </dxc:SimpleDiagram2D>
                    <dxc:ChartControl.Legend>
                        <dxc:Legend Visibility="Visible" />
                    </dxc:ChartControl.Legend>
                </dxc:ChartControl>
            </Grid>
        </DataTemplate>
    </Window.Resources>
    <Grid Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"    />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*"    />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"   />
            <ColumnDefinition Width="100" />
        </Grid.ColumnDefinitions>
        <dxg:GridControl Name="gridControl1" Grid.Column="0" Grid.Row="0"
            AutoGenerateColumns="AddNew">
            <dxg:GridControl.View>
                <dxg:TableView Name="tableView1"
                    ShowGroupPanel="False"
                    ShowTotalSummary="True" />
            </dxg:GridControl.View>
            <dxg:GridControl.DetailDescriptor>
                <dxg:TabViewDetailDescriptor>
                    <dxg:TabViewDetailDescriptor.DetailDescriptors>
                        <dxg:ContentDetailDescriptor
                            ContentTemplate="{StaticResource DetailContentDataTemplateKey}"
                            HeaderContent="ContentDetailDescriptor">
                        </dxg:ContentDetailDescriptor>
                        <dxg:DataControlDetailDescriptor
                            x:Name="dataControlDetailDescriptor"
                            ContentTemplate="{StaticResource DetailContentDataTemplateKey}"
                            ItemsSourcePath="OrderList">
                            <dxg:DataControlDetailDescriptor.DataControl>
                                <dxg:GridControl AutoGenerateColumns="AddNew">
                                    <dxg:GridControl.View>
                                        <dxg:TableView
                                            DetailHeaderContent="DataControlDetailDescriptor"
                                            ShowGroupPanel="False" />
                                    </dxg:GridControl.View>
                                </dxg:GridControl>
                            </dxg:DataControlDetailDescriptor.DataControl>
                        </dxg:DataControlDetailDescriptor>
                    </dxg:TabViewDetailDescriptor.DetailDescriptors>
                </dxg:TabViewDetailDescriptor>
            </dxg:GridControl.DetailDescriptor>
        </dxg:GridControl>
        <GridSplitter x:Name="gridSplitter" Grid.Row="1" Grid.Column="0"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Center"
            Width="Auto"
            Height="10"
            ResizeDirection="Rows" />
        <dxg:GridControl x:Name="gridControl2" Grid.Row="2" Grid.Column="0"
            AutoGenerateColumns="AddNew">
            <dxg:GridControl.View>
                <dxg:TableView x:Name="tableView2" ShowGroupPanel="False" />
            </dxg:GridControl.View>
        </dxg:GridControl>
        <StackPanel Grid.Row="2" Grid.Column="1"
            Width="100"
            Orientation="Vertical">
            <Button
                HorizontalContentAlignment="Center"
                VerticalContentAlignment="Center"
                Margin="10"
                Height="64"
                Click="button_Click">
                <TextBlock
                    HorizontalAlignment="Center"
                    TextWrapping="Wrap"
                    Text="Add Details" />
            </Button>
        </StackPanel>
    </Grid>
</Window>

 

300x250

 

▶ MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Windows;

using DevExpress.Xpf.Grid;

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

        #region Field

        /// <summary>
        /// 직원 리스트
        /// </summary>
        private List<Employee> employeeList;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 직원 리스트 - EmployeeList

        /// <summary>
        /// 직원 리스트
        /// </summary>
        private List<Employee> EmployeeList
        {
            get
            {
                if(this.employeeList == null)
                {
                    CreateEmployeeList();
                }

                return this.employeeList;
            }
        }

        #endregion

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

        #region 생성자 - MainWindow()

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

        #endregion

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

        #region 윈도우 로드시 처리하기 - Window_Loaded(sender, e)

        /// <summary>
        /// 윈도우 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            this.gridControl1.ItemsSource = EmployeeList;
            this.gridControl2.ItemsSource = EmployeeList;
        }

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

        /// <summary>
        /// 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void button_Click(object sender, RoutedEventArgs e)
        {
            DataControlDetailDescriptor dataControlDetailDescriptor = new DataControlDetailDescriptor();

            dataControlDetailDescriptor.DataControl     = GetDataControl();
            dataControlDetailDescriptor.ItemsSourcePath = "OrderList";
            dataControlDetailDescriptor.ContentTemplate = (DataTemplate)this.FindResource("DetailContentDataTemplateKey");

            ContentDetailDescriptor contentDetailDescriptor = new ContentDetailDescriptor();

            contentDetailDescriptor.ContentTemplate       = (DataTemplate)this.FindResource("DetailContentDataTemplateKey");
            contentDetailDescriptor.HeaderContentTemplate = (DataTemplate)this.FindResource("DetailContentDataTemplateKey");
            contentDetailDescriptor.HeaderContent         = "ContentDetailDescriptor";

            TabViewDetailDescriptor tabViewDetailDescriptor = new TabViewDetailDescriptor();

            tabViewDetailDescriptor.DetailDescriptors.Add(contentDetailDescriptor);
            tabViewDetailDescriptor.DetailDescriptors.Add(dataControlDetailDescriptor);

            this.gridControl2.DetailDescriptor = tabViewDetailDescriptor;
        }

        #endregion

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

        #region 직원 리스트 생성하기 - CreateEmployeeList()

        /// <summary>
        /// 직원 리스트 생성하기
        /// </summary>
        private void CreateEmployeeList()
        {
            this.employeeList = new List<Employee>();

            this.employeeList.Add
            (
                new Employee
                (
                    "Bruce",
                    "Cambell",
                    "Sales Manager",
                    "Education includes a BA in psychology from Colorado State University in 1970. " +
                    "He also completed 'The Art of the Cold Call.' " +
                    "Bruce is a member of Toastmasters International."
                )
            );

            this.employeeList[0].OrderList.Add(new Order("Supplier 1", DateTime.Now           , "TV"        , 20));
            this.employeeList[0].OrderList.Add(new Order("Supplier 2", DateTime.Now.AddDays(3), "Projector" , 15));
            this.employeeList[0].OrderList.Add(new Order("Supplier 3", DateTime.Now.AddDays(3), "HDMI Cable", 50));

            this.employeeList.Add
            (
                new Employee
                (
                    "Cindy",
                    "Haneline",
                    "Vice President of Sales",
                    "Cindy received her BTS commercial in 1974 and a Ph.D. " + "" +
                    "in international marketing from the University of Dallas in 1981. " +
                    "She is fluent in French and Italian and reads German. " +
                    "She joined the company as a sales representative, " +
                    "was promoted to sales manager in January 1992 and to vice president of sales in March 1993. " +
                    "Cindy is a member of the Sales Management Roundtable, " +
                    "the Seattle Chamber of Commerce, and the Pacific Rim Importers Association."
                )
            );

            this.employeeList[1].OrderList.Add(new Order("Supplier 1", DateTime.Now.AddDays(1), "Blu-Ray Player", 10));
            this.employeeList[1].OrderList.Add(new Order("Supplier 2", DateTime.Now.AddDays(1), "Blu-Ray Player", 10));
            this.employeeList[1].OrderList.Add(new Order("Supplier 3", DateTime.Now.AddDays(1), "Blu-Ray Player", 10));
            this.employeeList[1].OrderList.Add(new Order("Supplier 4", DateTime.Now.AddDays(1), "Blu-Ray Player", 10));

            this.employeeList.Add
            (
                new Employee
                (
                    "Jack",
                    "Lee",
                    "Sales Manager",
                    "Education includes a BA in psychology from Colorado State University in 1970. " +
                    "He also completed 'The Art of the Cold Call.' " +
                    "Jack is a member of Toastmasters International."
                )
            );

            this.employeeList[2].OrderList.Add(new Order("Supplier 1", DateTime.Now           , "AV Receiver", 20));
            this.employeeList[2].OrderList.Add(new Order("Supplier 2", DateTime.Now.AddDays(3), "Projector"  , 15));

            this.employeeList.Add
            (
                new Employee
                (
                    "Cindy",
                    "Johnson",
                    "Vice President of Sales",
                    "Cindy received her BTS commercial in 1974 and a Ph.D. " +
                    "in international marketing from the University of Dallas in 1981. " +
                    "She is fluent in French and Italian and reads German. " +
                    "She joined the company as a sales representative, " +
                    "was promoted to sales manager in January 1992 and to vice president of sales in March 1993. " +
                    "Cindy is a member of the Sales Management Roundtable, " +
                    "the Seattle Chamber of Commerce, and the Pacific Rim Importers Association."
                )
            );
        }

        #endregion
        #region 데이터 컨트롤 구하기 - GetDataControl()

        /// <summary>
        /// 데이터 컨트롤 구하기
        /// </summary>
        /// <returns>GridControl 객체</returns>
        private GridControl GetDataControl()
        {
            GridControl gridControl = new GridControl();

            gridControl.AutoGenerateColumns = AutoGenerateColumnsMode.AddNew;

            gridControl.View = new TableView();

            (gridControl.View as TableView).DetailHeaderContent = "DataControlDetailDescriptor";
            (gridControl.View as TableView).ShowGroupPanel      = false;
            (gridControl.View as TableView).AutoWidth           = true;

            return gridControl;
        }

        #endregion
    }
}