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中数据如下：
在设计器中预览效果如下：
