Сделать в приложении windows forms виртуальную витрину в формате плитки
Обновлено: 03.05.2024
В данной статье мы немного ближе познакомимся с тем, что же всё-таки представляет собой элемент управления Ribbon, а также узнаем краткую историю его развития. Затем мы попытаемся понять некоторые технические детали написания Ариком его враппера, и, наконец, перейдём непосредственно к созданию первого приложения с лентой.
В конце предыдущей статьи я указал список необходимого ПО, которое понадобится при разработке приложений WinForms с поддержкой Windows Ribbon. Здесь и далее я буду считать, что всё это ПО у нас уже имеется и готово к использованию.
История
Перед тем, как мы начнём программировать, давайте немного поговорим непосредственно о предмете.
Определение (с MSDN): "Windows Ribbon (Ribbon) Framework — это система представления команд с широкими возможностями, являющаяся современной альтернативой меню, панелям инструментов и области задач традиционных Windows-приложений."
В Office 2007 компания Майкрософт представила новый способ организации пользовательского интерфейса в приложении. Проблемой старого UI было то, что он был недостаточно гибким для представления всех возможностей Office. (На самом деле, люди просили добавить функции, которые уже имелись, но были "упрятаны" далеко в меню. )
Лента Microsoft Word 2007
Когда оказалось, что лента Office 2007 стала успешной, многие компании, занимающиеся разработкой UI, реализовали свои варианты лент для использования в приложениях. Ну а когда в Майкрософт осознали, что у них получилось нечто хорошее, они решили вывести ленту "в широкие массы".
Они выпустили 3 (!) версии ленты:
Ну, а что насчёт разработчиков управляемых WinForms-приложений? Они должны использовать третью, основанную на COM, версию. Поэтому цель этих статей — предоставить вам работающие примеры использования Windows Ribbon в приложениях WinForms.
Зачем использовать Windows Ribbon?
Заметьте: вопрос, на который я собираюсь ответить, звучит как "Зачем использовать ЭТОТ элемент управления Ribbon?", а не "Зачем ВООБЩЕ использовать элемент управления Ribbon?" Почему бы не использовать другие ленты? Существуют дюжины сторонних контролов; некоторые из них бесплатны.
Основная причина использования Windows Ribbon Framework - он разработан Майкрософт. Это означает:
- Поскольку он оригинальный, он обладает ВСЕМИ возможностями ленты, в отличие от других бесплатных или коммерческих Ribbon-контролов, в которых всегда найдутся "не реализованные" моменты.
- Он обладает ПОЛНОЙ поддержкой и интеграцией с интерфейсом Windows 7 и специальными возможностями. Просто представьте поддержку сенсорных экранов или совместимость с более высокими разрешениями (DPI) экрана.
К ленте относятся следующие файлы: UIRibbon.idl, UIRibbonKeydef.h и UIRibbonPropertyHelpers.h. Заметьте, что файл UIRibbon.h не интересен, поскольку он автоматически генерируется из UIRibbon.idl компилятором MIDL (англ. Microsoft Interface Definition Language — "язык описания интерфейсов Майкрософт" — прим. переводчика). Все эти файлы устанавливаются вместе с Windows 7 SDK.
Согласно условностям Windows API Code Pack, файл UIRibbon.idl был конвертирован в 4 различных файла:
Эти файлы — преобразованные мной [Ариком] COM-интерфейсы и типы, используемые Windows Ribbon Framework. Эти файлы могут изменяться в процессе развития проекта, поскольку я наверняка допустил какие-то ошибки в преобразованиях и узнаю об этом, когда попытаюсь использовать какую-либо функцию.
(на момент написания этих статей библиотека Windows Ribbon for WinForms уже довольно длительное время находится в стадии релиза, поэтому если Ариком и будут исправляться какие-либо ошибки, то лишь незначительные. — прим. переводчика).
Как работает Windows Ribbon Framework?
Более подробно об этом написано на MSDN , я рекомендую это прочитать. Здесь я дам лишь краткое описание, чтобы мы просто друг друга понимали.
Для инициализации ленты в вашем приложении вам понадобится сделать следующее:
1. Спроектировать оформление ленты, используя разметку вида XAML.
2. Скомпилировать эту XAML-разметку с помощью Microsoft Ribbon Markup Compiler (компилятора разметки ленты), входящего в состав Windows 7 SDK.
3. Сделать бинарный вывод компилятора разметки (неуправляемым) ресурсом вашего приложения.
4. Во время загрузки приложения выполнить CoCreateInstance для класса UIRibbonFramework, который реализует интерфейс IUIFramework .
5. Вызвать framework.Initialize и передать ему ссылку на реализацию интерфейса IUIApplication вместе с HWND (англ. window handle — "описатель окна" — прим. переводчика) окна вашего приложения. Интерфейс IUIApplication отправляет обратный вызов фреймворку ленты, когда ему нужен описатель команды для её обработки (команды представлены кнопками, комбо-боксами и другими стандартными элементами управления).
6. Вызвать framework.LoadUI , который загружает предварительно скомпилированный ресурс и показывает ленту.
На данный момент IRibbonForm описан примерно так:
/ </summary>
/// <param name="newHeight">новая высота</param>
void RibbonHeightUpdated(int newHeight);
>[/code]
Свойство WindowHandle используется для передачи описателя родительского окна фреймворку ленты.
Функция RibbonHeightUpdated используется, чтобы предупредить ваше приложение, что высота ленты изменилась. Поскольку высота ленты может динамически меняться (например, если вы измените размер окна до минимального, лента исчезнет), вам понадобится это предупреждение, чтобы соответствующим образом перераспределить элементы управления на форме (чтобы лента их не перекрыла).
Класс Ribbon на данный момент имеет 2 метода:
- InitFramework — получает вашу реализацию интерфейса IRibbonForm и имя ресурса, который будет использован для загрузки конфигурации ленты.
- DestroyFramework — код очистки, освобождает ресурсы Windows Ribbon Framework.
Эти методы должны быть вызваны, когда главная форма приложения загружается и закрывается соответственно.
Первое WinForms-приложение с лентой
Итак, давайте посмотрим, как использовать класс Ribbon для добавления поддержки в пустое WinForms-приложение. Результатом будет приложение-образец "01-AddingRibbonSupport".
Также добавьте к главной форме (form1.cs) следующие строки:
[code]using RibbonLib;
using RibbonLib.Interop;
Шаг 3 — Указать компилятору UI скомпилировать разметку в процессе построения
Войдите в: Свойства проекта -> События построения -> Командная строка события перед построением. Добавьте следующие 3 строки:
Пояснение: первая строка компилирует файл разметки ленты в сжатый бинарный формат, сопровождаемый маленьким RC-файлом, описывающим его.
Вторая строка создаёт нативный файл ресурса win32, который будет присоединён к нативным ресурсам проекта. Третья строка создаёт DLL-библиотеку с ресурсами из нативного файла ресурса win32.
Теперь скомпилируйте проект, чтобы ввести события перед построением.
Шаг 4 — Реализовать IRibbonForm
Чтобы ваша главная форма реализовывала интерфейс IRibbonForm, описанный в Ribbon.dll, выполните следующие инструкции:
• Фреймворку ленты необходим описатель окна главной формы для инициализации, отсюда:
Замечание: Если вы запускаете своё приложение и не видите ленту, попробуйте увеличить размер окна. Windows Ribbon обладает свойством не показываться, если размер окна слишком мал. К сожалению, стандартный размер окна в Visual Studio слишком мал.
Заключение
На этом пока всё. Теперь я хотел бы сделать несколько авторских замечаний.
3. В шаге, когда необходимо ссылаться на проект Ribbon.csproj, в оригинале было предложено ссылаться на саму библиотеку Ribbon.dll. Дело в том, что на данный момент Windows Ribbon for WinForms "поставляется" в виде не скомпилированного исходного кода, то есть библиотеку нужно также отдельно компилировать. Для упрощения можно просто добавить в решение проект библиотеки.
4. В третьем шаге у меня при компиляции возникли ошибки. Произошло это, возможно, потому, что в пути проекта были русские символы. Поэтому если у вас возникают ошибки при работе компиляторов UICC.exe или RC.exe, попробуйте убрать из пути проекта кириллицу.
Также в следующей статье будет некоторое замечание касаемо метода DestroyFramework. Сама же статья будет посвящена созданию меню приложения (Application Menu) с различными элементами управления.
Полноэкранное окно из windows forms приложения
Помощь в написании контрольных, курсовых и дипломных работ здесь.
94731 / 64177 / 26122 Ответы с готовыми решениями:Будут ли работать приложения написанные на Windows Forms на Windows 8
Будут ли работать приложения написанные на Windows Forms на Windows 8? И собсно еще вопрос, вы.
Перенос приложения Windows Forms в Windows Market
Как с минимальными затратами времени перенести десктопное приложение на магазин Windows ? Есть ли.
Из консольного приложения в Windows Forms
Нужно добавить ввод a,b,e через textbox и вывести ответ в messagebox.Помогите пожалуйста class.
Печать области из приложения Windows Forms
Есть windows-forms приложение, подскажите, каким образом можно напечатать определенную область.
Как создать плиточное меню WPF
Есть страница разделенная Grid'ом. Нужно в одну ячейку поместить динамически созданные элементы управления (кнопки в виде плиток), причем используя условие. Если сomboBox.SelectedItem = . , то создать определенное количество элементов. Если значение сomboBox.SelectedItem изменилось, то удалить элементы управления, и создать новые. Количество зависит от того, что будет выбрано в comboBox.
Как пример, вот такое меню:
Окей, смотрите, что должно быть.
Для начала, VM. Допустим, у нас есть список яблок и список груш.
Нам нужна коллекция всех продуктов:
И свойство с INotifyPropertyChanged :
(я пользуюсь базовым классом отсюда).
Это мы привяжем к комбобоксу:
Теперь, список. Пускай у нас есть список сортов яблок и список сортов груш.
Теперь, нам нужно свойство, представляющее собой текущий список — яблоки или груши.
Затем, нам нужно при изменении значения CurrentProduct менять и список. Сделаем это в сеттере CurrentProduct : вместо
Плитки для приложений для Windows
Настройка плитки по умолчанию
При создании нового проекта в Visual Studio создается простая стандартная плитка, которая отображает имя и логотип приложения.
Чтобы изменить плитку, дважды щелкните файл Package.appxmanifest в основном проекте UWP, чтобы открыть конструктор (или щелкните файл правой кнопкой мыши и выберите команду "Просмотреть код").
Необходимо изменить несколько элементов:
DisplayName: замените это значение именем, которое вы хотите отображать на плитке.
ShortName: поскольку место для отображаемого имени на плитках ограничено, мы рекомендуем также указать короткое ShortName, чтобы имя приложение не было обрезано.
Замените эти изображения собственными. Вы можете предоставить изображения для разных визуальных масштабов, но не обязательно для всех. Чтобы обеспечить надлежащий вид приложения на самом широком спектре услуг, мы рекомендуем предоставить версии с масштабом 100%, 200% и 400% каждого изображения. Дополнительные сведения о создании этих ресурсов см. в разделе значки и логотипы приложения .
Масштабированные изображения следуют этому контексту именования:
< имя > образа.< Коэффициент > масштабирования.< >расширение файла изображения
При ссылке на образ вы указываете его как < имя > образа.< >расширение файла изображения (в этом примере — "SplashScreen.jpg"). Система автоматически выбирает соответствующее масштабированное изображение для устройства из предоставленных изображений.
Вы не обязаны этого делать, но мы настоятельно рекомендуем предоставить эмблемы для широких и больших плиток, чтобы пользователь мог изменить размер плитки до этих размеров. Чтобы предоставить эти дополнительные изображения, необходимо создать элемент DefaultTile и использовать атрибуты Wide310x150Logo и Square310x310Logo для указания дополнительных изображений:
Использование уведомлений для настройки плитки
После установки приложения можно с помощью уведомлений настроить плитку. Вы можете сделать это при первом запуске приложения или в ответ на какое-то событие, например, push-уведомление.
Сведения об отправке уведомлений плиток см. в разделе Отправка локального уведомления на плитке.
Создание адаптивных плиток
Шаблоны адаптивных плиток — это новая возможность в Windows 10, которая позволяет создавать собственные уведомления плиток с помощью простого и гибкого языка разметки, который адаптируется к различной плотности экрана. В этой статье рассказывается, как создать адаптивные живые плитки для вашего приложения для Windows. Полный список адаптивных элементов и атрибутов см. в разделе Схема адаптивных плиток.
(При желании вы можете по-прежнему использовать стандартные шаблоны из каталога шаблонов плиток Windows 8 при создании уведомлений для Windows 10.)
Начало работы
Установите Визуализатор уведомлений. это бесплатное Windows приложение поможет вам проектировать адаптивные динамические плитки, предоставляя мгновенное визуальное представление плитки при редактировании, как в редакторе XAML и в представлении конструирования для Visual Studio. Смотрите в разделе Визуализатор уведомлений дополнительные сведения или загрузите Notifications Visualizer из Store.
Отправка уведомления на плитке
Ознакомьтесь с нашим Кратким руководством по отправке локальных уведомлений на плитке. В документации, приведенной ниже, описываются все визуальные возможности пользовательского интерфейса адаптивных плиток.
Руководство по использованию
Адаптивные шаблоны предназначены для работы с различными форм-факторами устройств и типами уведомлений. Такие элементы, как группы и подгруппы, связывают содержимое и не подразумевают определенного самостоятельного визуального поведения. Окончательный вид уведомления должен зависеть от конкретного устройства, на котором оно появляется, будь то телефон, планшет, настольный компьютер или другое устройство.
Подсказки — это дополнительные атрибуты, которые можно добавлять к элементам, чтобы добиться определенного визуального поведения. Подсказки могут зависеть от устройства или уведомления.
Базовый пример
В этом примере показано, чего можно добиться с помощью шаблонов адаптивных плиток.
Результат:
Размеры плиток
Содержимое плитки каждого размера индивидуально задается в отдельных элементах TileBinding полезной XML-нагрузки. Выберите целевой размер, задав для атрибута шаблона одно из следующих значений:
- TileSmall
- TileMedium
- TileWide
- TileLarge (только для настольных компьютеров)
Для полезных данных XML уведомления одной плитки предоставьте элементы <binding> для каждого размера плитки, который вы хотите поддерживать, как показано в следующем примере.
Результат:
Торговая марка
Вы можете контролировать фирменную символику в нижней части живой плитки (отображаемое имя и угловой логотип) с помощью атрибута branding в полезных данных уведомления. Доступные значения: none (нет), name (только имя), logo (только логотип) или nameAndLogo (имя и логотип).
Примечание. Windows Mobile не поддерживает угловой логотип, поэтому по умолчанию для "logo" и "nameAndLogo" используется значение name.
Результат:
Фирменная символика может применяться к определенным размерам плиток одним из двух способов:
- указанием атрибута в элементе TileBinding;
- указанием атрибута в элементе TileVisual, который влияет на все полезные данные уведомления, если не задать фирменную символику для привязки, то будет использоваться фирменный стиль, заданный для визуального элемента.
Результат фирменной символики по умолчанию:
Если не указать фирменную символику в полезных данных уведомления, она определяется свойствами базовой плитки. Если базовая плитка показывает отображаемое имя, по умолчанию используется значение name. В противном случае применяется значение none, если отображаемое имя не показано.
Примечание. В Windows 8.x в по умолчанию использовалось значение "logo".
Отображаемое имя
Вы можете переопределить отображаемое имя уведомления, введя собственную текстовую строку в атрибуте displayName. Как и с фирменной символикой, вы можете задать атрибут в элементе TileVisual, который влияет на все полезные данные уведомления, или в элементе TileBinding, который применяется к отдельным плиткам.
Известная проблема. Если в Windows Mobile указать короткое имя плитки, отображаемое имя, указанное в уведомлении, не будут использоваться (всегда отображается короткое имя).
Результат:
Текст
Для отображения текста используется элемент AdaptiveText. Можно использовать подсказки, чтобы изменить способ отображения текста.
Результат:
Обтекание текстом
По умолчанию текст не переносится и продолжается после края плитки. Используйте hint-wrap для настройки обтекания текстом для текстового элемента. Вы также можете задать минимальное и максимальное число строк с помощью атрибутов hint-minLines и hint-maxLines, которые принимают положительные целые числа.
Результат:
Стили текста
Стили определяют размер и цвет шрифта, а также насыщенность текстовых элементов. Доступно несколько стилей, включая «утонченную» версию каждого стиля с прозрачностью 60 %, отчего цвет текста обычно становится светло-серым.
Результат:
Примечание. Если hint-style не указан, по умолчанию используется стиль caption.
Базовые стили текста
| <текстовая подсказка-Style = " * "/> | Высота шрифта | Насыщенность шрифта |
|---|---|---|
| caption | 12 эффективных пикселей (epx) | Регулярно |
| текст | 15 epx | Регулярно |
| base | 15 epx | Полужирный |
| subtitle | 20 epx | Регулярно |
| title | 24 epx | Полусветлый |
| subheader | 34 epx | Светлая |
| заголовок | 46 epx | Светлая |
Числовые варианты стилей текста
Эти варианты уменьшают высоту строки, чтобы содержимое сверху и снизу находилось намного ближе к тексту.
Утонченные варианты стилей текста
У каждого стиля есть утонченный вариант с прозрачностью текста 60 %, из-за чего цвет текста обычно становится светло-серым.
Выравнивание текста
Текст может быть выровнен по левому краю, центру или правому краю. В языках с написанием слева направо языках, таких как английский, по умолчанию текст выравнивается по левому краю. В языках с написанием справа налево, таких как арабский, по умолчанию текст выравнивается по правому краю. Можно вручную задать выравнивание с помощью атрибута элементов hint-align.
Результат:
Группы и подгруппы
Группы позволяют семантически объявить, что содержимое в группе взаимосвязано и должно отображаться согласованно. Например, у вас может быть два текстовых элемента, заголовок и подзаголовок, поэтому не имеет смысла отображать только заголовок. Если объединить эти элементы в подгруппу, они или будут отображаться все вместе (если помещаются), или не будут отображаться вовсе (если не помещаются).
Для оптимальной работы на разных устройствах и экранах создайте несколько групп. Несколько групп также позволяют плитке адаптироваться к большим экранам.
Примечание. Единственный допустимый дочерний элемент группы — это подгруппа.
Результат:
Подгруппы (столбцы)
Подгруппы также позволяют разбить данные на семантические разделы в группе. Для живых плиток визуально это соответствует столбцам.
Атрибут hint-weight позволяет указать ширину столбцов. Значение hint-weight выражается как взвешенная доля доступного пространства, что аналогично поведению GridUnitType.Star. Для столбцов равной ширины присвойте каждому из них вес 1.
| hint-weight | Доля ширины в процентах |
| 1 | 25 % |
| 1 | 25 % |
| 1 | 25 % |
| 1 | 25 % |
| Общий вес: 4 |
Чтобы сделать один столбец в два раза шире другого, назначьте меньшему столбцу вес 1, а большему — вес 2.
| hint-weight | Доля ширины в процентах |
| 1 | 33,3 % |
| 2 | 66,7 % |
| Общий вес: 3 |
Чтобы первый столбец занимал 20% от общей ширины, а второй — 80% от общей ширины, назначьте первый вес равный 20, а второй вес равный 80. Если общий вес равен 100, то веса соответствуют процентам.
| hint-weight | Доля ширины в процентах |
| 20 | 20 % |
| 80 | 80 % |
| Общий вес: 100 |
Примечание. Между столбцами автоматически добавляется поле в 8 пикселей.
Если подгрупп больше двух, следует указать атрибут hint-weight, который принимает только целые положительные числа. Если не указать атрибут hint-weight для первой подгруппы, ей будет назначен вес 50. Следующей подгруппе, для которой не задан атрибут hint-weight, будет назначен вес, равный 100 минус сумма предшествующих весов или 1, если результат равен нулю. Оставшимся подгруппам, для которых не заданы атрибуты hint-weight, будет назначен вес 1.
Вот пример кода для плитки погоды, в котором показано, как получить плитку с пятью одинаковыми столбцами.
Результат:
Изображения
Элемент <image> используется для показа изображений на уведомлении плитки. Изображения можно разместить вместе с содержимым плитки (по умолчанию), как фоновое изображение за содержимым или как всплывающее изображение, которое анимируется в верхней части уведомления.
В уведомлении можно использовать изображения из пакета приложения, локального хранилища приложения или из Интернета. Начиная с обновления Fall Creators Update размер веб-изображений может быть до 3 МБ для обычных подключений и до 1 МБ для лимитных подключений. На устройствах без Fall Creators Update размер веб-изображений не должен превышать 200 КБ.
Если дополнительные аспекты поведения не определены, изображения будут равномерно сжиматься или увеличиваться для заполнения доступной ширины. В этом примере показана плитка с двумя столбцами и встроенными изображениями. Встроенные изображения растягиваются, заполняя всю ширину столбца.
Результат:
Изображения, размещенные в корневом элементе <binding> или в первой группе, также растягиваются по всей доступной высоте.
Выравнивание изображений
Изображения можно выравнивать по левому краю, центру или правому краю с помощью атрибута hint-align. Также при этом изображения будут показываться в исходном разрешении, а не растягиваться на всю ширину.
Результат:
Поля изображений
Кадрирование изображений
Изображения можно обрезать в форме круга с помощью атрибута hint-crop, который в настоящий момент поддерживает только значения "none" (по умолчанию) или "circle".
Результат:
Фоновое изображение
Чтобы задать фоновое изображение, разместите элемент изображения в корневом элементе <binding> и задайте для атрибута placement значение background.
Результат:
Всплывающее изображение
Вы можете указать изображение, которое "выглядывает" из-за верхней границы плитки. Такое изображение использует анимацию для скольжения вниз и вверх в верхней части плитки, отображаясь полностью и затем скрываясь, чтобы показать основное содержимое плитки. Чтобы задать всплывающее изображение, разместите элемент изображения в корневом элементе <binding> и задайте для атрибута placement значение peek.
Обрезка по кругу для обзорных и фоновых изображений
Используйте атрибут hint-crop на обзорных и фоновых изображениях для выполнения обрезки по кругу:
Результат должен выглядеть так:
Использование обзорного и фонового изображения
Чтобы использовать обзорное и фоновое изображение в уведомлении на плитке, укажите обзорное и фоновое изображение в полезных данных уведомления.
Результат должен выглядеть так:
Наложения обзорных и фоновых изображений
Можно включить черное наложение на фоновые и обзорные изображения с помощью атрибута hint-overlay, который принимает целые числа от 0 до 100, где 0 означает отсутствие наложения, а 100 — полное наложение черного цвета. Наложение помогает обеспечить удобство чтения текста на плитке.
Использование наложения подсказки на фоновом изображении
Для фонового изображения по умолчанию используется наложение 20 % при условии наличия текстовых элементов в полезных данных (в противном случае используется наложение 0 %).
Результат hint-overlay:
Использование наложения подсказки на обзорном изображении
В версии 1511 Windows 10 также поддерживается наложение обзорного изображения точно так же, как фонового. Укажите наложение подсказки на элемент обзорного изображения в виде целого числа от 0 до 100. По умолчанию для обзорных изображений используется наложение 0 (без наложения).
В этом примере показано обзорное изображение с уровнем непрозрачности 20 % (слева) и с непрозрачностью 0 % (справа):
Вертикальное выравнивание (размещение текста)
Контролируйте вертикальное выравнивание содержимого в плитке, используя атрибут hint-textStacking в обоих элементах TileBinding и AdaptiveSubgroup. По умолчанию все содержимое вертикально выравнивается по верхней границе, но также можно выравнивать его по нижней границе или центру.
Размещение текста в элементе binding
При использовании на уровне элемента TileBinding, размещение текста задает вертикальное выравнивание содержимого уведомления в целом; выравнивание производится в доступном месте по вертикали выше области фирменной символики или эмблемы.
Размещение текста в элементе subgroup
При использовании на уровне элемента AdaptiveSubgroup, размещение текста задает вертикальное выравнивание содержимого подгруппы (столбца); выравнивание производится в доступном месте по вертикали во всей группе.
Практическое руководство. Отображение содержимого элемента управления ListView в Windows Forms в виде мозаичного представления
Функция мозаичного представления элемента управления ListView обеспечивает визуальный баланс между графическими и текстовыми представлениями информации. Текстовые данные, отображаемые для мозаичного представления элемента совпадают с данными о столбцах, определенных для подробного представления. Мозаичное представление работает в сочетании с возможностями группирования или вставки метки элемента управления ListView.
Мозаичное представление использует значок размером 32 x 32 пикселя и несколько строк текста, как показано на следующих рисунках.
Чтобы включить мозаичное представление, присвойте свойству View значение Tile. Размер элементов мозаики можно настроить, задав свойство TileSize и количество отображаемых строк текста в плитке путем настройки коллекции Columns.
Выбор мозаичного представления программными средствами
Используйте перечисление View элемента управления ListView.
Пример
В завершенном примере кода ниже показано мозаичное представление с плиткой, в которой отображаются три строки текста. Размер мозаики был подобран для предотвращения переноса строк.
Чтобы повысить интерес у пользователей, возникла идея повысить его привлекательность за счет настройки цвета и шрифта.
Требования к настройке внешнего вида приложения
- хранить и загружать свойства отдельных компонентов в XML-файле
- пользователь должен иметь простой инструмент по настройке внешнего вида
- список настраиваемых компонентов должен очень просто расширяться (одной строкой кода)
- при изменении значения свойства пользователь должен сразу видеть изменения на форме
- должна быть кнопка отмены, которая позволит вернуть все изменения назад
Результат работы
Окно настройки внешнего вида:
До и после настроек внешнего вида:
Для решения задачи необходимо
- использовать компонент PropertyGridEx, для отображения и изменения свойств компонентов
- создать класс CustomDesignControl для удобства хранения свойств в XML
- создать форму MainForm, на которой будем изменять внешний вид
- создать форму AppSettingsForm, на которой будем настраивать внешний вид MainForm
- создать класс SettingsXml для удобства работы с XML
Функция отмены изменений внешнего вида
Чтобы реализовать отмену изменений внешнего вида (пункт 5 из требований), решил найти универсальный способ клонирования свойств компонентов которые будут создаваться в памяти и заменять отображаемые компоненты.
Скопировал код, убрал лишние свойства, которые не нужно сохранять, оставив цвета и шрифт.
После проверки работы кода, сразу выяснились недостатки данного способа:
- используется приведение любого контрола к классу Control, а это означает, что половину свойств можно потерять (например, компонент DataGridView унаследован от класса Control, но имеет свой дополнительный набор свойств)
- при клонировании компонента некоторые свойства (например: цвет шрифта внутри ячейки DataGridView) не клонируются, а создают ссылки на клонируемый компонент (возможно, это потому, что используется свойство со своими внутренними свойствами и их нужно как-то по-другому обрабатывать).
Безрезультатно, компонент не смог вернуть изменения обратно.
Попробовал тогда само свойство создать оператором new и задать ему значение методом SetValue:
И этот способ не дал результата. При изменении значения свойства в одном компоненте, оно автоматически обновляется и в клонируемом компоненте.
Другие способы я больше не искал и сделал возврат изменений обычным перезапуском приложения с возможностью сохранения рабочего документа или отмены перезапуска. Это позволило значительно съэкономить память приложения, так как не нужно создавать клоны объектов.
Пример приложения с настройкой внешнего вида
На всякий случай, подготовил готовый код, на котором желающие смогут проверить и возможно доработать функцию отмены изменений внешнего вида без перезагрузки приложения и рассказать нам о проблеме в комментариях.
Нужно добиться, чтобы при нажатии на кнопку «Автотест» на компоненте DataGridView был серый фон и шрифт ячеек был мелкий.
Продолжаем модернизировать приложение, которое мы создали в прошлой статье.
Сегодня мы разберем как создавать плитки (Tile) для Windows 8.1 приложений и каким образом можно реализовать динамическое изменение контента на них.
Плитки – это то, что вы видите, оказавшись на основном экране windows 8 или windows 8.1. Это не просто иконки. Они интерактивны. Могут содержать текстовую и графическую информацию о изменениях контента приложения, привлекать внимание пользователя и стимулировать использовать ваше приложение чаще.
Почему плитки – это так важно? Плитка – это дверь в ваше приложение, она должна нравиться пользователю и не раздражать его. Иначе он открепит её со стартового экрана и вскоре забудет про приложение.
- Большая плитка (310 x 310 пикселей);
- Средняя плитка (310 x 150 пикселей);
- Средняя плитка (150 x 150 пикселей);
- Маленькая плитка (30 x 30 пикселей).
Готовые варианты плиток и размещения на них информации вы можете найти в каталоге шаблонов плиток.
Настройка плиток для приложения
Воспользуемся стандартными настройками для создания простых плиток.
- Выберите закладку Visual Assets в редакторе манифестов.
- Замените изображения по умолчанию на пути к вашим изображениям.
- Укажите, отображать ли короткое имя приложения на плитке.
- В зависимости от цвета фона, выберите светлый или темный шрифт текста названия.
- Примите цвет фона по умолчанию или укажите собственную строку цвета.
4. Запустите приложение и поэкспериментируйте с плитками.
Как видите, плитки работают и отображают заготовленные картинки.
Теперь настало время добавить интерактивности и научиться динамически обновлять содержимое плитки.
Обновление информации на плитке
- Локальное обновление – обновление плитки непосредственно во время работы самого приложения.
- В заданное время – обновление плитки в указанное вами время.
- Периодически – обновление плитки по расписанию, путем опроса внешних сервисов для получения нового содержимого.
- Используя Push-уведомления – обновление плитки путем отправки уведомления из внешних сервисов или систем нашему приложению.
Теперь рассмотрим каждый из вариантов подробнее.
Локальное обновление плитки
Для реализации обновления плитки, непосредственно из приложения, мы добавим обработчик события по кнопке «Купить» в каталоге товаров. При нажатии на кнопку, плитка приложения будет обновляться информацией о выбранном товаре.
1. Откройте приложение из прошлой статьи.
2. В Solution Explorer откройте файл HubPage.xaml и добавьте обработчик события Click для кнопки «Купить» и параметр с идентификатором заказываемого товара.
3. В файле HubPage.xaml.cs автоматически сгенерировался пустой обработчик события. Напишем туда следующий код:
Чтобы указать какого вида будет наша новая плитка и что на ней будет написано – мы использовали xml, взятый из одного из стандартных шаблонов плиток в каталоге.
Непосредственно само обновление производится вызовом метода TileUpdateManager.CreateTileUpdaterForApplication().Update(tile);
4. Теперь можно запустить приложение, нажать на кнопку «купить» и обнаружить на плитке информацию о выбранном товаре.
Обновление плитки в заданное время
Существует возможность изменять плитку не сразу, а через какое-то время.
Например, можно заставить её измениться через 3 часа после возникновения события. Для этого можно изменить обработчик события Button_Click добавив вместо последних строк следующий код:
Периодическое обновление плитки
Периодические обновления – отличный метод доставки обновления плиток для большой аудитории пользователей. Этот способ чуть более сложен в реализации и требует наличия веб-сервиса в интернет, реализующего логику формирования и передачи плитки клиентскому Windows приложению. Веб-сервис должен возвращать XML контент в специализированном формате.
Сейчас мы создадим REST WCF сервис, который будет предоставлять информацию для обновления плитки.
Создание веб-сервиса:
1. Откройте Solution Explorer и в контекстном меню решения выберите Add New Project.
2. В качестве шаблона проекта выберите WCF Service Application и дайте ему название.
3. В результате создался проект веб-сервиса, содержащий интерфейс и непосредственно сам класс веб-сервиса.
4. Откройте файл Service1.cs и замените код интерфейса:
5. Переименуйте файл Service1.svc в TileService.svc и замените его код:
Этим кодом мы формируем xml в понятном для плиток формате.
4. Запустите проект веб-сервиса и вызовите метод. Веб-сервис должен отрабатывать и возвращать xml.
Настройка вызов веб-сервиса в Windows приложении:
2. Теперь можно запустить приложение, подождать 30 минут и увидеть произошедшие изменения на плитке.
Вызывать веб-сервис и обновлять плитки можно и программно.
Данный код создаёт или обновляет задачу периодического обновления плитки из веб-сервиса раз в пол часа:
Внимание: задача будет выполняться даже если убрать плитку с основного экрана. Скорее всего у вас возникнет необходимость снимать задачу обновления плитки по каким-то событиям, для этого необходимо выполнить следующий код:
Обновление плитки используя Push-уведомления
Мы воспользуемся мобильными службами Windows Azure для создания и управления Push-уведомлениями. Вы можете воспользоваться бесплатным пробным месяцем использования Windows Azure.
Настраивать мобильную службу Windows Azure для Windows приложений можно не покидая Visual Studio:
1. Откройте Solution Explorer. В контекстном меню проекта выберите Add / Push Notification.
2. Заполните открывшийся визард. В процессе, вам необходимо будет использовать существующую или создать новую учетную запись разработчика Windows Store.
3. По окончании прохождения визарда, в Windows Azure будет создана мобильная служба. К ней мы вернемся чуть позже.
4. Обратите внимание, что произошло с проектом.
В проект был добавлен класс push.register.cs обеспечивающий взаимодействие с мобильной службой.
5. В файл App.xaml.cs, в событие запуска приложения, тоже было внесено изменение.
Там выполняется инициализация канала передачи Push-уведомлений.
8. На открывшейся странице нажать на закладку Скрипт.
9. Откроется JavaScript файл, в котором вы можете писать код и формировать уведомления.
10. Отредактируйте файл, заменив код на следующий:
11. Сохраните скрипт.
12. Вернитесь в Visual Studio и запустите приложение.
Плитка мгновенно изменится на то, что было указано в скрипте.
Итак, мы научились реализовывать динамически обновляющиеся плитки для Windows приложений различными способами. В следующих статьях мы продолжим постигать разработку Windows 8.1 приложений на простых примерах.
Для проекта я должен создать приложение Windows Forms, которое создает Mandelbrotfigure. Теперь я хочу добавить вертикальный разделитель между пользовательским интерфейсом слева и рисунком справа (см. Рисунок). Любая идея о том, как это сделать?
Вам нужно будет переместить все содержимое внутри SplitContainer . Этот контейнер содержит две панели и разделитель. Вам нужно будет разместить элементы управления на одной стороне и изображение на другой панели.
В вашем конкретном случае вам, вероятно, придется начать все заново.
Используя конструктор, вы должны установить свойство SplitContainer Dock на Fill. Вы можете перемещать делитель, выбирая его и перетаскивая (это возможно только при выборе SplitContainer). После того, как разделитель находится в нужном месте, было бы разумным установить свойство FixedPanel на левую панель, так как вы, вероятно, не хотите, чтобы эта панель увеличивалась при максимизации.
По-прежнему можно перемещать разделитель в приложении, если для свойства IsSplitterFixed установлено значение False.
Читайте также: