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

Silverlight 2 Digg klient - 6. dílSilverlight 2 Digg klient - 6. 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 - 6. díl

Google       Google       20. 4. 2009       9 088×

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

Obrázek ke článku NopCommerce – dervisní vrstva – 3. díl

NopCommerce – dervisní vrstva – 3. díl

V minulém díle jsme se podívali trochu podrobněji na datovou vrstvu systému NopCommerce. V dnešním díle navážeme na předchozí znalosti, aby se naše pochopení systému zase o něco víc prohloubilo. Zaměříme se na dvě důležité oblasti a to Nop.Core projekt, který udržuje nejen doménu, ale obsahuje i infrastrukturní prvky. Dále se podíváme na projekt Nop.Service, který obsahuje obchodní logiku.

Reklama
Reklama
Obrázek ke článku První český hackathon ve vlaku inspirovaly služby jako  Tinder, Airbnb nebo Uber

První český hackathon ve vlaku inspirovaly služby jako Tinder, Airbnb nebo Uber

Patnáct set kilometrů, cesta přes dva státy, šestnáct hodin programování a přísun energy drinků, tak by se dal shrnout unikátní hackathon ve vlaku pořádaný Kiwi.com. Z Prahy do Košic a zpět se svezlo celkem 13 týmů, každý s originálním nápadem. Hlavní výhru, voucher na letenky v hodnotě 2 500 EUR, si v Praze převzal tým až z Ukrajiny.

Obrázek ke článku Gamifikace nakupování dorazila i do České republiky

Gamifikace nakupování dorazila i do České republiky

Zákazníci zejména retailových společností jsou často znuděni klasickými věrnostními či motivačními programy. Většinou z toho důvodu, že jsou jeden jako druhý a nepřináší nic nového. Ale i v České republice se projevují zahraniční trendy, nedávno zde totiž vstoupila na trh a rychle se uchytila nová platforma kombinující to nejlepší z věrnostních a motivačních programů, která navíc využívá prvky gamifikace – Rondo.cz. Na hlavní milníky vývoje nálad a motivace zákazníků a nejnovější trendy se zaměřil Jan Hřebabecký, spoluzakladatel Rondo.cz

Celý článekGoogle2. listopadu 2017PR

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