如何在我的应用程序中放置/缩放XAML图形？

I'm working on a simple application to start learning my way around WPF. I created a vector graphic in Microsoft Expression Design at 400px by 400px, mainly because I thought it would be easier to create it on a bigger canvas.

我正在开发一个简单的应用程序,开始学习WPF的方法。我在400px到400px的Microsoft Expression Design中创建了一个矢量图形,主要是因为我认为在更大的画布上创建它会更容易。

I've exported the image to a XAML file as a series of objects within a 400px square canvas. All of the child objects are positioned based on that 400px canvas.

我已将图像作为400px方形画布中的一系列对象导出到XAML文件中。所有子对象都基于400px画布定位。

I would like to place the image in my application window, but scaled down to maybe 100px by 100px, but I don't know how to do this. As a vector image, the concept of easy scaling seems simple, but I'm missing something. Click-n-drag resizes the canvas, but not the elements inside. Internet searches have been less than useful thus far.

我想将图像放在我的应用程序窗口中,但缩小到100px×100px,但我不知道如何做到这一点。作为矢量图像,简单缩放的概念看起来很简单,但我遗漏了一些东西。 Click-n-drag调整画布的大小,但不调整其中的元素。到目前为止,互联网搜索一直不太有用。

I just want to place the image in my window... not in a button or anything special, and have easy control over its size. Do I need to copy all the XAML into my window's XAML? Can I reference the XAML file somehow instead? How can I make the elements of the image scale with the overall image? Any help would be appreciated.

我只是想把图像放在我的窗口中...不是按钮或任何特殊的东西,并且可以轻松控制它的大小。我是否需要将所有XAML复制到我的窗口的XAML中?我可以以某种方式引用XAML文件吗?如何使图像元素与整体图像一起缩放?任何帮助,将不胜感激。

3 个解决方案

#1

Copy and paste the XAML inside your tag

将XAML复制并粘贴到标签内

One option - After you paste it on to Expression blend , right click on the Canvas (Left side Element Tree) and Change Layout to Grid. And give 100*100 to the grid

一个选项 - 将其粘贴到Expression混合后,右键单击画布(左侧元素树)并将布局更改为网格。并给网格100 * 100

Second Option - Click on "Group Into" option and add ViewBox, and resize ViewBox.

第二个选项 - 单击“Group Into”选项并添加ViewBox,并调整ViewBox的大小。

#2

In order to maintain aspect ratio wrap a Viewbox with Viewbox.Stretch="Uniform" around your canvas/grid/whatever.

为了保持纵横比,使用Viewbox.Stretch =“Uniform”包围Viewbox.Stretch =“Uniform”。

#3

Blend UI can help a LOT with doing these sorts of transforms for WPF/Silverlight apps. The UI is a little confusing. Once you copy and paste the XAML into your or or you can click on that item on the left side of the screen. You will see the specific Item highlight in Yellow. Then you can do all sorts of scale, movement etc in either the Properties Panel OR using your mouse, just make sure you have the right cursor.

Blend UI可以帮助很多人为WPF / Silverlight应用程序进行这些变换。用户界面有点令人困惑。将XAML复制并粘贴到您的或之后,您可以单击屏幕左侧的该项目。您将看到黄色的特定项目突出显示。然后你可以在属性面板中或使用鼠标进行各种比例,移动等,只需确保你有正确的光标。

That's the trickiest part. Different mouse cursor have different effects depending on where you hover over the object. The smallish dark pointer with a Plus next to it is the Render Transform Cursor, it will let you Translate (move x/y), Scale, Rotate, and Skew.

那是最棘手的部分。根据您将鼠标悬停在对象上的位置,不同的鼠标光标会产生不同的效果。旁边有一个加号的小黑暗指针是渲染变换光标,它可以让你翻译(移动x / y),缩放,旋转和倾斜。

If you're working just in Visual Studio, you can add a RenderTransoform to your Image using the following code. This will give you all sorts of control. Just adjust any of the Transforms and you'll be on your way.

如果您只是在Visual Studio中工作,则可以使用以下代码将RenderTransoform添加到Image中。这将为您提供各种控制。只需调整任何变换,你就可以了。

        dot = new Image();
        BitmapImage dotSource = new BitmapImage();
        dotSource.BeginInit();
        string dotImageFile = String.Format("path/to/my/{0}.png", "image");
        dotSource.UriSource = new Uri(@dotImageFile, UriKind.Relative);
        dotSource.EndInit();
        dot.Stretch = Stretch.None;
        dot.Source = dotSource;
        dot.RenderTransformOrigin = new Point(0.5, 0.5);
        dotTransformGroup = new TransformGroup();
        dotScaleTransform = new ScaleTransform(scaleX, scaleX);
        dotSkewTransform = new SkewTransform();
        dotRotateTransform = new RotateTransform();
        dotTranslateTransform = new TranslateTransform();
        dotTransformGroup.Children.Add(dotScaleTransform);
        dotTransformGroup.Children.Add(dotSkewTransform);
        dotTransformGroup.Children.Add(dotRotateTransform);
        dotTransformGroup.Children.Add(dotTranslateTransform);
        dot.RenderTransform = dotTransformGroup;

#1