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

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

 
Hledat
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Laser Game Ostrava

Silverlight 2 Digg klient - 2. díl

Google       Google       23. 3. 2009       10 762×

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
Jakub studuje informatiku na FIT ČVUT, jeho oblíbenou platformou je .NET.
Web     Twitter     Facebook     LinkedIn    

Nové články

Obrázek ke článku Open source neznamená „zdarma“

Open source neznamená „zdarma“

Mnoho společností po celém světě, univerzity, vládní organizace a jim podobné dnes používají open source technologie k vytvoření vlastních webových stránek. Tyto technologie se používají čím dál tím více. Jednoduše proto, že je řada poskytovatelů nabízí zcela zdarma. Je to ale opravdu to správné řešení pro všechny? 

Reklama
Reklama
Obrázek ke článku Rádi sledujete obsah streamovacích služeb? Dejte si pozor na pirátské verze Mandaloriana a Netflixu

Rádi sledujete obsah streamovacích služeb? Dejte si pozor na pirátské verze Mandaloriana a Netflixu

Streamovací služby a jejich obsah se v uplynulých měsících těšily velkému zájmu uživatelů, kteří se při pobytu v karanténě chtěli zabavit sledováním filmů a seriálů. Toho bleskově zneužili hackeři, kteří pod názvy oblíbených streamovacích platforem a jejich obsahu maskovali škodlivé soubory. Nejčastěji používali jako návnadu Netflix a seriál The Mandalorian. 

Obrázek ke článku Bionické ruce mění lidem životy. Konference INSPO ukázala nejnovější technologie

Bionické ruce mění lidem životy. Konference INSPO ukázala nejnovější technologie

Bionické myoprotézy rukou jsou ukázkou pokroku, který udělaly za posledních dvacet let technologie pro lidi se zdravotním postižením. Dnešní protézy, které fungují na principu snímání svalových vzorců, umožňují uživatelům operovat s křehkými předměty či provádět úkony složité na kooperaci různých částí těla – ať už jde o hru na hudební nástroje, zavazování tkaniček, nebo třeba pití ze skleničky. Na 20. ročníku konference INSPO se budou zájemci moci naživo seznámit nejen s takzvanou myorukou, ale rovněž s jedním z jejích uživatelů. 

Obrázek ke článku Využití .htaccess na malém webu

Využití .htaccess na malém webu

V dnešní době existuje spoustu cms, které mnohdy ale vůbec nepotřebujeme a stačila by nám pouze základní funkčnost k úpravě url, přesměrování. K tomuto účelu je ideální .htaccess soubor, který nám se všemi těmato úpravami umí pomoct.

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