#006 Работа с изображениями / Стили в WPF

Автор: Topol Воскресенье, Май 6th, 2012 Нет комментариев

Рубрика: Операционные системы

На примере предыдущего материала мы выяснили, что создание графики в WPF  действительно реализовано просто. Однако, сложно представить работу с графикой без возможности использовать готовые изображения, подготовенные в других графических редакторах в форматах bmp, jpg, png, gif. Кстати, в дальнейших CTP мы получим «безграничную поддержку» нового формата Windows Media Photo.

Последний июньский CTP принес целый комплекс неожиданных проблем, связанных с работой с готовыми растрами. Многодневные обсуждения на форумах MSDN  наконец выявили проблему неправильных компиляций и всевозможных ошибок, вроде не совпадения версий библиотеки PresentationCore.dll и других.

Прежде всего для устранения проблем нужно было установить новый WIC (см. статью № 001) , а также ознакомиться с новым синтаксисом и, как ни странно, ограничениями последнего билда. Так, например адресом изображения в этом CTP не может быть относительный путь, его нужно указывать в абсолютном виде. Отпал определитель LocalResource и так далее. Я не буду подробно заострять внимания на различиях May CTP Beta 2 и June CTP и расскажу о работе с изображениями на сегодняшний день.

Создаем новый проект типа WinFX Windows Application и даем ему имя «MyWpfImaging». Для начала поместим изображение на нашу форму. Для этого давайте добавим любое изображение к нашему проекту с помощью меню Visual Studio 2005 Project -> Add Existing Item. Выберите любое изображение. Я выбрал изображение 256×256 точек в формате png с именем Image.png:

После этой операции наше изображение стало «ресурсом» приложения. Давайте разместим его на форме. Контейнером для изображений является элемент <Image>, а свойство для указания файла — Source. Поэтому добавьте такой код внутрь вашего контейнера Grid:

Код:
<Image HorizontalAlignment =»Center»
VerticalAlignment =»Center»
Source =»Image.png»/>

В последнем June CTP локальный ресурс указывается вот так… просто? — я бы сказал запутывающе… но если вспомнить «замечательное» ограничение на относительные пути, то все становится на свои места.

Результат:

Чтобы разместить на форме не локальный ресурс, а некий файл на каком-либо носителе информации — просто укажите его адрес в абсолютной форме, например:

Код:
<Image HorizontalAlignment =»Center» VerticalAlignment =»Center»
Source =»C:\Image2.png»/>

Результат:

Давайте теперь сделаем что-нибудь менее тривиальное в рамках нашей темы. Замените контейнер Grid на контейнер WrapPanel. Этот контейнер размещает все элементы в одну строку с автоматическим переносом на следующую строку если количество элементов превышает емкость строки по ширине. Внесите такие коррективы в ваш код:

Код:
<WrapPanel >
<Image Height=»48″ Width =»48″ Source =»Image.png»/>
<Image Height=»48″ Width =»48″ Source =»Image.png»/>
<Image Height=»48″ Width =»48″ Source =»Image.png»/>
<Image Height=»48″ Width =»48″ Source =»Image.png»/>
<Image Height=»48″ Width =»48″ Source =»Image.png»/>
</WrapPanel>

Посмотрите на работу контейнера WrapPanel:

В статье посвященной первому приложению на WPF мы говорили о том, что основной контейнер окна может содержать другие контейнеры — именно этим мы воспользуемся, чтобы окантовать каждое изобржение в рамку. Для этого есть специальный контейнер Border — этот контейнер может содержать только один элемент! Давайте применим его:

Код:
<Border BorderBrush =»Gold» BorderThickness =»3″>
<Image Height=»48″ Width =»48″ Source =»Image.png»/>
</Border>

Внесите этот код для каждого изображения и посмотрите на результат:

Минусом подобного подхода является то, что нам пришлось многократно дублировать один и тотже код. Сейчас мы рассмотрим способ унификации отображения элементов с одинаковым оформлением.

Для этого добавим секцию Window.Resources перед нашим контейнером WrapPanel:

Код:
<Window x:Class=»Window1″
xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation»
xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»
Title=»MyWpfImaging» Height=»300″ Width=»300″
>

<Window.Resources>

</Window.Resources>

Этот раздел служит для хранения различного типа ресурсов — в нашем случае мы создадим новый стиль для изображений и назовем его MyImg:

Наш стиль называется MyImg и может быть применен только к элементу типа Image (об этом говорит свойство TargetType). Давайте применим его к нашим изображениям:

Код:
<WrapPanel >
<Image Style =»{StaticResource MyImg}»/>
<Image Style =»{StaticResource MyImg}»/>
<Image Style =»{StaticResource MyImg}»/>
<Image Style =»{StaticResource MyImg}»/>
<Image Style =»{StaticResource MyImg}»/>
</WrapPanel>

Обратите внимание на синтаксис свойства Source!

Запустите программу и посмотрите на результат. Мы получили тот же эффект, что и в самом начале статьи, но, применив стили, мы придали нашему приложению профессиональный вид и обеспечили себя легкостью редактирвания кода. Если нам необходимо изменить внешний вид — мы просто редактируем стиль — и все элементы, ссылающиеся на этот стиль, подчиняются этим изменениям!

Полный листинг прграммы:

Код:
<Window x:Class=»Window1″
xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation»
xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»
Title=»MyWpfImaging» Height=»300″ Width=»300″
>

<Window.Resources>
<Style x:Key =»MyImg» TargetType =»Image»>
<Setter Property =»Width» Value =»48″/>
<Setter Property =»Height» Value =»48″/>
<Setter Property =»Source» Value =»Image.png»/>

</Style>

</Window.Resources>

<WrapPanel >
<Image Style =»{StaticResource MyImg}»/>
<Image Style =»{StaticResource MyImg}»/>
<Image Style =»{StaticResource MyImg}»/>
<Image Style =»{StaticResource MyImg}»/>
<Image Style =»{StaticResource MyImg}»/>

</WrapPanel>

</Window>

 

Источник: thevista.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты