用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);这句移到生成图片那一句的后面。
