Winform + Devexpress 实现看板效果

环境:VS2019、Sql Server R2 2008、Devexpress ChartControl、layoutControl

最终效果:Winform + Devexpress 实现看板效果_第1张图片

1、设置背景图(LayoutControl)

this.Root.BackgroundImageOptions.Image = ((System.Drawing.Image)(resources.GetObject("Root.BackgroundImageOptions.Image")));
this.Root.BackgroundImageOptions.Visible = true;

2、设置ChartControl透明到父控件的背景图:

//ChartControl背景色透明
this.chartControl3.BackColor = System.Drawing.Color.Transparent;
//填充模式为空
this.chartControl3.FillStyle.FillMode = DevExpress.XtraCharts.FillMode.Empty;

3、设置ChartControl父控件背景色为透明:

//至关重要,如果不设置,ChartControl就不会显示透明背景图片
this.layoutControl1.BackColor = System.Drawing.Color.Transparent;

4、取消ChartControl的Border,看起来更干净:

this.chartControl3.BorderOptions.Visibility = DevExpress.Utils.DefaultBoolean.False;

5、ChartControl里面Series、Legend透明设置只需要设置BackColor=Transparent即可。

6、GridControl、GridView样式设置

//本来要实现和ChartControl一样的效果,但是最后还是没找到,所以只能单独给设置一个统一的背景
this.gridControl1.BackgroundImage = ((System.Drawing.Image)(resources.GetObject("gridControl1.BackgroundImage")));
            this.gridControl1.BackgroundImageLayout = System.Windows.Forms.ImageLayout.Stretch;
            this.gridControl1.EmbeddedNavigator.Appearance.BackColor = System.Drawing.Color.Transparent;
            this.gridControl1.EmbeddedNavigator.Appearance.Options.UseBackColor = true;
            this.gridControl1.ImeMode = System.Windows.Forms.ImeMode.NoControl;
            this.gridControl1.Location = new System.Drawing.Point(12, 301);
            this.gridControl1.LookAndFeel.SkinMaskColor = System.Drawing.Color.Transparent;
            this.gridControl1.LookAndFeel.SkinMaskColor2 = System.Drawing.Color.Transparent;
            this.gridControl1.LookAndFeel.Style = DevExpress.LookAndFeel.LookAndFeelStyle.UltraFlat;
            this.gridControl1.LookAndFeel.UseDefaultLookAndFeel = false;
            this.gridControl1.MainView = this.gridView1;
            this.gridControl1.Name = "gridControl1";
            this.gridControl1.RepositoryItems.AddRange(new DevExpress.XtraEditors.Repository.RepositoryItem[] {
            this.repositoryItemMemoEdit1,
            this.repositoryItemMemoEdit2});
            this.gridControl1.Size = new System.Drawing.Size(320, 160);
            this.gridControl1.TabIndex = 5;
            this.gridControl1.ViewCollection.AddRange(new DevExpress.XtraGrid.Views.Base.BaseView[] {
            this.gridView1});

//GridView很多属性要设置
this.gridView1.Appearance.ColumnFilterButton.BackColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.ColumnFilterButton.BackColor2 = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.ColumnFilterButton.BorderColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.ColumnFilterButton.Options.UseBackColor = true;
            this.gridView1.Appearance.ColumnFilterButton.Options.UseBorderColor = true;
            this.gridView1.Appearance.ColumnFilterButtonActive.BackColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.ColumnFilterButtonActive.BackColor2 = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.ColumnFilterButtonActive.BorderColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.ColumnFilterButtonActive.Options.UseBackColor = true;
            this.gridView1.Appearance.ColumnFilterButtonActive.Options.UseBorderColor = true;
            this.gridView1.Appearance.Empty.BackColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.Empty.BackColor2 = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.Empty.Options.UseBackColor = true;
            this.gridView1.Appearance.EvenRow.BackColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.EvenRow.BackColor2 = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.EvenRow.BorderColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.EvenRow.Options.UseBackColor = true;
            this.gridView1.Appearance.EvenRow.Options.UseBorderColor = true;
            this.gridView1.Appearance.FilterPanel.BackColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.FilterPanel.BackColor2 = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.FilterPanel.BorderColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.FilterPanel.Options.UseBackColor = true;
            this.gridView1.Appearance.FilterPanel.Options.UseBorderColor = true;
            this.gridView1.Appearance.FixedLine.BackColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.FixedLine.BackColor2 = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.FixedLine.Options.UseBackColor = true;
            this.gridView1.Appearance.FocusedCell.BackColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.FocusedCell.BackColor2 = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.FocusedCell.BorderColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.FocusedCell.Options.UseBackColor = true;
            this.gridView1.Appearance.FocusedCell.Options.UseBorderColor = true;
            this.gridView1.Appearance.FocusedRow.BackColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.FocusedRow.BackColor2 = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.FocusedRow.BorderColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.FocusedRow.ForeColor = System.Drawing.Color.White;
            this.gridView1.Appearance.FocusedRow.Options.UseBackColor = true;
            this.gridView1.Appearance.FocusedRow.Options.UseBorderColor = true;
            this.gridView1.Appearance.FocusedRow.Options.UseForeColor = true;
            this.gridView1.Appearance.FooterPanel.BackColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.FooterPanel.BackColor2 = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.FooterPanel.BorderColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.FooterPanel.Options.UseBackColor = true;
            this.gridView1.Appearance.FooterPanel.Options.UseBorderColor = true;
            this.gridView1.Appearance.GroupButton.BackColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.GroupButton.BackColor2 = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.GroupButton.BorderColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.GroupButton.Options.UseBackColor = true;
            this.gridView1.Appearance.GroupButton.Options.UseBorderColor = true;
            this.gridView1.Appearance.GroupFooter.BackColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.GroupFooter.BackColor2 = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.GroupFooter.BorderColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.GroupFooter.Options.UseBackColor = true;
            this.gridView1.Appearance.GroupFooter.Options.UseBorderColor = true;
            this.gridView1.Appearance.HeaderPanel.BackColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.HeaderPanel.BackColor2 = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.HeaderPanel.BorderColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.HeaderPanel.Options.UseBackColor = true;
            this.gridView1.Appearance.HeaderPanel.Options.UseBorderColor = true;
            this.gridView1.Appearance.HideSelectionRow.BackColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.HideSelectionRow.BackColor2 = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.HideSelectionRow.BorderColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.HideSelectionRow.Options.UseBackColor = true;
            this.gridView1.Appearance.HideSelectionRow.Options.UseBorderColor = true;
            this.gridView1.Appearance.HorzLine.BackColor = System.Drawing.Color.White;
            this.gridView1.Appearance.HorzLine.BackColor2 = System.Drawing.Color.White;
            this.gridView1.Appearance.HorzLine.Options.UseBackColor = true;
            this.gridView1.Appearance.OddRow.BackColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.OddRow.BackColor2 = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.OddRow.BorderColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.OddRow.Options.UseBackColor = true;
            this.gridView1.Appearance.OddRow.Options.UseBorderColor = true;
            this.gridView1.Appearance.Preview.BackColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.Preview.BackColor2 = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.Preview.BorderColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.Preview.Options.UseBackColor = true;
            this.gridView1.Appearance.Preview.Options.UseBorderColor = true;
            this.gridView1.Appearance.Row.BackColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.Row.BackColor2 = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.Row.BorderColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.Row.Options.UseBackColor = true;
            this.gridView1.Appearance.Row.Options.UseBorderColor = true;
            this.gridView1.Appearance.RowSeparator.BackColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.RowSeparator.BackColor2 = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.RowSeparator.Options.UseBackColor = true;
            this.gridView1.Appearance.SelectedRow.BackColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.SelectedRow.BackColor2 = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.SelectedRow.BorderColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.SelectedRow.Options.UseBackColor = true;
            this.gridView1.Appearance.SelectedRow.Options.UseBorderColor = true;
            this.gridView1.Appearance.TopNewRow.BackColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.TopNewRow.BackColor2 = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.TopNewRow.BorderColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.TopNewRow.Options.UseBackColor = true;
            this.gridView1.Appearance.TopNewRow.Options.UseBorderColor = true;
            this.gridView1.Appearance.VertLine.BackColor = System.Drawing.Color.White;
            this.gridView1.Appearance.VertLine.BackColor2 = System.Drawing.Color.White;
            this.gridView1.Appearance.VertLine.Options.UseBackColor = true;
            this.gridView1.Appearance.ViewCaption.BackColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.ViewCaption.BackColor2 = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.ViewCaption.BorderColor = System.Drawing.Color.Transparent;
            this.gridView1.Appearance.ViewCaption.Options.UseBackColor = true;
            this.gridView1.Appearance.ViewCaption.Options.UseBorderColor = true;
            this.gridView1.AppearancePrint.EvenRow.BackColor = System.Drawing.Color.Transparent;
            this.gridView1.AppearancePrint.EvenRow.BackColor2 = System.Drawing.Color.Transparent;
            this.gridView1.AppearancePrint.EvenRow.BorderColor = System.Drawing.Color.Transparent;
            this.gridView1.AppearancePrint.EvenRow.Options.UseBackColor = true;
            this.gridView1.AppearancePrint.EvenRow.Options.UseBorderColor = true;
            this.gridView1.AppearancePrint.FilterPanel.BackColor = System.Drawing.Color.Transparent;
            this.gridView1.AppearancePrint.FilterPanel.BackColor2 = System.Drawing.Color.Transparent;
            this.gridView1.AppearancePrint.FilterPanel.BorderColor = System.Drawing.Color.Transparent;
            this.gridView1.AppearancePrint.FilterPanel.Options.UseBackColor = true;
            this.gridView1.AppearancePrint.FilterPanel.Options.UseBorderColor = true;
            this.gridView1.AppearancePrint.FooterPanel.BackColor = System.Drawing.Color.Transparent;
            this.gridView1.AppearancePrint.FooterPanel.BackColor2 = System.Drawing.Color.Transparent;
            this.gridView1.AppearancePrint.FooterPanel.BorderColor = System.Drawing.Color.Transparent;
            this.gridView1.AppearancePrint.FooterPanel.Options.UseBackColor = true;
            this.gridView1.AppearancePrint.FooterPanel.Options.UseBorderColor = true;
            this.gridView1.AppearancePrint.HeaderPanel.BackColor = System.Drawing.Color.Transparent;
            this.gridView1.AppearancePrint.HeaderPanel.BackColor2 = System.Drawing.Color.Transparent;
            this.gridView1.AppearancePrint.HeaderPanel.BorderColor = System.Drawing.Color.Transparent;
            this.gridView1.AppearancePrint.HeaderPanel.Options.UseBackColor = true;
            this.gridView1.AppearancePrint.HeaderPanel.Options.UseBorderColor = true;
            this.gridView1.AppearancePrint.Lines.BackColor = System.Drawing.Color.White;
            this.gridView1.AppearancePrint.Lines.BackColor2 = System.Drawing.Color.White;
            this.gridView1.AppearancePrint.Lines.BorderColor = System.Drawing.Color.White;
            this.gridView1.AppearancePrint.Lines.Options.UseBackColor = true;
            this.gridView1.AppearancePrint.Lines.Options.UseBorderColor = true;
            this.gridView1.AppearancePrint.OddRow.BackColor = System.Drawing.Color.Transparent;
            this.gridView1.AppearancePrint.OddRow.BackColor2 = System.Drawing.Color.Transparent;
            this.gridView1.AppearancePrint.OddRow.BorderColor = System.Drawing.Color.Transparent;
            this.gridView1.AppearancePrint.OddRow.Options.UseBackColor = true;
            this.gridView1.AppearancePrint.OddRow.Options.UseBorderColor = true;
            this.gridView1.AppearancePrint.Preview.BackColor = System.Drawing.Color.Transparent;
            this.gridView1.AppearancePrint.Preview.BackColor2 = System.Drawing.Color.Transparent;
            this.gridView1.AppearancePrint.Preview.BorderColor = System.Drawing.Color.Transparent;
            this.gridView1.AppearancePrint.Preview.Options.UseBackColor = true;
            this.gridView1.AppearancePrint.Preview.Options.UseBorderColor = true;
            this.gridView1.AppearancePrint.Row.BackColor = System.Drawing.Color.Transparent;
            this.gridView1.AppearancePrint.Row.BackColor2 = System.Drawing.Color.Transparent;
            this.gridView1.AppearancePrint.Row.BorderColor = System.Drawing.Color.Transparent;
            this.gridView1.AppearancePrint.Row.Options.UseBackColor = true;
            this.gridView1.AppearancePrint.Row.Options.UseBorderColor = true;
            //无边框
            this.gridView1.BorderStyle = DevExpress.XtraEditors.Controls.BorderStyles.NoBorder;
            this.gridView1.DetailHeight = 300;
            this.gridView1.GridControl = this.gridControl1;
            this.gridView1.Name = "gridView1";
            this.gridView1.OptionsBehavior.Editable = false;
            this.gridView1.OptionsDetail.EnableMasterViewMode = false;
            this.gridView1.OptionsView.AllowHtmlDrawHeaders = true;
            this.gridView1.OptionsView.BestFitMode = DevExpress.XtraGrid.Views.Grid.GridBestFitMode.Full;
            this.gridView1.OptionsView.RowAutoHeight = true;
            this.gridView1.OptionsView.ShowGroupPanel = false;
            //左侧的行预留去掉
            this.gridView1.OptionsView.ShowIndicator = false;
            //竖向进度条不显示
            this.gridView1.VertScrollVisibility = DevExpress.XtraGrid.Views.Base.ScrollVisibility.Never;

最后还有很多想法没实现:

1、ChartControl柱图的X轴,本来只显示整点即可,但是如果只有一柱,会在其它刻度显示小数。如图所示:Winform + Devexpress 实现看板效果_第2张图片

实现方法:

//设置Series的ArgumentScaleType为ScaleType.Qualitative
series.ArgumentScaleType = ScaleType.Qualitative;


//定义CustomDrawAxisLabel事件,重写x轴的值
private void ChartControl1_CustomDrawAxisLabel(object sender, CustomDrawAxisLabelEventArgs e)    {
            if (e.Item.Axis == ((XYDiagram)chartControl1.Diagram).AxisX)
                e.Item.Text = Convert.ToInt32(e.Item.AxisValue).ToString();
      }

2、ChartControl的饼图,本来Label要显示具体的文字,但是不知道怎么设置,显示的都是占比。

3、GridControl怎么设置透明背景到父控件的背景。

你可能感兴趣的:(devexpress,winform,Devexpress,ChartControl)