Овладяване на WPF заедно, част 3
Публикувано от Limonell в нед, 28/10/2012 - 19:34
Един от отличителните белези на WPF приложенията е уникален потребителски дизайн.Разбира се, този дизайн отнема много време и можете да го направите без него, но ако WPF даде такава възможност в ръцете на програмист, тогава е грях да не я използвате. В края на краищата първото нещо, което хваща окото на потребителя, е дизайнът на приложението и именно той често влияе на мнението на клиента / купувача на вашите програми.
Фигура 1. Главното меню на приложението.
Да кажем, че искаме да оцветим панел, съдържащ бутони в някакъв цвят. Запълването с плътен цвят може да се извърши с помощта на свойството Background, но тази опция не е подходяща за нас, няма да имаме плътно запълване, а запълване с помощта на линеен градиент. Ето извадка от маркирането на Xaml, където свойството Background на StackPanel е зададено на линеен градиент, който запълва този панел с много интересен цвят: [code=xml]
[/code=xml] Това, което ви интересува тук, е това, което започва със StackPanel.Background и завършва със съответния затварящ таг... всичко останало, което трябва да сте оставили от предишната статия. Както вече казах, LinearGradientBrush се използва за запълване на пространството с градиент, образно казано, това е четка, с която се рисува повърхността на нашия панел. За да бъдат цветовете различни, тоест един цвят плавно преминава в друг, трябва да зададете GradientStops за четката. Ако разгледаме внимателно маркировката на тези GradientStops, имаме 6 части, което означава, че нашият панел ще бъде декориран в 6 различни цвята, които плавно ще преливат от един в друг. Свойството Offset ви позволява да зададете позицията, от която ще започне отместването.един или друг градиент. Отместването може да бъде зададено между 0,0 и 1,1. Съответно нашият цвят AliceBlue започва от 0.0, което означава, че повърхността ще бъде запълнена с този цвят от самото начало. Следва цветът Aqua, който запълва повърхността от 0,5. Е, по този начин всички цветове имат свое собствено отместване. Резултатът от прилагането на линеен градиент може да се види на фиг.2.
Фигура 2 Прилагане на LinearGradientBrush.
Най-общо казано, повечето елементи имат свойство Background и следователно всеки персонализиран елемент може да бъде декориран до насита. Между другото, читателят може да получи погрешното впечатление, че WPF има само градиентни запълвания, далеч от това. Запълването става с помощта на четки (Brushes), затова LinearGradientBrish има такова име и така има няколко разновидности на тези четки, в допълнение към четката с линеен градиент, има и SolidColorBrush (запълване с плътен цвят), RadialColorBrush (от името е ясно, че това е радиално запълване), ImageBrush - запълване с помощта на картина от файл. Има и DrawingBrush, VisualBrush. Но тези две четки са много рядко използвани от мен, така че е напълно възможно да бъдат рядко използвани от вас. Във всеки случай, ако се интересувате от работа с четки, тогава можете спокойно да отидете до края на статията, има полезна връзка за вас. Да кажем, че искаме да оцветим панела, който съдържа полето за въвеждане със същото запълване. Изглежда, че няма нищо сложно: можете да добавите такова Xaml маркиране за Grid. [код=xml]
[/code=xml] Отново, това, което ви интересува тук, е какво започва с Grid.Background и завършва със съответния затварящ таг... всичко останало, което трябваше да сте оставили от предишната статия. Резултатът може да се види на фиг.3.
Фигура 3. Прилагане на LinearGradientBrush към мрежата.
Всичко би било наред, но трябва да сте объркани от факта, че на две различни места използваме абсолютно една и съща маркировка, което удължава кода доста добре. Представете си, че няма да имаме два такива панела, а десет ... Поставете едно и също нещо десет пъти. Като цяло 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="35 0" Width="525" WindowStar tupLocation="CenterScreen">
[/code=xml] Както можете да видите, дефинирахме нашето градиентно запълване като ресурс, където зададохме името за този ресурс в свойството x:key. След това можете да изтриете тези места в StackPanel и в Grid, където изрично сме задали линейно запълване като BackGround, и вместо това да посочите нашия създаден ресурс във Background. Ще изглежда така: [code=xml]
..[/code=xml] И за Grid:[code=xml]
[/code=xml] Тук задаваме нашия ресурс във фонов режим. Ресурсите, както и стиловете, котвите (повече за това по-късно...) се задават във фигурни скоби. Първо имаме StaticResource и след това самото имересурс. Ресурсите са статични (StaticResource) и динамични (DynamicResource). Нашият ресурс е статичен, зададен е на едно място и не се променя след това. След направените промени резултатът трябва да е същият както преди, когато създадохме наш собствен обект LinearGradientBrush за всяко свойство Background.
Тази част от моята серия статии за WPF се фокусира върху ресурси, които ви позволяват да съхранявате централно обекти за по-късна употреба. Бяха разгледани и основните четки (Brushes), сред които на практика приложихме LinearGradientBrush.
Можете да прочетете повече за употребата и предназначението на основните четки тук.