Silverlight 2 Digg klient - 2. díl
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Silverlight 2 Digg klient - 2. dílSilverlight 2 Digg klient - 2. díl

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno

Silverlight 2 Digg klient - 2. díl

Google       Google       23. 3. 2009       10 056×

Dnes to bude o designu – popíšeme si dostupné kontejnery pro ovládací prvky v Silverlightu a vytvoříme grafické prostředí Digg klienta.

Reklama
Reklama

Informace obsažené v tomto dílu můžete využít i při návrhu grafiky v Blendu, ale jak už jsem řekl v úvodním dílu, ten my používat nebudeme – všechen XAML si napíšeme ručně. Dnes začneme otevřením projektu z minulého dílu.

Layout controls

V Silverlightu i ve WPF můžeme nastavovat polohu jednotlivých ovládacích prvků pomocí explicitně zadaných souřadnic (nechť je tlačítko vždy na souřadnicích [130;20]), anebo dynamicky a prvky se pak přeskupují podle velikosti okna (nechť je TextBox vždy uprostřed okna).

Existují tzv. „layout controls“, tedy vlastně kontejnery, které podle nějakých pravidel seskupují další ovládací prvky uvnitř sebe. Současná verze Silverlightu obsahuje jen tři základní kontejnery – Canvas, StackPanel a Grid (WPF je v tomto ohledu bohatší, snad se dočkáme třeba WrapPanelu i v Silverlightu). Na všechny tři silverlightovské kontejnery se nyní podíváme podrobněji.

Canvas Panel

Canvas je ten nejjednodušší ze všech, podporuje pozicování prvků do něj umístěných pomocí explicitně zadaných souřadnic.

Pozicování provádíme pomocí vlastností zvaných „attached properties“ (něco ve smyslu „přichycovacích vlastností“). Attached properties nám umožní specifikovat pozici prvku relativně k okrajím mateřského Canvasu, tyto vlastnosti jsou tedy vlastně enumerací s hodnotami Left, Top, Right a Bottom.

Ukážeme si to na příkladu. V XAMLu si napíšeme Canvas a do něj umístíme dvě tlačítka umístěná 50 pixelů zleva a 50 a 150 pixelů shora (v příkladu jsou attached properties právě Canvas.Left a Canvas.Top).

<UserControl x:Class="DiggKlient.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    
    <Canvas Background="#FF5C7590">
        <Button Content="Tlačítko 1" Width="100" Height="50" Canvas.Left="50" Canvas.Top="50" />
        <Button Content="Tlačítko 2" Width="100" Height="50" Canvas.Left="50" Canvas.Top="150" />
    </Canvas>
    
</UserControl>

Pokud aplikaci spustíme (pomocí Ctrl +  F5), dostaneme tento výsledek:

Canvas je užitečný pro vkládání prvků, které zůstanou na nějaké fixní pozici. Naopak je velmi špatný nápad snažit se ho použít na prvky, které se nějak pohybují, museli bychom psát kód na změnu souřadnic. Mnohem lepším řešením je použít kontejnery, které jsou za tímto účel už udělané, jako třeba StackPanel a Grid.

StackPanel

Kontejner StackPanel slouží k řazení prvků za sebou, vodorovně nebo svisle. Typickým scénářem využití je situace, kdy potřebujeme seřadit například několik tlačítek za sebou. Zařadit za sebe vertikálně tři tlačítka s 10px mezerou můžeme následovně:

<UserControl x:Class="DiggKlient.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    
    <StackPanel Background="#FF5C7590">
        <Button Content="Tlačítko 1" Width="100" Height="50" Margin="10" />
        <Button Content="Tlačítko 2" Width="100" Height="50" Margin="10" />
    </StackPanel>
    
</UserControl>

Po spuštění se dočkáme očekávaného výsledku:

Nastavit StackPanel na horizontální můžeme pomocí vlastnosti Orientation s hodnotou „Horizontal“:

    <StackPanel Orientation="Horizontal" Background="#FF5C7590">
        <Button Content="Tlačítko 1" Width="100" Height="50" Margin="10" />
        <Button Content="Tlačítko 2" Width="100" Height="50" Margin="10" />
        <Button Content="Tlačítko 3" Width="100" Height="50" Margin="10" />
    </StackPanel>

