How do I place/scale a XAML graphic in my application?

Question

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.

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.

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.

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.

Answer 1

Copy and paste the XAML inside your tag

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

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

Answer 2

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.

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.

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.

        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;

Answer 3

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