Xamarin devexpress datagrid 样式

DevExpress的提供光与暗的内置，可以应用到主题GridControl改变其外观。

 

主题	iOS版	Android版
光 （默认适用于iOS）
黑暗 （默认为Android）

应用预定义的主题

该主题类存储提供的主题名称。要更改主题，分配主题类的相应字段的ThemeManager.ThemeName

 

 
 

C#

using Xamarin.Forms;

using DevExpress.Mobile.DataGrid.Theme;

 
 

// ...  

 
 

ThemeManager.ThemeName = Themes.Dark;

 
 

// ...  

 
 

自定义主题

要自定义应用的主题，使用ThemeBase类。它为您提供各种定制，使您可以更改主题的外观，并将其应用到电网。您可以使用这些定制来改变背景颜色，字体和所需的网格单元（头，属性组行等）

重要

要应用定制，调用ThemeManager.RefreshTheme方法。

该ThemeBase类的属性提供访问不同的定制，你可以调整来改变外观设置（例如，字体属性，边框和背景颜色等）网格的相应的视觉元素（如数据单元格，行分组，过滤器面板等）。在本实施例中，使用下面的定制。

• ThemeBase.HeaderCustomizer

• ThemeBase.CellCustomizer

• ThemeBase.TotalSummaryCustomizer

• ThemeBase.NewItemRowCustomizer

 
 

为了跟踪时刻变化的主题，无论是处理ThemeManager.ThemeChanged事件或使用IThemeChangingHandler.OnThemeChanged方法。

这个例子定制光主题，因为它是在下面的图片中显示。

 
 

 

 
 

C#:MainPage.xaml.cs

using System;

using System.Collections.Generic;

using Xamarin.Forms;

using DevExpress.Mobile.DataGrid;

using DevExpress.Mobile.DataGrid.Theme;

 
 

namespace ThemeCustomizing {

 
 

public
partial
class MainPage : ContentPage {

 
 

int count = 0;

public MainPage() {

 
 

InitializeComponent();

 
 

 
 

TestOrdersRepository model = new TestOrdersRepository();

BindingContext = model;

 
 

ThemeManager.ThemeName = Themes.Light;

 
 

// Header customization.

ThemeManager.Theme.HeaderCustomizer.BackgroundColor = Color.FromRgb(187, 228, 208);

ThemeFontAttributes myFont = new ThemeFontAttributes("Verdana",

ThemeFontAttributes.FontSizeFromNamedSize(NamedSize.Large),

FontAttributes.None, Color.White);

ThemeManager.Theme.HeaderCustomizer.Font = myFont;

 
 

 
 

// Cell customization.

ThemeManager.Theme.CellCustomizer.SelectionColor = Color.FromRgb(186, 220, 225);

ThemeFontAttributes myFont1 = new ThemeFontAttributes("Verdana",

ThemeFontAttributes.FontSizeFromNamedSize(NamedSize.Medium),

FontAttributes.None, Color.Black);

ThemeManager.Theme.CellCustomizer.Font = myFont1;

 
 

 
 

// Various customization.

ThemeManager.Theme.TotalSumaryCustomizer.BackgroundColor = Color.FromRgb(163, 162, 168);

ThemeFontAttributes myFont2 = new ThemeFontAttributes("Verdana",

ThemeFontAttributes.FontSizeFromNamedSize(NamedSize.Default),

FontAttributes.None, Color.Black);

ThemeManager.Theme.TotalSummaryCustomizer.Font = myFont2;

ThemeManager.Theme.NewItemRowCustomizer.Font = myFont2;

 
 

 
 

ThemeManager.RefreshTheme();

}

 
 

void OnCalculateCustomSummary(object sender, CustomSummaryEventArgs e) {

if (e.FieldName.ToString() == "Shipped")

if (e.IsTotalSummary) {

if (e.SummaryProcess == CustomSummaryProcess.Calculate) {

if (!(bool)e.FieldValue)

count++;

e.TotalValue = count;

}

}

}

 
 

}

 
 

}

自定义模板列、滑动显示按钮

<dxGrid:GridControl
x:Name="grid"
ItemsSource="{Binding JDProduct}"

AllowResizeColumns="True"

AllowHorizontalScrollingVirtualization="True"

ColumnsAutoWidth="False"

SwipeButtonShowing="OnSwipeButtonShowing"
						

						SwipeButtonClick="OnSwipeButtonClick"
					

>

<dxGrid:GridControl.Columns>

<dxGrid:TemplateColumn
FieldName="Name"
Caption ="112"
Width ="60"
IsReadOnly="true"
AllowGroup="False"
AllowSort="False" >

<dxGrid:TemplateColumn.DisplayTemplate>

<DataTemplate>

<Button
Text="{Binding Value}"

Clicked="nameClient"

BorderWidth="0"

                                    BackgroundColor="Green"

                                    TextColor="White"

></Button>

</DataTemplate>

</dxGrid:TemplateColumn.DisplayTemplate>

</dxGrid:TemplateColumn>

<dxGrid:TextColumn
FieldName="Name"
Caption = "名字"
Width = "100" />

<dxGrid:NumberColumn
FieldName="UnitPrice"
Caption = "价格"
DisplayFormat="C0"/>

<dxGrid:DateColumn
FieldName="Date"
DisplayFormat="d"/>

<dxGrid:SwitchColumn
FieldName="Shipped" />

<dxGrid:TextColumn
FieldName="Name"
Caption = "Product" />

<dxGrid:TextColumn
FieldName="Name"
Caption = "Product" />

<dxGrid:TextColumn
FieldName="Name"
Caption = "Product" />

<dxGrid:TextColumn
FieldName="Name"
Caption = "Product" />

<dxGrid:TextColumn
FieldName="Name"
Caption = "Product" />

<dxGrid:TextColumn
FieldName="Name"
Caption = "Product" />

 

</dxGrid:GridControl.Columns>

<dxGrid:GridControl.LeftSwipeButtons>

<dxGrid:SwipeButtonInfo
ButtonName="LeftButton"
Caption="打印"
BackgroundColor="Green"
Width="150"/>

</dxGrid:GridControl.LeftSwipeButtons>

</dxGrid:GridControl>

特殊说明：如果直接使用绑定的文本则使用 Value关键字，绑定对象则可以直接使用Value.XXX

后端.cs代码绑定事件

void OnSwipeButtonShowing(object sender, DevExpress.Mobile.DataGrid.SwipeButtonShowingEventArgs e)

{

if ((!(Boolean)grid.GetCellValue(e.RowHandle, "Shipped"))

&& (e.ButtonInfo.ButtonName == "RightButton"))

{

e.IsVisible = false;

}

}

 

void OnSwipeButtonClick(object sender, DevExpress.Mobile.DataGrid.SwipeButtonEventArgs e)

{

if (e.ButtonInfo.ButtonName == "LeftButton")

{

string orderDate = (string)grid.GetCellValue(e.RowHandle, " Name");

string orderDateDay = orderDate;

DisplayAlert("Alert from " + e.ButtonInfo.ButtonName, "Day: " + orderDateDay, "OK");

}

if (e.ButtonInfo.ButtonName == "RightButton")

{

grid.DeleteRow(e.RowHandle);

}

}