Как разместить / масштабировать графику XAML в моем приложении?

Question

Я работаю над простым приложением, чтобы начать изучать WPF. Я создал векторную графику в Microsoft Expression Design с разрешением 400 на 400 пикселей, главным образом потому, что думал, что будет проще создать ее на большом холсте.

Я экспортировал изображение в XAML-файл в виде серии объектов на квадратном холсте размером 400 пикселей. Все дочерние объекты размещаются на основе этого холста 400 пикселей.

Я хотел бы поместить изображение в окно своего приложения, но уменьшенное до, возможно, 100px на 100px, но я не знаю, как это сделать. Как векторное изображение, концепция простого масштабирования кажется простой, но я что-то упустил. Click-n-drag изменяет размер холста, но не элементов внутри. Поиски в Интернете пока были менее чем полезны.

Я просто хочу разместить изображение в моем окне ... а не в кнопке или чем-то особенном, и иметь легкий контроль над его размером. Нужно ли мне копировать весь XAML в XAML моего окна? Могу ли я вместо этого ссылаться на файл XAML? Как сделать так, чтобы элементы изображения масштабировались вместе с общим изображением? Любая помощь будет оценена.

Answer 1

Скопируйте и вставьте XAML в ваш тег

Один вариант - после того, как вы вставите его в смесь Expression, щелкните правой кнопкой мыши на Canvas (левое дерево элементов) и выберите Layout Layout. И отдать 100 * 100 в сетку

Второй вариант - нажмите «Группировать в», добавьте ViewBox и измените размер ViewBox.

Answer 2

Чтобы сохранить соотношение сторон, оберните Viewbox с Viewbox.Stretch = "Uniform" вокруг вашего холста / сетки / что угодно.

Answer 3

Пользовательский интерфейс Blend может помочь многим в выполнении таких преобразований для приложений WPF / Silverlight. Пользовательский интерфейс немного сбивает с толку. После того, как вы скопируете и вставите XAML в свой или, или вы можете нажать на этот элемент в левой части экрана. Вы увидите выделение конкретного предмета желтым цветом. Затем вы можете делать все виды масштабирования, перемещения и т. Д. На панели свойств или с помощью мыши, просто убедитесь, что у вас есть правильный курсор.

Это самая сложная часть. Различные курсоры мыши имеют разные эффекты в зависимости от того, где вы наводите курсор на объект. Маленький темный указатель с плюсом рядом с ним - курсор рендеринга преобразования, он позволит вам перевести (переместить х / у), масштабировать, повернуть и наклонить.

Если вы работаете только в Visual Studio, вы можете добавить RenderTransoform к своему изображению, используя следующий код. Это даст вам все виды контроля. Просто настройте любое из преобразований, и вы уже в пути.

        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;