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

Silverlight 2 Digg klient - 7. dílSilverlight 2 Digg klient - 7. 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
Laser Game Ostrava

Silverlight 2 Digg klient - 7. díl

Google       Google       27. 4. 2009       12 092×

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

Reklama
Reklama

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 Lepší hosting chrání i vaše data

Lepší hosting chrání i vaše data

Kybernetických útoků na webové stránky rok od roku přibývá, jsou čím dál důmyslnější a páchají stále větší škody. Možná si říkáte, že vás se to netýká, opak je ale pravdou. Jeden z nejčastějších typů útoku využívá zranitelnosti samotných webových stránek a spočívá v umístění škodlivé části programového kódu (tzv. malware) přímo do jejich těla. 

Reklama
Reklama
Obrázek ke článku Spotřebitelé důvěřují novým technologiím při péči o seniory, ale správu financí by jim nesvěřili

Spotřebitelé důvěřují novým technologiím při péči o seniory, ale správu financí by jim nesvěřili

 71 % vítá nové technologie ke sledování zdravotního stavu postarších příbuzných, které jim umožňují žít déle doma

 Pouhých 7 % by svěřilo správu svých financí umělé inteligenci, i kdyby to znamenalo rychleji naspořit prostředky na pořízení bydlení

 64 % respondentů nemá dojem, že firmy a stát dostatečně informují o tom, jaké technologie a jak užívají

Obrázek ke článku Mobilní operátoři využívají digitální modely terénů a kvůli stavebnímu boomu i 3D modely budov

Mobilní operátoři využívají digitální modely terénů a kvůli stavebnímu boomu i 3D modely budov

Mít pokrytí co nejširšího území Česka a nabízet svým zákazníkům co nejlepší signál je společným cílem všech mobilních operátorů. Při plánování sítí proto využívají aktualizovaných digitálních modelů terénu, jež jim umožňují přesně si vypočítat pokrytí a šíření signálu. V hustě zastavěných oblastech a s ohledem na stavební boom jim pak pomáhají také 3D modely budov, které by jim při nesprávném umístění vysílače mohly signál blokovat.

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