Графика в WPF

Двумерная графика в WPF

Вся двумерная графика WPF реализуется классами, производными от абстрактных классов Drawing и Shape. Классы, наследующие Drawing, являются более простыми конструкциями, чем классы, произведенные от Shape, и поэтому требуют меньших системных ресурсов.

Абстрактный класс Drawing находится в пространстве имен System.Windows.Media.Drawing и содержит общее описание того, что должно быть нарисовано: фигура, точечный рисунок, строка текста или видео. Производные от него классы описывают конкретные типы содержимого:

Все эти производные классы являются запечатанными ( sealed ) и не могут продолжать цепочку наследования.

Нужно понимать, что перечисленные объекты содержат только описание того, что нужно нарисовать. Но чтобы воспроизвести содержимое любого из них, нужно передать этот объект в конструктор экземпляра класса-контейнера DrawingImage, а сам контейнер присоединить к свойству Source объекта-представления Image.

Упражнение 1. Применение объекта GeometryDrawing для построения графиков

Объект GeometryDrawing позволяет создать фигуру с заливкой и контуром путем совместного использования объектов Geometry, Pen и Brush, адресуемых его одноименными свойствами-ссылками, где

Свойство-ссылка типа Geometry адресует экземпляр одного из классов, производных от абстрактного класса Geometry. Таковыми являются следующие запечатанные ( sealed ) классы:

Класс GeometryGroup может накапливать описание геометрических примитивов своих родственников за счет свойства-коллекции Children типа GeometryCollection, а затем передавать их как единый составной объект свойству-ссылке Geometry объекта GeometryDrawing. В дополнение к такому описанию геометрии объект GeometryDrawing добавляет свое описание свойств Pen и Brush. Затем можно передать все это содержимое в коллекцию DrawingGroup как очередной готовый слой для последующего отображения. Такой механизм определяет векторную (в отличие от точечной) графику, которую можно произвольно масштабировать без потери качества рисунка на устройстве отображения с любым разрешением.

Продемонстрируем применение описанного на примере построения графиков (см. по ссылке http://vitiy.info/?p=5). Построим два графика: sin() и cos() для одного периода.

Создайте новое решение WpfGraphics с новым проектом WpfApp1 типа WPF Application

Заполните декларативную часть Window1.xaml проекта следующей разметкой

<Window x:Class="WpfApp1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid Margin="20">
        <Image Name="image1" />
    </Grid>
</Window>

Реализуйте бизнес-логику окна в застраничном файле Window1.xaml.cs с помощью следующего кода

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
    
using System.Globalization;
    
namespace WpfApp1
{
    public partial class Window1 : Window
    {
        //
        // Поля
        //
        const int countDot = 30;// Количество отрезков
        // Список для хранения данных
        List<double[]> dataList = new List<double[]>();
        // Или можно DoubleCollection data = new DoubleCollection();
        // Контейнер слоев рисунков
        DrawingGroup drawingGroup = new DrawingGroup();
    
        public Window1()
        {
            InitializeComponent();
    
            DataFill();// Заполнение списка данными
            Execute(); // Заполнение слоев
    
            // Отображение на экране
            image1.Source = new DrawingImage(drawingGroup);
        }
    
        // Генерация точек графиков
        void DataFill()
        {
            double[] sin = new double[countDot + 1];
            double[] cos = new double[countDot + 1];
    
            for (int i = 0; i < sin.Length; i++)
            {
                double angle = Math.PI * 2 / countDot * i;
                sin[i] = Math.Sin(angle);
                cos[i] = Math.Cos(angle);
            }
    
            dataList.Add(sin);
            dataList.Add(cos);
        }
    
        // Послойное формирование рисунка в Z-последовательности
        void Execute()
        {
            BackgroundFun();    // Фон
            GridFun();          // Мелкая сетка
            SinFun();           // Строим синус линией
            CosFun();           // Строим косинус точками
            MarkerFun();        // Надписи
        }
    
        // Фон
        private void BackgroundFun()
        {
            // Создаем объект для описания геометрической фигуры
            GeometryDrawing geometryDrawing = new GeometryDrawing();
    
            // Описываем и сохраняем геометрию квадрата
            RectangleGeometry rectGeometry = new RectangleGeometry();
            rectGeometry.Rect = new Rect(0, 0, 1, 1);
            geometryDrawing.Geometry = rectGeometry;
    
            // Настраиваем перо и кисть
            geometryDrawing.Pen = new Pen(Brushes.Red, 0.005);// Перо рамки
            geometryDrawing.Brush = Brushes.Beige;// Кисть закраски
    
            // Добавляем готовый слой в контейнер отображения
            drawingGroup.Children.Add(geometryDrawing);
        }
    
        // Горизонтальная сетка
        private void GridFun()
        {
            // Создаем коллекцию для описания геометрических фигур
            GeometryGroup geometryGroup = new GeometryGroup();
    
            // Создаем и добавляем в коллекцию десять параллельных линий 
            for (int i = 1; i < 10; i++)
            {
                LineGeometry line = new LineGeometry(new Point(1.0, i * 0.1), 
                    new Point(-0.1, i * 0.1));
                geometryGroup.Children.Add(line);
            }
    
            // Сохраняем описание геометрии
            GeometryDrawing geometryDrawing = new GeometryDrawing();
            geometryDrawing.Geometry = geometryGroup;
    
            // Настраиваем перо
            geometryDrawing.Pen = new Pen(Brushes.Gray, 0.003);
            double[] dashes = { 1, 1, 1, 1, 1 };// Образец штриха
            geometryDrawing.Pen.DashStyle = new DashStyle(dashes, -.1);
    
            // Настраиваем кисть 
            geometryDrawing.Brush = Brushes.Beige;
    
            // Добавляем готовый слой в контейнер отображения
            drawingGroup.Children.Add(geometryDrawing);
        }
    
        // Строим синус линией
        private void SinFun()
        {
            // Строим описание синусоиды
            GeometryGroup geometryGroup = new GeometryGroup();
            for (int i = 0; i < dataList[0].Length - 1; i++)
            {
                LineGeometry line = new LineGeometry(
                    new Point((double)i / (double)countDot, 
                        .5 - (dataList[0][i] / 2.0)),
                    new Point((double)(i + 1) / (double)countDot, 
                        .5 - (dataList[0][i + 1] / 2.0)));
                geometryGroup.Children.Add(line);
            }
    
            // Сохраняем описание геометрии
            GeometryDrawing geometryDrawing = new GeometryDrawing();
            geometryDrawing.Geometry = geometryGroup;
    
            // Настраиваем перо
            geometryDrawing.Pen = new Pen(Brushes.Blue, 0.005);
    
            // Добавляем готовый слой в контейнер отображения
            drawingGroup.Children.Add(geometryDrawing);
        }
    
        // Строим косинус точками
        private void CosFun()
        {
            // Строим описание косинусоиды
            GeometryGroup geometryGroup = new GeometryGroup();
            for (int i = 0; i < dataList[1].Length; i++)
            {
                EllipseGeometry ellips = new EllipseGeometry(
                    new Point((double)i / (double)countDot, 
                    .5 - (dataList[1][i] / 2.0)), 0.01, 0.01);
                geometryGroup.Children.Add(ellips);
            }
    
            // Сохраняем описание геометрии
            GeometryDrawing geometryDrawing = new GeometryDrawing();
            geometryDrawing.Geometry = geometryGroup;
    
            // Настраиваем перо
            geometryDrawing.Pen = new Pen(Brushes.Green, 0.005);
    
            // Добавляем готовый слой в контейнер отображения
            drawingGroup.Children.Add(geometryDrawing);
        }
        
        // Надписи
        private void MarkerFun()
        {
            GeometryGroup geometryGroup = new GeometryGroup();
            for (int i = 0; i <= 10; i++)
            {
                FormattedText formattedText = new FormattedText(
                String.Format("{0,7:F}", 1 - i * 0.2),
                CultureInfo.InvariantCulture,
                FlowDirection.LeftToRight,
                new Typeface("Verdana"),
                0.05,
                Brushes.Black);
    
                formattedText.SetFontWeight(FontWeights.Bold);
    
                Geometry geometry = formattedText.BuildGeometry(new Point(-0.2, i * 0.1 - 0.03));
                geometryGroup.Children.Add(geometry);
            }
    
            GeometryDrawing geometryDrawing = new GeometryDrawing();
            geometryDrawing.Geometry = geometryGroup;
    
            geometryDrawing.Brush = Brushes.LightGray;
            geometryDrawing.Pen = new Pen(Brushes.Gray, 0.003);
    
            drawingGroup.Children.Add(geometryDrawing);
        }
    }
}

Разберитесь с кодом и запустите приложение - результат будет таким

Поизменяйте размер окна - рисунок автоматически масштабируется с сохранением качества отображения

Упражнение 2. Имитация полноэкранного режима с отключением системных клавиш

Иногда может потребоваться перевести монитор в полноэкранный режим, чтобы получить стиль игровых программ или старого доброго DOS. Обычно в таком случае отключают и курсор, а все управление программой перекладывают на клавиатуру. Из существующих вариантов переключения в полноэкранный режим наиболее простой, это настроить окно window так:

window.WindowStyle = WindowStyle.None;
window.ResizeMode = ResizeMode.NoResize;

Но такой способ не убирает панель задач и не блокирует появление меню Пуск, которое также включает панель задач.

Есть более сложный способ, приведенный в "http://www.swart.ws/2009/03/kiosk-full-screen-wpf-applications.html", но он имеет те же недостатки.

Для достижения полной иллюзии режима FullScreen следует отключить системные клавиши, вызывающие панель задач и меню Пуск, и самый эффективный (на мой взгляд) способ приведен в "http://www.sql.ru/Forum/actualthread.aspx?tid=632552", которым мы и воспользуемся в данном упражнении.

Из приведенного в статье http://support.microsoft.com/kb/126449/ru сочетания клавиш мы воспользуемся только следующими вариантами:

Этого будет достаточно, чтобы поддерживать полноэкранный режим и одновременно не блокировать остальную функциональность клавиатуры.

Добавьте к решению командой File/Add/New Project новый проект с именем FullScreen и назначьте его стартовым

В панели Solution Explorer добавьте к корню проекта FullScreen новую папку Images командой контекстного меню Add/New Folder

В панели Solution Explorer командой Add/Existing Item контекстного меню для папки Images скопируйте в нее файл flower2.jpg из прилагаемого каталога Source

Определите в интерфейсной части окна следующий код

<Window x:Class="FullScreen.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300"
    Background="Green"
    Loaded="Window_Loaded"
    KeyDown="Window_KeyDown"
    KeyUp="Window_KeyDown"
        >
    <Window.ContextMenu>
        <ContextMenu>
            <MenuItem Name="changeScreen" Click="MenuItem_Click" />
        </ContextMenu>
    </Window.ContextMenu>
    <DockPanel>
        <Menu Name="menu" DockPanel.Dock="Top">
            <MenuItem Header="File">
                <MenuItem Header="Open" />
                <MenuItem Header="Save" />
                <MenuItem Header="SaveAs" />
                <MenuItem Header="Exit" />
            </MenuItem>
            <MenuItem Header="Edit">
                <MenuItem Header="Cut" />
                <MenuItem Header="Copy" />
                <MenuItem Header="Paste" />
            </MenuItem>
        </Menu>
        <Image Source="Images/flower2.jpg" Stretch="Uniform" /> 
    </DockPanel>
</Window>

Для настройки окна и его элементов мы применили синтаксис атрибута, а для создания каркаса контекстного меню - синтаксис тега свойства ( свойства зависимости, присоединенные свойства ). Атрибут Stretch элемента Image может принимать следующие значения:

Теперь необходимо создать обработчики для событий, выделеных в листинке, в файле присоединенного кода Window1.xaml.cs. Для этого:

Найдите в разметке файла Window1.xaml атрибуты событий

Loaded="Window_Loaded"

KeyDown="Window_KeyDown"

KeyUp="Window_KeyDown"

Click="MenuItem_Click"

В любом месте каждого из этих атрибутов щелкните правой кнопкой мыши и выполните команду Navigate to Event Handler.

Оболочка создаст обработчики с указанными именами, а если обработчик уже существует, то перейдет к нему.

Заполните файл поддержки разметки Window1.xaml.cs следующим кодом

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
    
namespace FullScreen
{
    public partial class Window1 : Window
    {
        // Объявляем как поля для видимости в функциях
        bool fullScreen = false;// Состояние экрана
        WindowStyle windowStyle;
        WindowState windowState;
        ResizeMode resizeMode;
    
        public Window1()
        {
            InitializeComponent();
        }
    
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            // Запоминаем начальные параметры окна
            windowState = this.WindowState;
            windowStyle = this.WindowStyle;
            resizeMode = System.Windows.ResizeMode.CanResizeWithGrip;
            this.ResizeMode = resizeMode;
            changeScreen.Header = "FullScreen";
        }
    
        private void MenuItem_Click(object sender, RoutedEventArgs e)
        {
            FullScreen();
        }
    
        private void FullScreen()
        {
            if (!fullScreen)// Переходим в полноэкранный режим 
            {
                if (this.WindowState == WindowState.Maximized)
                {
                    // Чтобы скрыть панель задач и не было мерцания
                    this.Hide();
                    this.WindowState = WindowState.Normal;
                }
    
                App.Current.MainWindow.WindowStyle = WindowStyle.None;// Без заголовка
                App.Current.MainWindow.Topmost = true;      // На передний план
                App.Current.MainWindow.WindowState = WindowState.Maximized;// Развернуть
                App.Current.MainWindow.ResizeMode = ResizeMode.NoResize;// Неизменяемое
    
                menu.Visibility = Visibility.Collapsed;// Скрываем меню
                HookSystemKeys.FunHook();// Запрещаем системные клавиши
                this.Visibility = Visibility.Visible;
    
                fullScreen = true;
                changeScreen.Header = "WindowScreen";
            }
            else // Восстанавливаем оконный режим
            {
                this.WindowStyle = windowStyle;
                this.Topmost = false;
                this.WindowState = windowState;
                this.ResizeMode = resizeMode;
    
                menu.Visibility = Visibility.Visible;// Показываем меню
                HookSystemKeys.FunUnHook();// Освобождаем системные клавиши
    
                fullScreen = false;
                changeScreen.Header = "FullScreen";
            }
        }
    
        private void Window_KeyDown(object sender, KeyEventArgs e)
        {
            if (e.Key == Key.Escape)
                this.Close();
        }
    }
}