Grid Panel

Grid Panel je nejflexibilnější z kontejnerů dostupných v Silverlightu, umožňuje vkládat prvky do řádků a sloupců nadefinovaných v Gridu. Koncept je podobný jako element table v HTML.

Funguje to tak, že si pomocí vlastností a deklarujeme řádky a sloupce tabulky a do vzniklých buněk pak vkládáme ovládací prvky (danou buňku specifikujeme pomocí attached properties Grid.Row a Grid.Column).

Například takto vytvoříme Grid o třech řádkách a třech sloupcích a vložíme do něj čtyři tlačítka:

<UserControl x:Class="DiggKlient.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    
    <Grid Background="#FF5C7590">
        <Grid.RowDefinitions>
            <RowDefinition Height="60" />
            <RowDefinition Height="60" />
            <RowDefinition Height="60" />
        </Grid.RowDefinitions>
        
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="110" />
            <ColumnDefinition Width="110" />
            <ColumnDefinition Width="110" />
        </Grid.ColumnDefinitions>
        
        <Button Content="Tlačítko 1" Width="100" Height="50" Grid.Column="1" Grid.Row="0" />
        <Button Content="Tlačítko 2" Width="100" Height="50" Grid.Column="2" Grid.Row="1" />
        <Button Content="Tlačítko 3" Width="100" Height="50" Grid.Column="0" Grid.Row="1" />
        <Button Content="Tlačítko 4" Width="100" Height="50" Grid.Column="1" Grid.Row="2" />
    </Grid>
    
</UserControl>

Kromě absolutního nastavení velikosti (Height=“60“) podporuje Grid i nastavování buněk automaticky, podle obsahu do nich vloženého (Height=“Auto“). Časem zjistíte, že Grid je nejflexibilnější a nejmocnější kontejner ze všech a budete ho používat nejčastěji. Několik jeho dalších schopností si ukážeme během seriálu, ale umí toho mnohem více.

Používání kontejnerů k návrhu designu

Naším cílem je vytvořit Digg klienta podobného tomu z minulého dílu, takže začneme. Jako první si nadefinujeme Grid se dvěma řádky. První řádek (Row) bude 40 px vysoký a druhý řádek vyplní zbytek Gridu (pomocí Height=“*“):

<UserControl x:Class="DiggKlient.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    
    <Grid Background="#FF5C7590" ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="40" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
    </Grid>
    
</UserControl>

V Gridu jsme nastavili vlastnost ShowGridLines na True, ta nám zobrazí hranice řádků a sloupců tabulky.

Teď vložíme druhý Grid jako dceřiný prvek do prvního řádku původního Gridu a rozdělíme ho na tři sloupce – jeden pro hlavičku aplikace, jeden pro vyhledávací políčko a třetí pro tlačítko Hledat.

<UserControl x:Class="DiggKlient.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    
    <Grid Background="#FF5C7590" ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="40" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        
        <Grid Grid.Row="0" Margin="7" ShowGridLines="True">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="200" />
                <ColumnDefinition Width="50" />
            </Grid.ColumnDefinitions>
        </Grid>
    </Grid>
    
</UserControl>

Místa pro jednotlivé prvky už máme připravená, takže teď jdeme na nějaký obsah. Jako hlavičku použijeme prvek Border (se zaoblenými rohy pomocí vlastnosti CornerRadius=“10“) a dovnitř napíšeme text. Do druhého sloupce vložíme TextBox pro vyhledávání a tlačítko (Button) do třetího sloupce. V druhém řádku (tedy ve zbytku aplikace) pak budeme zobrazovat výsledky hledání. Nezapomeňte si vhodně pojmenovat tlačítko (SearchBtn) a TextBox (TopicTB), protože se na ně budeme v dalších dílech v C# kódu odkazovat.

<UserControl x:Class="DiggKlient.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    
    <Grid Background="#FF5C7590" ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="40" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        
        <Grid Grid.Row="0" Margin="7" ShowGridLines="True">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="200" />
                <ColumnDefinition Width="50" />
            </Grid.ColumnDefinitions>
            
            <Border Grid.Column="0" CornerRadius="10" Background="#FFDEDEDE" Margin="0,0,5,0">
                <TextBlock Text="Digg klient" Foreground="#FF14517B" Margin="10,3,0,0" />
            </Border>
            
            <TextBox x:Name="TopicTB" Grid.Column="1" FontSize="14" />
            <Button x:Name="SearchBtn" Grid.Column="2" Content="Hledat" />
        </Grid>
        
        <TextBlock Grid.Row="1" Margin="10" Foreground="White">
            Zde budeme vypisovat výsledky
        </TextBlock>
    </Grid>
    
</UserControl>

Dynamické nastavení velikosti okna aplikace

Pokud si prohlédnete náš dosavadní XAML kód, zjistíte, že hlavní „okno“ naší aplikace má nastavenou pevnou šířku a výšku (momentálně 400 px, resp. 300 px). Když aplikace spustíme a zvětšíme okno prohlížeče, dostaneme nepříliš estetický výsledek:

Někdy se takové chování může hodit (zejména pokud vkládáme Silverlight aplikace do jiné stránky), ale toto není jeden z případů. Řešení je ale jednoduché, stačí jen odebrat atributy Width and Height, kód prvku UserControl pak bude vypadat nějak takto:

<UserControl x:Class="DiggKlient.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

Při změně velikosti okna prohlížeče se roztáhne Border a TextBlock v něm, protože ostatní sloupce Gridu mají fixní délku, zatímco sloupec s Borderem má šířku nastavenou na „*“.

V dalším dílu uděláme vyhledávání na Digg.com a výsledky naplníme DataGrid, příště tedy napíšeme i trochu C# kódu.

Zdroj: http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-2-using-layout-management.aspx

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
0 hlasů
Google
(fotka) Jakub KottnauerJakub studuje informatiku na FIT ČVUT, jeho oblíbenou platformou je .NET.
Web     Twitter     Facebook     LinkedIn    

Nové články

Obrázek ke článku Datafesťak 2018 bude o datech, byznyse a ženách v IT

Datafesťak 2018 bude o datech, byznyse a ženách v IT

Na Univerzitě v Hradci Králové se 23. a 24. listopadu potkají všichni, které zajímá práce s daty. 

Reálné zkušenosti se zpracováním dat budou v prostorách univerzity prezentovat zástupci obchodních i výrobních firem. Potkat tak bude možné představitelé například z Kiwi.com, Crocodille, Dáme Jídlo nebo společnosti Adler. 

Reklama
Reklama
Obrázek ke článku 4 tipy, jak financovat rozvoj start-upu

4 tipy, jak financovat rozvoj start-upu

Možná jste právě jedním ze zakladatelů či manažerů nadějného start-upu 
a aktuálně řešíte, kde sehnat finanční prostředky pro další rozvoj. Zde pro vás máme čtyři tipy.

Obrázek ke článku Virtuální zrcadla změní způsob nakupování v e-shopech

Virtuální zrcadla změní způsob nakupování v e-shopech

Díky pluginu Virtooal.com získávají zákazníci e-shopů možnost si vyzkoušet produkty ve virtuálním světě. E-shopy, které si plugin nainstalují, výrazně snižují množství vráceného zboží, dělají nákupy zábavnějšími, a tím budují lepší vztahy se svými zákazníky. V současnosti lze Virtooal.com využít zejména pro kosmetiku, brýle a šperky, do budoucna půjde také o módu.

Obrázek ke článku Kariérní postup & vyšší plat: Titul MBA ve sféře IT

Kariérní postup & vyšší plat: Titul MBA ve sféře IT

Působíte jako specialista v oblasti IT a aspirujete na povýšení, příp. řídící pozici? Pak se jistě potýkáte nejen s vysokými nároky (potenciálních) zaměstnavatelů, ale i se silnou konkurencí ze strany ostatních uchazečů. Pokud chcete zvýšit své šance na kariérní posun a lepší plat, měli byste vedle technických dovedností ovládat i ty manažerské. Pomoci vám v tomto ohledu může studium MBA se specializací na management IT.

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032018 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý