Опубликован: 01.11.2011 | Доступ: свободный | Студентов: 1425 / 63 | Оценка: 3.84 / 3.44 | Длительность: 15:38:00
Специальности: Программист
Практическая работа 5:

Трансформация и анимация в Silverlight с помощью XAML

< Практическая работа 4 || Практическая работа 5: 12 || Лекция 8 >
Аннотация: В ходе выполнения проекта планируется работа с векторной графикой. В частности, учащимся будут предложены примеры трансформации, вращения и масштабирования векторных объектов в Silverlight.

Дополнительные материалы к занятию можно скачать здесь.

WPF предоставляет дополнительные графические и анимационные возможности, которые были ранее доступны только из специализированных библиотек - в частности, Интерфейс графических устройств (GDI) Microsoft Windows и Microsoft Windows GDI+. WPF предлагает встроенную поддержку мультимедиа, векторной графики, анимации и композиции содержимого, упрощая разработчикам создание оригинального пользовательского интерфейса и содержимого. Используя Microsoft Visual Studio .NET или даже текстовый редактор, такой как Блокнот (Майкрософт), можно создать векторную графику или сложную анимацию и интегрировать мультимедиа в приложения.

Новые графические и мультимедийные возможности в WPF

WPF знакомит разработчиков Windows с новыми графическими функциями, которые имеют следующие преимущества:

  • Разрешение и аппаратно-независимая графика. Графическая система WPF использует аппаратно-независимые модули для поддержки разрешения и независимости от устройства. Каждый независимая от устройства точка автоматически масштабируется в соответствии с параметрами системы (в точках на дюйм).
  • Повышенная точность. Система координат WPF использует doubles вместо floats. WPF также поддерживает широкую цветовую гамму (scRGB) и предоставляет встроенную поддержку для управления входными данными из другого цветового пространства.
  • Дополнительная поддержка графики и анимации. WPF упрощает программирование графики с помощью управления графом сцены; больше не нужно беспокоиться об обработке сцены, циклах отрисовки и билинейной интерполяции. WPF предоставляет поддержку проверки нажатия, встроенную систему анимации и полную поддержку альфа-компоновки.
  • Аппаратное ускорение. Графическая система WPF разработана для использования преимуществ графического оборудования и минимизировать загрузку процессора.

Упражнение 12.1. Рисуем треугольник

Создаем проект practice_5_1.

В окне MainPage.xaml наберите следующий код:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid x:Name="LayoutRoot">
        <Viewport3D Height="300" Width="300" >
            <Viewport3D.Camera>
                <PerspectiveCamera Position="4 0.5 0.5" LookDirection="-3.5 0 0" />
            </Viewport3D.Camera>
            <ModelVisual3D>
                <ModelVisual3D.Content>
                    <DirectionalLight Direction="-3.5 0 0" />
                </ModelVisual3D.Content>
            </ModelVisual3D>
            <ModelVisual3D>
                <ModelVisual3D.Content>
                    <GeometryModel3D>
                        <GeometryModel3D.Geometry>
                            <MeshGeometry3D
                                Positions="1 0 0  1 1 0  1 0 1 "
                                TriangleIndices="0 1 2"/>
                        </GeometryModel3D.Geometry>
                        <GeometryModel3D.Material>
                            <DiffuseMaterial>
                                <DiffuseMaterial.Brush>
                                    <SolidColorBrush Color="BlueViolet" />
                                </DiffuseMaterial.Brush>
                            </DiffuseMaterial>
                        </GeometryModel3D.Material>
                    </GeometryModel3D>
                </ModelVisual3D.Content>
            </ModelVisual3D>
        </Viewport3D>
    </Grid>
</Window>
    

Перейдите в окно MainPage.xaml.cs и документрируем строчку InitializeComponent();:

Получаем следующий результат:


Упражнение 12.2. Рисуем треугольник в коде (Чарльз Петзольд)

Для начала нужно создать пустой проект C#:

В свойствах проекта в пункте "Тип выходных данных" выберите "Приложение Windows".


Добавьте к проекту элемент "Файл с текстом программы".

К ссылкам проекта добавьте PresentationCore, PresentationFramework, System, System.Xaml и WindowsBase:


В окно кода добавьте следующую программу:

// Simple3DSceneInCode.cs (c) 2007 by Charles Petzold
//----------------------------------------------------
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Media;
using System.Windows.Media.Media3D;

namespace Petzold.Simple3DSceneInCode
{
    public class Simple3DSceneInCode : Window
    {
        PerspectiveCamera cam;

        [STAThread]
        public static void Main()
        {
            Application app = new Application();
            app.Run(new Simple3DSceneInCode());
        }

        public Simple3DSceneInCode()
        {
            Title = "Simple 3D Scene in Code";

            // Создаем контент док-панели окна
            DockPanel dock = new DockPanel();
            Content = dock;

            // Создаем скролл-бар для движения камеры
            ScrollBar scroll = new ScrollBar();
            scroll.Orientation = Orientation.Horizontal;
            scroll.Value = -2;
            scroll.Minimum = -2;
            scroll.Maximum = 2;
            scroll.ValueChanged += ScrollBarOnValueChanged;
            dock.Children.Add(scroll);
            DockPanel.SetDock(scroll, Dock.Bottom);

            // Создаем Viewport3D для трехмерной сцена
            Viewport3D viewport = new Viewport3D();
            dock.Children.Add(viewport);

            // Задаем MeshGeometry3D.
            MeshGeometry3D mesh = new MeshGeometry3D();
            mesh.Positions.Add(new Point3D(0, 0, 0));
            mesh.Positions.Add(new Point3D(0, 1, -1));
            mesh.Positions.Add(new Point3D(0, 0, -2));
            mesh.TriangleIndices = new Int32Collection(new int[] { 0, 1, 2 });

            // Задаем GeometryModel3D.
            GeometryModel3D geomod = new GeometryModel3D();
            geomod.Geometry = mesh;
            geomod.Material = new DiffuseMaterial(Brushes.Blue);
            geomod.BackMaterial = new DiffuseMaterial(Brushes.Red);
            // Создаем ModelVisual3D для GeometryModel3D.
            ModelVisual3D modvis = new ModelVisual3D();
            modvis.Content = geomod;
            viewport.Children.Add(modvis);

            // Создаем другую ModelVisual3D для света
            modvis = new ModelVisual3D();
            modvis.Content = new AmbientLight(Colors.White);
            viewport.Children.Add(modvis);

            // Создаем камеру
            cam = new PerspectiveCamera(new Point3D(-2, 0, 5),
                            new Vector3D(0, 0, -1), new Vector3D(0, 1, 0), 45);
            viewport.Camera = cam;
        }
        void ScrollBarOnValueChanged(object sender,
                            RoutedPropertyChangedEventArgs<double> args)
        {
            cam.Position = new Point3D(args.NewValue, 0, 5);
        }
    }
}
    
Листинг .

Получаем следующий результат:

Упражнение 12.3. Рисование двух треугольников

Создаем проект practice_5_3.

В окне MainPage.xaml наберите следующий код:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      WindowTitle="Два треугольника образуют квадрат"
      Title="Два треугольника">
    <Viewport3D>
        <ModelVisual3D>
            <ModelVisual3D.Content>
                <Model3DGroup>
                    <GeometryModel3D>
                        <GeometryModel3D.Geometry>

                            <MeshGeometry3D
                                 Positions="0 1  0, 0 0  0, 1 1  0, 1 0  0"
                                 TriangleIndices="0  1  2,  1  3  2" />
                        </GeometryModel3D.Geometry>

                        <GeometryModel3D.Material>
                            <DiffuseMaterial Brush="Blue" />
                        </GeometryModel3D.Material>

                        <GeometryModel3D.BackMaterial>
                            <DiffuseMaterial Brush="Red" />
                        </GeometryModel3D.BackMaterial>

                    </GeometryModel3D>

                    <!-- Источники света -->
                    <AmbientLight Color="#404040" />
                    <DirectionalLight Color="#C0C0C0" Direction="0 0 -3.5" />

                </Model3DGroup>
            </ModelVisual3D.Content>
        </ModelVisual3D>

        <!-- Камера -->
        <Viewport3D.Camera>
            <PerspectiveCamera Position="0.5 0.5 4"
                               LookDirection="0 0 -3.5"
                               UpDirection="1 0 0"
                               FieldOfView="60" />
        </Viewport3D.Camera>
    </Viewport3D>
</Page>
    
Листинг .

Перейдите в окно MainPage.xaml.cs и документрируем строчку InitializeComponent();:

Получаем следующий результат:

< Практическая работа 4 || Практическая работа 5: 12 || Лекция 8 >