В приведенном коде используется класс HookSystemKeys, который нам нужно подключить к приложению и который взят из "http://www.sql.ru/Forum/actualthread.aspx?tid=632552" (там же и описан).

Добавьте к текущему проекту FullScreen командой Project/Add New Item новый файл с именем HookSystemKeys.cs

Заполните файл HookSystemKeys.cs так

using System;
using System.Diagnostics;
using System.Runtime.InteropServices;
    
// Для перечисления Keys 
using System.Windows.Forms; 
    
namespace FullScreen
{
    // Отключение системной клавиши
    // http://www.sql.ru/Forum/actualthread.aspx?tid=632552
    class HookSystemKeys
    {
        private const int WH_KEYBOARD_LL = 13;
        private const int WM_KEYUP = 257;// Отпускание любой клавиши
    
        private static LowLevelKeyboardProc _proc = HookCallback;
        private static IntPtr _hookID = IntPtr.Zero;
    
        // Поддержка флагов состояния системных клавиш 
        static bool CtrlKey, AltKey, WinKey;
        private static void StateKey(int vkCode, IntPtr wParam)
        {
            switch ((Keys)vkCode)
            {
                case Keys.LControlKey:
                case Keys.RControlKey:
                    if (wParam == (IntPtr)WM_KEYUP)
                        CtrlKey = false;
                    else
                        CtrlKey = true;
                    break;
                case Keys.LMenu:
                case Keys.RMenu:
                    if (wParam == (IntPtr)WM_KEYUP)
                        AltKey = false;
                    else
                        AltKey = true;
                    break;
                case Keys.LWin:
                case Keys.RWin:
                    if (wParam == (IntPtr)WM_KEYUP)
                        WinKey = false;
                    else
                        WinKey = true;
                    break;
            }
        }
    
