用MVVM模式开发中遇到的零散问题总结（5）——将动态加载的可视元素保存为图片的控件，Binding刷新的时机

　　在项目开发中经常会遇到这样一种情况，就是需要将用户填写的信息排版到一张表单中，供打印或存档。这里就以保存为图片为例，比如我需要实现下面的功能：

将图片

根据用户信息保存为


总体思路

　　1.建个UserControl将背景设置为表单图片。

　　2.在姓名的位置添加Textblock控件，将Text绑定到Name属性上。

　　3.动态加载UserControl，再将整个UserControl可视树转化为一张图片，保存。

实现过程

　　关于怎么设置背景，和布局Textblock我就不多说了，相信大家都会。要注意的是，因为之后我要用XamlReader.Load()来动态加载XAML所以UserControl要把X:Class="xxx"这段给删了。

　　接下来直接看代码，基本每句都写了注释

需要生成图片的XAML：

<Grid >
<Image Source="pack://siteoforigin:,,,/view/Print/Images/XXX.jpg" />
<TextBlock Height="88" HorizontalAlignment="Left" Margin="928,1624,0,0" Text="{Binding Name}" VerticalAlignment="Top" Width="240" FontSize="64" />
</Grid>

控件代码：

/// <summary>
/// 设置需要生成的Xaml的地址
/// </summary>
public string XamlUrl
{
get { return (string)GetValue(XamlUrlProperty); }
set { SetValue(XamlUrlProperty, value); }
}
public static readonly DependencyProperty XamlUrlProperty =
DependencyProperty.Register("XamlUrl", typeof(string), typeof(CopXaml2Bmp), null);

/// <summary>
/// 生成的图片地址
/// </summary>
public string BmpUrl
{
get { return (string)GetValue(BmpUrlProperty); }
set { SetValue(BmpUrlProperty, value); }
}
public static readonly DependencyProperty BmpUrlProperty =
DependencyProperty.Register("BmpUrl", typeof(string), typeof(CopXaml2Bmp),null);

/// <summary>
/// 设置dpi
/// </summary>
public int Dpi
{
get { return (int)GetValue(DpiProperty); }
set { SetValue(DpiProperty, value); }
}
public static readonly DependencyProperty DpiProperty =
DependencyProperty.Register("Dpi", typeof(int), typeof(CopXaml2Bmp), null);

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
try
{
FileStream fs = new FileStream(XamlUrl, FileMode.Open, FileAccess.Read);//动态加载XAML
ContentControl myGrid = XamlReader.Load(fs) as ContentControl;
//myGrid.DataContext = this.DataContext;//设置datacontext
double width = (this.Parent as Grid).Width;//获取母容器的高宽
double height = (this.Parent as Grid).Height;

myGrid.Loaded += new RoutedEventHandler((sender1, e1) =>
{
(this.Parent as Grid).Children.Remove(myGrid);//从母容器中移除该内容

var size = new Size(myGrid.Width, myGrid.Height);
myGrid.Measure(size);//二次布局,因为只是在内存中没有显示在UI上，需要经过布局才有内容
myGrid.Arrange(new Rect(new Point(0, 0), size));

System.IO.FileStream fs1 = new System.IO.FileStream(BmpUrl, System.IO.FileMode.Create);//创建一个文件流来存图片
RenderTargetBitmap bmp = new RenderTargetBitmap((int)myGrid.Width, (int)myGrid.Height, Dpi, Dpi, PixelFormats.Default);//visual对象转位图
bmp.Render(myGrid);//呈现visual
BitmapEncoder encoder = new TiffBitmapEncoder();//编码为图像流
encoder.Frames.Add(BitmapFrame.Create(bmp));//添加帧
encoder.Save(fs1);//保存文件
fs1.Close();

(this.Parent as Grid).Width = width;//大小还原
(this.Parent as Grid).Height = height;
});
(this.Parent as Grid).Width = myGrid.Width;//将母容器的高宽设置为需要的大小
(this.Parent as Grid).Height = myGrid.Height;
(this.Parent as Grid).Children.Add(myGrid);//添加进母容器让其暂时显示，以显示绑定的信息

}
catch
{

}
}

使用控件代码（其父容器的datacontext中含有Name属性）：

<Assistant:Xaml2Bmp XamlUrl="view/Print/XXX.xaml" BmpUrl="d:/test.bmp" Dpi="96" HorizontalAlignment="Right" Height="100" Margin="0,0,204,44" VerticalAlignment="Bottom" Width="100"/>

这样就将动态加载的XAML生成了d:/test.bmp图片。

　　说实话，实现这个功能没什么难的，写这篇博客的目的在于，做这个控件时让我了解到了一个Binding刷新的问题。

　　通过XamlReader.Load()加载的XAML对其设置datacontext，对应的Textblock.Text的内容为"",而不是绑定的内容。而当元素在UI上显示时，才会刷新数据绑定，从而让Textblock.Text的内容为绑定到的datacontext对应的节点上。

　　所以上面的代码中，我把动态加载的XAML添加进了控件的父容器中，让其刷新绑定，并在其加载完成后从父容器中移除该控件，对于用户来说是什么都看不到的，然后将其转换为图片。父容器的大小也要能够容纳整个控件才行，生成的图片显示的只有父容器的范围部分。

更新：实践证明如果需要生成的元素里面包含自定义style的时候，需要在元素还在界面上显示时进行打印，一旦从UI上Remove了该元素后貌似就会把自定义style释放掉，生成的图片有关自定义控件的地方就为空白，也就是说WPF程序当元素在UI上显示时才会加载样式，一旦从UI上移除就卸载掉，以提高性能。所以上面的代码需要把(this.Parent as Grid).Children.Remove(myGrid);这句移到生成图片那一句的后面。