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

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       10 290×

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 Mobilní datový provoz vzroste sedmkrát.

Mobilní datový provoz vzroste sedmkrát.

Už v roce 2021 bude mít více obyvatel zeměkoule mobilní telefon (5,5 miliardy) než bankovní účet (5,4 miliardy), tekoucí vodu (5,3 miliardy) nebo pevnou telefonní linku (2,9 miliardy). Vyplývá to z analytické studie Cisco Visual Networking Index (VNI) Global Mobile Data Traffic Forecast (2016 to 2021). Analytici také předpovídají, že se tento výrazný růst, spolu s rozmachem chytrých telefonů a připojení do internetu věcí promítne i do celkového objemu přenesených mobilních dat. Studie říká, že do roku 2021 vzroste sedminásobně, k čemuž přispěje i zvyšování přenosové rychlosti sítí a nárůst sledování videa na mobilních zařízeních.

Reklama
Reklama

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032017 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý