WPF 如何将 Viewbox 作为ImageSource使用呢?

WPF 如何将 Viewbox 作为ImageSource使用呢?

问题描述:


<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Width="16" Height="16">
    <Rectangle Width="16" Height="16">
        <Shape.Fill>
            <DrawingBrush>
                <DrawingBrush.Drawing>
                    <DrawingGroup>
                        <DrawingGroup.Children>
                            <GeometryDrawing Brush="#00FFFFFF" Geometry="F1 M16,16 L0,16 L0,0 L16,0" />
                            <GeometryDrawing Brush="#FFF6F6F6" Geometry="F1 M16,9 L16,10.196 L13.677,16 L2,16 C2,16 1.14,15.979 0.57,15.435 C0.227,15.103 0,14.617 0,14 L0,5 C0,3.697 1.005,3 2,3 L4.486,3 L3.607,2.121 L5.729,0 L10.246,4.518 L9.999,4.765 L10.116,5 L13,5 C13.97,5 15,5.701 15,7 L15,9" />
                            <GeometryDrawing Brush="#FFF73E07" Geometry="F1 M14,10.0313 L14,7.0313 C14,6.0313 12.764,6.0313 13,6.0313 L9.5,6.0313 L9.244,5.5193 L8.578,6.1863 L9,7.0313 L13,7.0313 L13,10.0313 L4,10.0313 L2,15.0313 L13,15.0313 L15,10.0313 M2,15.0153 L1.997,15.0153 C1.94,15.0153 1,15.0013 1,14.0313 L1,8.9593 C1.286,9.2523 1.626,9.4873 2,9.6663" />
                            <GeometryDrawing Brush="#FF00529C" Geometry="F1 M8.832,4.5176 L5.728,7.6216 L5.021,6.9136 L6.918,5.0176 L3.5,5.0176 C2.673,5.0176 2,5.6906 2,6.5176 C2,7.3446 2.673,8.0176 3.5,8.0176 L3.5,9.0176 C2.122,9.0176 1,7.8966 1,6.5176 C1,5.1396 2.122,4.0176 3.5,4.0176 L6.918,4.0176 L5.021,2.1216 L5.728,1.4136" />
                        </DrawingGroup.Children>
                    </DrawingGroup>
                </DrawingBrush.Drawing>
            </DrawingBrush>
        </Shape.Fill>
    </Rectangle>
</Viewbox>

img

在别的项目中发现有使用 ViewBox作为图标使用 但由于源码太复杂没看明白 所以就来论坛问问大家了

img

如图所示 初学者求个现成的使用方式 50大洋奉上 非常感谢

首先不建议这样做,更好的方法是CommandViewModel增加一个重载,参数不要ImageSource,直接传Viewbox(很疑惑Viewbox和Rectangle的大小都一致为什么要包一层Viewbox)或者改成Viewbox里面包的Rectangle,更好的是在CommanView.xaml里面写好Viewbox然后你传个Style给CommandViewModel,其次如果一定要这么做参考下面的方法。
主要思路:1.使用你项目中的OpenFile.xaml作为Style创建Viewbox的实例。 2.使用 RenderTargetBitmap(继承自 ImageSource) 来获取Viewbox实例的快照。

using System.IO;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Imaging;

namespace WpfApp1
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            // 这里演示获取当前form的快照,你可以换成你的OpenFile.xaml作为Style的Viewbox,只需要实例化一个你自己的Viewbox并且指定Style就可以了
            // 例如:
            // Viewbox vb = new Viewbox();
            // vb.Style = .....OpenFile.xaml....
            // ImageSource imgSource = GetBitmapSource(vb);
            ImageSource imgSource = GetBitmapSource(this);
            SaveBitmap((BitmapSource)imgSource, "111.png");
        }

        private void SaveBitmap(BitmapSource bs,string filePath) {
            using (FileStream fs = new FileStream(filePath, FileMode.Create)) {
                BitmapEncoder encoder = new PngBitmapEncoder();
                encoder.Frames.Add(BitmapFrame.Create(bs));
                encoder.Save(fs);
                fs.Close();
            }
        }

        public RenderTargetBitmap GetBitmapSource(FrameworkElement element)
        {
            RenderTargetBitmap rtb = new RenderTargetBitmap((int)element.ActualWidth, (int)element.ActualHeight, 96d, 96d, PixelFormats.Default);
            rtb.Render(element);
            return rtb;
        }
    }
}

下面是效果图:

img

如果发现截图位置不准等问题,请自行调整RenderTargetBitmap类的构造函数,看下重载找到适合自己程序的。

转什么转,别转,这个是矢量图,可以无线放大缩小,你转图片干啥。
先看看代码啥意思,你这就是在矩形里画图形,里面的四条线path才是关键。
好好学,好好看,学到手都是活。