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

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
Laser Game Brno

Silverlight 2 Digg klient - 6. díl

Google       Google       20. 4. 2009       9 340×

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 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ý