1.描述
在CellTypeDesigner类中有一个GetDrawingControl的虚拟方法,它会返回预览绘图控件。
2.添加预览
下面的三个示例是用这个方法来预览单元格类型插件。
预览控制
示例为按钮组单元格类型。
查看完整代码请参见:https://gitee.com/huozige-china/button-group-cell-type。
[Designer("ButtonGroupCellType.ButtonGroupCellTypeDesigner,ButtonGroupCellType")] public class ButtonGroupCellType : CellType { public ButtonGroupCellType() { AddButtonText = "Add"; DeleteButtonText = "Delete"; } public List<Command> AddButtonCommandList { get; set; } public List<Command> DeleteButtonCommandList { get; set; } public string AddButtonText { get; set; } public string DeleteButtonText { get; set; } } public class ButtonGroupCellTypeDesigner : CellTypeDesigner<ButtonGroupCellType> { public override FrameworkElement GetDrawingControl(ICellInfo cellInfo, IDrawingHelper drawingHelper) { Button addButton = new Button() { Content = this.CellType.AddButtonText }; Button deleteButton = new Button() { Content = this.CellType.DeleteButtonText, Margin = new Thickness(5, 0, 0, 0) }; Grid container = new Grid(); container.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) }); container.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) }); container.Children.Add(addButton); Grid.SetColumn(addButton, 0); container.Children.Add(deleteButton); Grid.SetColumn(deleteButton, 1); addButton.Foreground = drawingHelper.GetBrush(cellInfo.ForegroundStr)?? Brushes.White; addButton.FontSize = cellInfo.FontSize; addButton.Background = drawingHelper.GetBrush(cellInfo.BackgroundStr) ?? Brushes.Green; addButton.BorderBrush = drawingHelper.GetBrush(cellInfo.ForegroundStr) ?? Brushes.Green; deleteButton.Foreground = drawingHelper.GetBrush(cellInfo.ForegroundStr) ?? Brushes.Green; deleteButton.FontSize = cellInfo.FontSize; deleteButton.Background = drawingHelper.GetBrush(cellInfo.BackgroundStr) ?? Brushes.White; deleteButton.BorderBrush = drawingHelper.GetBrush(cellInfo.ForegroundStr) ?? Brushes.Green; deleteButton.BorderThickness = new Thickness(2); return container; } }
默认样式如下:
改变背景颜色为红色,预览效果如下:
改变背景颜色和文字颜色,预览效果如下:
预览图片
静态图片预览:示例图片在工程中的位置如图所示。
查看完整代码请参见:https://gitee.com/huozige-china/static-image-preview-cell-type。
在这个示例中,StaticImagePreviewCellType定义如下:
namespace StaticImagePreviewCellType { [Designer("StaticImagePreviewCellType.StaticImagePreviewCellTypeDesigner,StaticImagePreviewCellType")] public class StaticImagePreviewCellType : CellType, IReferencePage { public string PageName { get; set; } public IEnumerable<LocatedObject<string>> GetPageNames(LocationIndicator location) { if (!string.IsNullOrEmpty(this.PageName)) { yield return new LocatedObject<string>(this.PageName, location.AppendProperty("PageName")); } } public void RenamePageName(string oldName, string newName) { if (this.PageName == oldName) { this.PageName = newName; } } } public class StaticImagePreviewCellTypeDesigner : CellTypeDesigner<StaticImagePreviewCellType> { public override FrameworkElement GetDrawingControl(ICellInfo cellInfo, IDrawingHelper drawingHelper) { Grid container = new Grid(); Image image = new Image(); image.Source = new BitmapImage(new Uri("pack://application:,,,/StaticImagePreviewCellType;component/Resources/Preview.png", UriKind.RelativeOrAbsolute)); //the image uri image.Stretch = System.Windows.Media.Stretch.Uniform; image.VerticalAlignment = VerticalAlignment.Center; image.HorizontalAlignment = HorizontalAlignment.Center; container.Children.Add(image); return container; } } }
注意,在图片属性中,“生成操作”需要改为“Resource”。
预览如下:
动态图片预览:图片在设计器中上传。
查看完整代码请参见:https://gitee.com/huozige-china/my-image-cell-type。
在这个示例中,MyImageCellType定义如下:
namespace MyImageCellType { [Designer("MyImageCellType.MyImageCellTypeDesigner,MyImageCellType")] public class MyImageCellType : CellType { public ImageValue ImageInfo { get; set; } } internal class MyImageCellTypeDesigner : CellTypeDesigner<MyImageCellType> { public override FrameworkElement GetDrawingControl(ICellInfo cellInfo, IDrawingHelper drawingHelper) { Grid container = new Grid(); if (this.CellType.ImageInfo != null) { //uploaded image in ImageSelectorEditor var imagePath = Path.Combine(drawingHelper.ForguncyImageEditorFolderPath, this.CellType.ImageInfo.Name); if (this.CellType.ImageInfo.BuiltIn) { //builtin image in ImageSelectorEditor imagePath = Path.Combine(drawingHelper.ForguncyBuiltInImagesFolderPath, this.CellType.ImageInfo.Name); } Image image = new Image(); try { image.Source = new BitmapImage(new Uri(imagePath, UriKind.RelativeOrAbsolute)); } catch (Exception) { //不支持预览svg格式的图片 } image.Stretch = System.Windows.Media.Stretch.Uniform; image.VerticalAlignment = VerticalAlignment.Center; image.HorizontalAlignment = HorizontalAlignment.Center; container.Children.Add(image); } return container; } } }
单击“选择图片”,上传一个图片,图片不能是svg格式,预览如下:
预览表格数据
下面是MyListViewCellType的示例,DrawingHelper类中有一个方法GetTableDataForPreview,可返回数据表中的数据,最大支持行数为50。
查看完整代码请参见:https://gitee.com/huozige-china/my-list-view-cell-type。
namespace MyListViewCellType { [Designer("MyListViewCellType.MyListViewCellTypeDesigner,MyListViewCellType")] public class MyListViewCellType : CellType { public string TableName { get; set; } public string TextColumn { get; set; } } public class MyListViewCellTypeDesigner : CellTypeDesigner<MyListViewCellType> { public override EditorSetting GetEditorSetting(PropertyDescriptor property, IBuilderContext builderContext) { if (property.Name == "TableName") { return new TableComboTreeSelectorEditorSetting(); } if (property.Name == "TextColumn") { var columns = builderContext.EnumAllTableInfos().FirstOrDefault(t => t.TableName == this.CellType.TableName)?.Columns?.Select(c => c.ColumnName); return new ComboEditorSetting(columns); } if (property.Name == "ValueColumn") { var columns = builderContext.EnumAllTableInfos().FirstOrDefault(t => t.TableName == this.CellType.TableName)?.Columns?.Select(c => c.ColumnName); return new ComboEditorSetting(columns); } return base.GetEditorSetting(property, builderContext); } public override FrameworkElement GetDrawingControl(ICellInfo cellInfo, IDrawingHelper drawingHelper) { ListBox listBox = new ListBox(); //get table data for preview. var tableData = drawingHelper.GetTableDataForPreview(this.CellType.TableName, new List<string>() { this.CellType.TextColumn }, null, true); if (tableData != null) { foreach (var row in tableData) { var value = row[this.CellType.TextColumn]; if (value != null) { ListBoxItem item = new ListBoxItem() { Content = value }; listBox.Items.Add(item); } } } Grid container = new Grid(); container.Children.Add(listBox); return container; } } }
表1中数据如下:
在设计器中预览效果如下: