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

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

 

Silverlight 2 Digg klient - 7. díl

Google       Google       27. 4. 2009       14 261×

V dnešním dílu si ukážeme pár věcí, které nám umožňují šablony ovládacích prvků.

Dnes to pro změnu nebude přímo o Digg klientu, jen díky obsahu tohoto článku zjistíte, jak jsem došel ke kulatému tlačítku na konci minulého dílu.

Vše budeme demonstrovat na tlačítku (Button), ale můžete si sami vyzkoušet, že stejné věci jsou možné i u spousty dalších ovládacích prvků. V prvním díle jsme si udělali jednoduché tlačítko, které mělo na sobě navázanou nějakou událost a text „Klikni!“. Tento text byl uložen ve vlastnosti Content, a to je právě to klíčové místo. Do Content nemusíme ukládat jen text, ale můžeme tam vložit třeba TextBox, StackPanel nebo cokoliv jiného:

<Button x:Name="Tlacitko" Width="400" Height="200">
    <Button.Content>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Image Source="http://programujte.com/banery/ico.png" Height="31" />
            <TextBlock Text="Programujte.com" FontSize="28" VerticalAlignment="Center" Margin="10" />
        </StackPanel>
    </Button.Content>
</Button>

Pokud na toto tlačítko kliknete, zjistíte, že má pořád všechny efekty při najetí myší, kliknutí, atd. Nic nám nebrání vložit do tlačítka libovolný tvar, třeba kruh:

<Button x:Name="Tlacitko" Width="350" Height="100">
    <Button.Content>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Ellipse Margin="10" Width="50" Height="50">
                <Ellipse.Fill>
                    <RadialGradientBrush GradientOrigin=".2,.2">
                        <GradientStop Offset="0.2" Color="White" />
                        <GradientStop Offset="1" Color="Blue" />
                    </RadialGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <TextBlock Text="Programujte.com" FontSize="28" VerticalAlignment="Center" Margin="10" />
        </StackPanel>
    </Button.Content>
</Button>

A nakonec můžeme vkládat i ostatní ovládací prvky, třeba Slider, který si ponechá plnou interaktivitu:

<Button x:Name="Tlacitko" Width="350" Height="100">
    <Button.Content>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Slider Width="50"/>
            <TextBlock Text="Programujte.com" FontSize="28" VerticalAlignment="Center" Margin="10" />
        </StackPanel>
    </Button.Content>
</Button>

Upravovat vnitřek ovládacích prvků není jediná věc, kterou nám WPF a Silverlight povolují. Můžeme nahradit doslova celé tlačítko nějakým svým tvarem, animacemi… Kdo sledujete seriál o Blendu, určitě víte, o čem mluvím. V tomto díle si ale takové změny napíšeme ručně. Pokud bychom chtěli kulaté tlačítko, stačilo by nadefinovat v souboru App.xaml sekci pojmenovanou například RoundButton, ve které přepíšeme standardní vzhled Buttonu:

<Style x:Key="RoundButton" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <Ellipse Width="200" Height="200" >
                        <Ellipse.Fill>
                            <RadialGradientBrush GradientOrigin=".2,.2">
                                <GradientStop Offset="0.2" Color="White" />
                                <GradientStop Offset="1" Color="Blue" />
                            </RadialGradientBrush>
                        </Ellipse.Fill>
                    </Ellipse>

                    <TextBlock Text="Klikni!"
                       FontSize="28"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Na typ RoundButton pak můžeme od tlačítka normálně odkázat a dostaneme tlačítko ukázané na obrázku níže:

<Button x:Name="Tlacitko" Style="{StaticResource RoundButton}"/>

Úprava tlačítka v Digg klientovi

Teď už víte vše potřebné pro to, abyste pochopili, jak je udělané kulaté tlačítko, které jste mohli vidět na konci minulého dílu:

Kód pro něj je tento:

<Style x:Key="CloseButton" TargetType="Button">
    <Setter Property="HorizontalAlignment" Value="Right"/>
    <Setter Property="Width" Value="50"/>
    <Setter Property="Height" Value="25"/>

    <Setter Property="Template">
        <Setter.Value>

            <ControlTemplate>
                <Border x:Name="brd1" Width="22" Height="22" CornerRadius="15">
                    <TextBlock x:Name="txt1" Foreground="#222" TextAlignment="center" Text="r" FontSize="11" VerticalAlignment="center" FontFamily="Webdings"/>
                    <Border.Background>
                        <RadialGradientBrush GradientOrigin=".3, .3">
                            <GradientStop Color="#FFF" Offset=".15"/>
                            <GradientStop Color="#777" Offset="1"/>
                        </RadialGradientBrush>
                    </Border.Background>
                </Border>
            </ControlTemplate>

        </Setter.Value>
    </Setter>

</Style>

A máme hotovo, už úplně. Pokud aplikaci spustíte, uvidíte před sebou plně funkční prohlížeč záznamů z Digg.com. V příštím, posledním, díle si demonstrujeme, jak je snadné převést Silverlight aplikaci do WPF.

Zdroj: http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-7-using-control-templates-to-customize-a-control-s-look-and-feel.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.

4 názory  —  4 nové  
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 Stavebnice umělé inteligence 1

Stavebnice umělé inteligence 1

Článek popisuje první část stavebnice umělé inteligence. Obsahuje lineární a plošnou optimalizaci.  Demo verzi je možné použít pro výuku i zájmovou činnost. Profesionální verze je určena pro vývojáře, kteří chtějí integrovat popsané moduly do svých systémů.

Obrázek ke článku Hybridní inteligentní systémy 2

Hybridní inteligentní systémy 2

V technické praxi využíváme často kombinaci různých disciplín umělé inteligence a klasických výpočtů. Takovým systémům říkáme hybridní systémy. V tomto článku se zmíním o určitém typu hybridního systému, který je užitečný ve velmi složitých výrobních procesech.

Obrázek ke článku Jak vést kvalitně tým v IT oboru: Naprogramujte si ty správné manažerské kvality

Jak vést kvalitně tým v IT oboru: Naprogramujte si ty správné manažerské kvality

Vedení týmu v oboru informačních technologií se nijak zvlášť neliší od jiných oborů. Přesto však IT manažeři čelí výzvě v podobě velmi rychlého rozvoje a tím i rostoucími nároky na své lidi. Udržet pozornost, motivaci a efektivitu týmu vyžaduje opravdu pevné manažerské základy a zároveň otevřenost a flexibilitu pro stále nové výzvy.

Obrázek ke článku Síla týmů se na home office může vytrácet. Odborníci radí, jak z pracovních omezení vytěžit maximum

Síla týmů se na home office může vytrácet. Odborníci radí, jak z pracovních omezení vytěžit maximum

Za poslední rok se podoba práce zaměstnanců změnila k nepoznání. Především plošné zavedení home office, které mělo být zpočátku jen dočasným opatřením, je pro mnohé už více než rok každodenní realitou. Co ale dělat, když se při práci z domova ztrácí motivace, zaměstnanci přestávají komunikovat a dříve fungující tým se rozpadá na skupinu solitérů? Odborníci na personalistiku dali dohromady několik rad, jak udržet tým v chodu, i když pracovní podmínky nejsou ideální.

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