Освоюємо WPF разом Частина3
Опубліковано Limonell в НД, 28/10/2012 - 19:34
Однією з відмінних рис WPF-додатків є унікальний дизайн користувача. Звичайно, на цей дизайн йде чимало часу, і можна обійтися і без нього, але якщо вже WPF дає таку можливість в руки програмісту, то гріх нею не скористатися. Адже перше що впадає у вічі користувачеві – це саме дизайн програми, і саме він часто впливає на думку замовника/покупця ваших програм.
Малюнок 1. Головне меню програми.
Допустимо, ми хочемо розфарбувати панель, що містить кнопки, в якийсь колір. Заливку суцільним кольором можна виконати за допомогою властивості Background, але цей варіант нам не підходить, у нас буде не суцільна заливка, а заливка за допомогою лінійного градієнта. Ось уривок з Xaml розмітки, де у властивості Background StackPanel'і встановлюється лінійний градієнт, який заливає цю панель дуже цікавим кольором: [code=xml]
[/code=xml] Тут вас цікавить те, що починається з StackPanel.Background і закінчується відповідним тегом, що закриває… все інше у вас мало залишитися від попередньої статті. Як я вже казав, для градієнтної заливки простору використовується LinearGradientBrush, образно кажучи, це пензель за допомогою якого відбувається розфарбування поверхні нашої панелі. Для того, щоб кольори були різні, тобто один колір плавно переходив в інший, необхідно для пензля встановити GradientStop'и. У нас, якщо уважно придивитися до розмітки цих GradientStop'ів 6 штук, а це означає, що наша панель буде прикрашена 6 різних кольорів, які плавно перетікатимуть з одного в інший. Властивість Offset дозволяє задати позицію, звідки почнетьсятой чи інший градієнт. Offset може бути встановлений у проміжку від 0.0 до 1.1. Відповідно, колір AliceBlue у нас починається від 0.0, що означає, що даним кольором буде заливатись поверхня з самого початку. Далі у нас йде колір Aqua, яким поверхня заливається від 0,5. Ну і в такий спосіб усім кольорам встановлюється свій Offset. Результат застосування лінійного градієнта можна побачити на рис.2.
Малюнок 2. Застосовуємо LinearGradientBrush.
Власне кажучи, властивість Background є у більшості елементів, а тому будь-який елемент користувача можна прикрасити як душі завгодно. До речі, у читача може скластися помилкове враження, що WPF має лише градієнтну заливку, це далеко не так. Заливка відбувається за допомогою кистей (Brushes), тому LinearGradientBrish і має таку назву, так ось, цих кистей кілька різновидів, крім лінійної градієнтної є ще SolidColorBrush (суцільна заливка кольором), RadialColorBrush (з назви зрозуміло, що це радіальна , ImageBrush – заливка з малюнку з файла. Є також DrawingBrush, VisualBrush. Але ці два пензля дуже рідко мною використовуються, тому цілком можливо, вони рідко будуть використані і вами. У будь-якому випадку, якщо вас зацікавила робота з пензлями, то можете сміливо йти в кінець статті, там для вас є корисне посилання. Припустимо, що ми хочемо розфарбувати такою самою заливкою панель, в якій знаходиться поле для введення. Начебто б нічого складного: можна додати таку Xaml розмітку для Grid'a. [code=xml]
[/code=xml] Знову ж таки, тут вас цікавить те, що починається з Grid.Background і закінчується відповідним закриваючим тегом… все інше у вас мало залишитися від попередньої статті. Результат можна переглянути на рис.3.
Малюнок 3. Застосовуємо LinearGradientBrush для Grid'a.
Все б нічого, але вас має бентежити те, що у двох різних місцях у нас використовується абсолютно однакова розмітка, яка непогано подовжує код. Уявімо, що таких панелей у нас було б не дві, а десять... Десять разів вставляти одне й те саме. Загалом, для таких цілей WPF є ресурси (Resources). Кожне вікно має властивість Resources, яке має свій набір ресурсів. Кожен ресурс має свій унікальний ідентифікатор, і саме з цього ідентифікатора до цих ресурсів можна звернутися і взяти звідти значення. Тобто виходить, що нам зараз треба визначити градієнтну заливку в ресурсах, а потім із різних місць звертатися до цього ресурсу для того, щоб взяти звідти те, що потрібно. Це дуже зручно, принаймні зручніше, ніж щоразу тупо копіювати розмітку та вставляти її в інше місце. Почнемо… У верхній частині розмітки створимо ресурс: [code=xml] xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http ://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525" WindowStartupLocation="CenterScreen">
[/code=xml] Як бачите, ми визначили як ресурс нашу градієнтну заливку, де у властивість x:key задали назву для цього ресурсу. Після цього можна видалити ті місця в StackPanel і Grid'e, де ми явно задавали як BackGround'a лінійну заливку, і замість цього в Background вказати наш створений ресурс. Виглядатиме це так:[code=xml]
..[/code=xml] І для Grid'a:[code=xml]
[/code=xml] Тут ми в Background задаємо наш ресурс. Ресурси, як і стилі, прив'язки (про це пізніше..) встановлюються у фігурних дужках. Спочатку у нас йде StaticResource, а потім власне сама назваресурсу. Ресурси бувають статичними (StaticResource) та динамічними (DynamicResource). Наш ресурс статичний, він задається в єдиному місці і після цього не змінюється. Після внесених змін результат має бути той самий, що й раніше, коли ми для кожної властивості Background створювали свій об'єкт LinearGradientBrush.
У цій частині мого циклу статей по WPF основна увага була приділена ресурсам, які дозволяють централізовано зберігати об'єкти для подальшого їх застосування. Також були розглянуті базові кисті (Brushes), серед яких ми на практиці застосували LinearGradientBrush.
Докладніше про застосування та призначення базових пензлів можна почитати тут