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

 
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

Silverlight 2 Digg klient - 7. díl

Google       Google       27. 4. 2009       10 958×

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

Reklama
Reklama
Obrázek ke článku NopCommerce – datová vrstva a přístup k datům – 2. díl

NopCommerce – datová vrstva a přístup k datům – 2. díl

V minulém článku jsme si představili platformu NopCommerce z globálního pohledu. V dnešním díle se již zaměříme na konkrétní část systému, a to datovou vrstvu. Představíme si základní stavební kameny systému v podobě doménových objektů. Ukážeme si, jakým způsobem rozšířit doménové objekty a jakým způsobem přistupuje NopCommerce k nastavení systému a modulů.

Obrázek ke článku Seznamte se s open source platformou NopCommerce – 1. díl

Seznamte se s open source platformou NopCommerce – 1. díl

Hledáte e-commerce řešení, které si dokážete přizpůsobit podle vašich požadavků? Chcete čistý a srozumitelný kód, se kterým bude radost pracovat? Prozkoumejte s námi možnosti open source projektu NopCommerce. Seriál programování pod NopCommerce vám pomůže překonat první kroky nejistoty a úspěšně zvládnout vývoj pod platformou NopCommerce.

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