用MVVM模式开发中遇到的零散问题总结(5)——将动态加载的可视
原文:
用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" 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",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),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,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,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);这句移到生成图片那一句的后面。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |