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

Silverlight 2 Digg klient - 7. díl

Google       Google       27. 4. 2009       11 436×

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
(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 Firmy musejí s nástupem Průmyslu 4.0 více dbát na kyberbezpečnost. V ohrožení je i jejich know-how.

Firmy musejí s nástupem Průmyslu 4.0 více dbát na kyberbezpečnost. V ohrožení je i jejich know-how.

Destabilizace firmy či ukradené know-how. To jsou možná hlavní budoucí rizika spojená s nedostatečnou kybernetickou bezpečností průmyslových firem, na která upozorňují experti. Vzhledem k postupující digitalizaci výrobních či technologických procesů a přechodu k takzvanému Průmyslu 4.0 může těchto hrozeb postupně přibývat. Varují před nimi i nejnovější průzkumy. 

Reklama
Reklama
Obrázek ke článku Nový CEBIT je připraven: Pochopit digitální dnešek a objevit digitální zítřek

Nový CEBIT je připraven: Pochopit digitální dnešek a objevit digitální zítřek

Nový veletrh  CEBIT je připraven. V polovině června začne v Hannoveru evropský festival obchodu s radikálně změněnou koncepcí věnovaný inovacím a digitalizaci.  CEBIT jedinečnou formou spojuje obchod v digitálním hospodářství 
s festivalovými prvky a posouvá do středu pozornosti téma digitální transformace hospodářství a společnosti.  

Obrázek ke článku Black Swan Security Congress ukáže, jak se chránit před největšími hrozbami na internetu

Black Swan Security Congress ukáže, jak se chránit před největšími hrozbami na internetu

Dva dny plné přednášek a diskusí na téma často podceňovaných bezpečnostních rizik na internetu pořádá Paralelní polis v pražských Holešovicích. Akce s názvem Black Swan Security Congress bude od pátku 18. do soboty 19. května hostit etické hackery a experty na IT bezpečnost převážně z Česka a Slovenska. Ti účastníkům vysvětlí, jaká rizika nese fenomén „černé labutě a jak se před ním mohou chránit.

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