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

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

 

Silverlight 2 Digg klient - 6. díl

Google       Google       20. 4. 2009       8 345×

Dnešní díl bude o použití User Controls v Silverlightu 2 v praxi – pro našeho Digg klienta vytvoříme vyskakovací okno s podrobnostmi o zápisku.

Reklama
Reklama

Jedním z cílů WPF a Silverlightu je umožnění vývojářům snadné znovupoužití svých ovládacích prvků. Nové prvky získáme odvozením od některé ze tříd Control (ať už samotné základní třídy Control, nebo tříd jako TextBox, Button, atd.). Druhou možností je vytvoření něčeho zbrusu nového, pak označovaného jako User Control. Náš User Control bude okno, které se zobrazí při kliknutí na položku z ListBoxu a zobrazí další informace o ní.

Vytvoření nového User Control

Začneme kliknutím pravým tlačítkem na projekt DiggKlient a zvolíme položku Add New Item. Objeví se před námi okno se šablonami projektů a zvolíme typ Silverlight User Control, který pojmenujeme StoryDetailsView.xaml.

Základní modální okno

Naše okno bude modální, to znamená, že nepůjde dělat nic jiného, dokud uživatel okno nezavře. Máme několik možností jak toho docílit, my začneme vytvořením StoryDetailsView.xaml a napsáním následujícího kódu:

<UserControl x:Class="DiggKlient.StoryDetailsView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
    <Grid>
        
        <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0.765" Fill="#FF8A8A8A" />
        
        <Border CornerRadius="30" Background="#FF5C7590" Width="600" Height="250" >
            <Button Content="Zavřít" Width="100" Height="50" Click="CloseBtn_Click" />
        </Border>

    </Grid>
</UserControl>

Element Rectangle je nastavený tak, aby se roztáhl a zabral všechno volné místo. Jeho barva bude lehce průsvitná šedá (díky vlastnosti Opacity nastavené na 0,765). Vzápětí definujeme prvek Border, který má nastavenou pevnou výšku a šířku a modrou barvu. Pokud se chcete připravit o překvapení, můžete se podívat dál v článku, jak to bude vypadat.

Kliknutí na tlačítko Zavřít implementujeme jako nastavení vlastnosti Visibility na Visibility.Collapsed, díky tomu při kliknutí okno zmizí (i když na pozadí aplikace bude existovat pořád).

private void CloseBtn_Click(object sender, RoutedEventArgs e)
{
    Visibility = Visibility.Collapsed;
}

Zobrazování prvku StoryDetailsView

Nejjednodušším způsobem, jak naše okno s detaily dostat do aplikace, bude přidání jednoho řádku na konec souboru Page.xaml a nastavit jeho viditelnost na Collapsed (aby se nezobrazilo hned po otevřené aplikace):

...
                </DataTemplate>
            </ListBox.ItemTemplate>
            
        </ListBox>
        
        <DiggKlient:StoryDetailsView x:Name="DetailsView" Grid.RowSpan="2" Visibility="Collapsed" />
        
    </Grid>

</UserControl>

Nejspíš budete muset do deklarace UserControl v Page.xaml dopsat řádek, který vidíte níže. Díky tomu bude moct Page.xaml přistupovat například právě k User Controlu StoryDetailsView (proto v kódu výše ta syntaxe DiggKlient:StoryDetailsView):

<UserControl x:Class="DiggKlient.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:DiggKlient="clr-namespace:DiggKlient" >
<!-- Úprava ListBoxu v Page.xaml-->
<ListBox x:Name="StoriesList" Grid.Row="1" SelectionChanged="StoriesList_SelectionChanged" >
// Handler události SelectionChanged v Page.xaml.cs
private void StoriesList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    DetailsView.Visibility = Visibility.Visible;
}

A základ máme hotový! Zkusíme teď aplikaci spustit a kliknout na libovolnou položku v ListBoxu, zobrazí se nám toto:

Předávání dat

Zatím je to nuda &cash; modrá plocha a na ní tlačítko. V této kapitolce s tím pohneme a okno naplníme daty. Základem je vůbec zjistit, na kterou položku uživatel klikl a co obsahuje. Toho docílíme tím, že uvnitř handleru události SelectionChanged získáme hodnotu vlastnosti SelectedItem. Pak nastavíme datový kontext na získanou „DiggStory“, čímž můžeme přistupovat ke všem vlastnostem kliknuté položky i z okna StoryDetailsView:

private void StoriesList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    DiggStory story = (DiggStory) StoriesList.SelectedItem;

    DetailsView.DataContext = story;
    DetailsView.Visibility = Visibility.Visible;
}

Pokud teď budeme chtít v okně zobrazit například hodnotu vlastnosti Title, stačí následovně upravit StoryDetailsView.xaml:

<UserControl x:Class="DiggKlient.StoryDetailsView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
    <Grid>
        
        <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0.765" Fill="#FF8A8A8A" />
        
        <Border CornerRadius="30" Background="#FF5C7590" Width="600" Height="250" >
            <StackPanel>
                <TextBlock Text="{Binding Title}" FontSize="28" HorizontalAlignment="Center" Margin="10" />
                <Button Content="Zavřít" Width="100" Height="50" Click="CloseBtn_Click" />
            </StackPanel>
        </Border>

    </Grid>
</UserControl>

V okně se teď bude zobrazovat název zprávy:

Ostatní binding a úpravy vzhledu

Zbytek informací si už určitě zvládnete do okna doplnit sami, kdo chce sám, může článek teď zavřít a udělat si to za domácí úkol, ostatní, kteří chtějí mít vše stejně jako v článku, čtěte dál. Na následujících kódech si všimněte, že už nejsou potřeba žádné změny v C# kódu, stačí jen patřičně nastavit atributy Text, resp. Source a je to.

<!-- StoryDetailsView.xaml -->
<UserControl x:Class="DiggKlient.StoryDetailsView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
    <Grid>
        
        <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0.765" Fill="#FF8A8A8A" />
        
        <Border CornerRadius="30" Background="#FF5C7590" Width="600" Height="250" >
            <StackPanel Margin="5, 7, 0, 5">
                <!-- Tlačítko teď bude vpravo nahoře -->
                <Button Content="Zavřít" Click="CloseBtn_Click" Style="{StaticResource CloseButton}" />
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="20"/>
                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="85"/>
                        <ColumnDefinition Width="380" />
                        <ColumnDefinition Width="100" />
                    </Grid.ColumnDefinitions>

                    <!-- Nadpis jako odkaz -->
                    <HyperlinkButton Content="{Binding Title}"  NavigateUri="{Binding HrefLink}" Style="{StaticResource TitleLink}" />

                    <!-- Vlevo: Žluté políčku s počtem "diggů"-->
                    <StackPanel Style="{StaticResource DiggPanelDetail}" >
                        <TextBlock Text="{Binding NumDiggs}" Style="{StaticResource NumDigsBlock}" />
                        <TextBlock Text="diggy" Style="{StaticResource NumDigsSubBlock}" />
                    </StackPanel>

                    <!-- Uprostřed: Popis -->
                    <TextBlock Text="{Binding Description}" Style="{StaticResource DescriptionBlock}"/>

                    <!-- Vpravo: Miniatura -->
                    <Image Source="{Binding ThumbNail}" Style="{StaticResource DetailsThumbNailPreview}"/>

                    <!-- Uprostřed dole: Detaily o autorovi -->
                    <StackPanel Style="{StaticResource SubmitDetails}">
                        <TextBlock Text="Od: " Style="{StaticResource PosterBlock}"/>
                        <TextBlock Text="{Binding UserName}" Style="{StaticResource PosterBlock}" />
                    </StackPanel>
                </Grid>

            </StackPanel>
        </Border>

    </Grid>
</UserControl>
<!-- Nové styly v App.xaml-->        
<Style x:Key="DiggPanelDetail" TargetType="StackPanel">
    <Setter Property="Margin" Value="10"/>
    <Setter Property="Width" Value="55"/>
    <Setter Property="Height" Value="55"/>
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFFFF098"/>
                <GradientStop Color="#FFFFF9D4" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Grid.Row" Value="1"/>
    <Setter Property="Grid.Column" Value="0"/>
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="VerticalAlignment" Value="Top"/>

</Style>
        
<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>

<Style x:Key="StoryDetailContent" TargetType="StackPanel">
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="VerticalAlignment" Value="Stretch"/>
</Style>

<Style x:Key="TitleLink" TargetType="HyperlinkButton">
    <!--<Setter Property="TextWrapping" Value="Wrap"/>-->
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="FontSize" Value="16"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Width" Value="500"/>

    <Setter Property="Grid.Row" Value="0"/>
    <Setter Property="Grid.Column" Value="1"/>
    <Setter Property="Grid.ColumnSpan" Value="2"/>
</Style>

<Style x:Key="DescriptionBlock" TargetType="TextBlock">
    <Setter Property="TextWrapping" Value="Wrap"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="Foreground" Value="white"/>
    <Setter Property="Width" Value="380"/>
    <Setter Property="Grid.Row" Value="1"/>
    <Setter Property="Grid.Column" Value="1"/>
</Style>

<Style x:Key="PosterBlock" TargetType="TextBlock">
    <Setter Property="Foreground" Value="white"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
</Style>

<Style x:Key="DetailsThumbNailPreview" TargetType="Image">
    <Setter Property="Margin" Value="10, 0, 10, 0"/>
    <Setter Property="Width" Value="100"/>
    <Setter Property="Grid.Row" Value="1"/>
    <Setter Property="Grid.Column" Value="2"/>
</Style>

<Style x:Key="SubmitDetails" TargetType="StackPanel">
    <Setter Property="Grid.Row" Value="2"/>
    <Setter Property="Grid.Column" Value="1"/>
    <Setter Property="Orientation" Value="Horizontal"/>
</Style>

Na závěr ještě obrázek.

Funkcionalitu našeho Digg klienta už máme hotovou, v příštím díle už jen uděláme kosmetické změny. Dozvíte se například, jak docílíme přeměny obyčejného tlačítka na to hezké kulaté, které je vidět na obrázku výše.

Zdroj: http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-6-using-user-controls-to-implement-master-detail-scenarios.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.

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 Nový IT hráč na českém trhu

Nový IT hráč na českém trhu

V roce 2015 otevřela v Praze na Pankráci v budově City Tower své kanceláře společnost EPAM Systems (NYSE:EPAM), jejíž centrála se nachází v USA. Společnost byla založená v roce 1993 a od té doby prošla velkým vývojem a stále roste.

Obrázek ke článku České Radiokomunikace opět hledají nejlepší nápady pro internet věcí

České Radiokomunikace opět hledají nejlepší nápady pro internet věcí

České Radiokomunikace (CRA) pořádají druhý ročník CRA IoT Hackathonů. Zájemci z řad vývojářů a fanoušků moderních technologií mohou změřit své síly a během jediného dne sestrojit co nejzajímavější funkční prototyp zařízení, které bude komunikovat prostřednictvím sítě LoRa. CRA IoT Hackathony se letos uskuteční ve dvou fázích, na jaře a na podzim, v různých městech České republiky. Jarní běh se odstartuje 31. března v Brně a 7. dubna v Praze.

Obrázek ke článku Cloud computing je využíván stále intenzivněji

Cloud computing je využíván stále intenzivněji

Využívání cloud computingu nabývá na intenzitě. Jen v letošním roce vzroste podle analytiků trh se službami veřejného cloudu o 18 %, přičemž o téměř 37 % vzrostou služby typu IaaS. Růst o více než pětinu pak čeká služby poskytování softwaru formou služby, tedy SaaS. Aktuálním trendům v oblasti využívání cloudu se bude věnovat konference Cloud computing v praxi, která se koná 23. března. 2017 v pražském Kongresovém centru Vavruška na Karlově náměstí 5.

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ý