        // Общедоступная упаковка оригинала
        public static void FunHook()
        {
            _hookID = SetHook(_proc);
        }
        public static void FunUnHook()
        {
            UnhookWindowsHookEx(_hookID);
        }
    
        private static IntPtr SetHook(LowLevelKeyboardProc proc)
        {
            using (Process curProcess = Process.GetCurrentProcess())
            using (ProcessModule curModule = curProcess.MainModule)
            {
                return SetWindowsHookEx(WH_KEYBOARD_LL, proc, 
                    GetModuleHandle(curModule.ModuleName), 0);
            }
        }
    
        private delegate IntPtr LowLevelKeyboardProc(int nCode, 
            IntPtr wParam, IntPtr lParam);
    
        private static IntPtr HookCallback(int nCode, IntPtr wParam, IntPtr lParam)
        {
            int vkCode = Marshal.ReadInt32(lParam);
            StateKey(vkCode, wParam);
            if (WinKey                                      // Системная
                || CtrlKey  (Keys)vkCode == Keys.Escape   // Ctrl+Esc
                || AltKey  (Keys)vkCode == Keys.Escape    // Alt+Esc
                || AltKey  (Keys)vkCode == Keys.Tab)      // Alt+Tab
            {
                return (IntPtr)1;
            }
            else
                return CallNextHookEx(_hookID, nCode, wParam, lParam);
        }
    
        [DllImport("user32.dll", CharSet = CharSet.Auto, SetLastError = true)]
        private static extern IntPtr SetWindowsHookEx(int idHook,
            LowLevelKeyboardProc lpfn, IntPtr hMod, uint dwThreadId);
    
        [DllImport("user32.dll", CharSet = CharSet.Auto, SetLastError = true)]
        private static extern bool UnhookWindowsHookEx(IntPtr hhk);
    
        [DllImport("user32.dll", CharSet = CharSet.Auto, SetLastError = true)]
        private static extern IntPtr CallNextHookEx(IntPtr hhk, int nCode, 
            IntPtr wParam, IntPtr lParam);
    
        [DllImport("kernel32.dll", CharSet = CharSet.Auto, SetLastError = true)]
        private static extern IntPtr GetModuleHandle(string lpModuleName);
    }
}