WPF Aplikace – použití stylů a panelů
V předchozích článcích jsem popsal jak využít stylů a panelů pro deklaraci uživatelského rozhraní. Tento článek pak bude prakticky zaměřený, ukáži vám, jak vytvořit jednoduchý vzhled aplikace. Tato aplikace bude mít za úkol zobrazovat a filtrovat seznam vín ve vinotéce, v tomto článku si předvedeme, jak aplikaci vytvořit, nastylovat a určit její vzhled.
Deklarace stylů
Jak již víme, styly je vhodné deklarovat na co nejvyšší úrovni, ať už je to Application, Window/Page nebo samostatná ResourceDictionary.
Pro dnešní aplikaci využiji deklaraci stylů na úrovni Application. Struktura aplikace vypadá následovně.
Projekt, typu WPF Application, obsahuje soubor App.xaml a přidružený App.xaml.cs a soubory Window1.xaml s Window1.xaml.cs. V současné chvíli je soubor App.xaml.cs ve výchozím stavu, stejně tak jako soubor Window1.xaml.cs.
Pro deklaraci stylu si otevřeme soubor App.xaml a vložíme následující řádky kódu:
<Application.Resources>
<Style x:Key='Rounded' TargetType='Border'>
<Setter Property='Background' Value='#66FFFFFF' />
<Setter Property='CornerRadius' Value='10' />
<Setter Property='BorderThickness' Value='2' />
<Setter Property='BorderBrush' Value='DarkGray' />
</Style>
<Style x:Key='Faded' TargetType='TextBlock'>
<Setter Property='Foreground' Value='White' />
<Setter Property='FontWeight' Value='700' />
</Style>
<Style x:Key='Common' TargetType='TextBox'>
<Setter Property='Foreground' Value='SteelBlue' />
<Setter Property="FontSize" Value="12" />
<Setter Property='Margin' Value='10,2,10,5' />
</Style>
<Style x:Key="MainGrid" TargetType="Grid">
<Setter Property="Background" Value="#4d040b" />
</Style>
<Style x:Key="Header" TargetType="Grid">
<Setter Property="Margin" Value="7" />
</Style>
<!--End Styles for Styling Demo -->
</Application.Resources>
V souboru je tak deklarováno celkem pět stylů, které jsou pojmenovány a zároveň je nastaven TargetType, který určuje, pro které prvky bude daný styl možno použít. V následujícím textu a obrázcích se pak podívám na to, co jednotlivé hodnoty představují.
Deklarace layoutu
V současné chvíli mám definovány styly a tak mohu deklarovat rozvržení jednotlivých prvků v okně. Výsledný vzhled aplikace bude po spuštění vypadat jako na následujícím obrázku.
Pokud si tedy rozebereme vzhled a rozvržení jednotlivých prvků, uživatelské rozhraní je rozděleno na dvě části, první řádek, ve kterém je nápis aplikace, textové pole pro možnost zadání textu k vyhledání a tlačítko, kterým se vyhledání spustí. Ve druhém řádku je v současné chvíli jen textové pole, které v některém z příštích článků nahradíme seznamem s daty.
Přejděme tedy na deklaraci vzhledu aplikace
<Window x:Class="CohoWpfApplication.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="700" Width="700" WindowStartupLocation='CenterScreen'> <Grid Style='{StaticResource MainGrid}'> <Grid.RowDefinitions> <RowDefinition Height='50' /> <RowDefinition Height='*' /> </Grid.RowDefinitions> <Grid Style="{StaticResource Header}"> <Grid.ColumnDefinitions> <ColumnDefinition Width='*' /> <ColumnDefinition Width='200' /> <ColumnDefinition Width='50' /> </Grid.ColumnDefinitions> <Border Grid.Column='0' Style='{StaticResource Rounded}'> <TextBlock Text='Wine Search' Margin='10,3,0,0' Style='{StaticResource Faded}' /> </Border> <TextBox Grid.Column='1' Style='{StaticResource Common}' Text='Type search text here...' /> <Button Grid.Column='2' Content='Search' /> </Grid> <TextBlock Grid.Row="1" Margin="10" Foreground='White'> Todo: Wines Displayed Here.... </TextBlock> </Grid> </Window>
a rovnou si můžeme jednotlivé části popsat.
Popis deklarace vzhledu
V elementu <Window /> máme vedle definování potřebných namespace, které jsou potřebné pro informování XAML parseru také přiřazení vlastností pro Width, Height, Title a WindowStartupLocation. Zároveń je také provedeno přiřazení partial třídy, která je spojena s tímto oknem.
Následuje element <Grid />, kde je provedeno přižazení stylu s názvem MainGrid, který je deklarován na úrovni aplikace. Tento styl nastaví barvu pozadí celé mřížky na vínovou.
Dále je provedena deklarace dvou řádků mřížky a to pomocí elementů <Grid.RowDefinitions /> a vnořeného <RowDefinition />. První řádek má mít výšku 50, u druhého řádku je pak použita tzv. hvězdičková notace, kdy tento řádek vyplní dostupný prostor.
Na dalším řádku je pak opět <Grid />, který rozdělí první řádek na tři sloupce a to v poměru šířek
- první sloupec vyplní dostupný prostor
- druhý sloupec zabere šířku 200
- třetí sloupec pak zabere šířku 50
Uvnitř jednotlivých sloupců se pak nacházejí prvky prvního řádku. Postupně je tak deklarován <Border /> se stylem Rounded, který tomuto rámečku dodá kulaté rohy pomocí vlastnosti CornerRadius, lehkou průhlednost, která způsobí zesvětlení podkladu a šedivý okraj. Uvnitř tohoto rámečku je pak vložen <TextBlock />, který obsahuje uvedený text a opět je mu nastaven styl Faded.
Poté již následuje vložený <TextBox />, kterému je pomocí Attached property Grid.Column nastaveno umístění ve druhém sloupci mřížky. Obdobně jako v předchozích případech je pak nastaven styl Common.
Ve třetím sloupci prvního řádku je element <Button />, který bude mít výchozí vzhled, tak jak je definován v .NET Frameworku a má pouze nastavenu vlastnost Content.
Posledním prvkem je pak <TextBlock />, který v tomto případě slouží pouze jako jistý placeholder, na toto místo v dalších článcích umístím seznam s daty. Opět můžete vidět rozdílný přístup k zápisu vlastnosti Text, která v tomto případě není deklarována pomocí atributu, ale je použita tzv. expandovaná forma, kdy je text vložen do elementu.
Závěrem
Jak je vidět z předchozích dvou ukázek deklarace stylu a layoutu, vytvoření uživatelského rozhraní pomocí jazyka XAML může být přehledné a můžeme poměrně snadno takové uživatelské rozhraní upravovat a nebo měnit.
V dalších článcích si tuto aplikaci ještě rozšíříme, napojíme ji na data, která nabindujeme na jednotlivé prvky a ukáži, jak využít DataTemplate a UserControl.
Komentáře