devexpress|Winform + Devexpress 实现看板效果 Devexpress|ChartControl|winform

环境：VS2019、Sql Server R2 2008、Devexpress ChartControl、layoutControl
最终效果：
文章图片

【devexpress|Winform + Devexpress 实现看板效果】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轴，本来只显示整点即可，但是如果只有一柱，会在其它刻度显示小数。如图所示：

文章图片

实现方法：

//设置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怎么设置透明背景到父控件的背景。