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
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Laser Game Ostrava

Silverlight 2 Digg klient - 6. díl

Google       Google       20. 4. 2009       10 248×

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
Jakub studuje informatiku na FIT ČVUT, jeho oblíbenou platformou je .NET.
Web     Twitter     Facebook     LinkedIn    

Nové články

Obrázek ke článku Open source neznamená „zdarma“

Open source neznamená „zdarma“

Mnoho společností po celém světě, univerzity, vládní organizace a jim podobné dnes používají open source technologie k vytvoření vlastních webových stránek. Tyto technologie se používají čím dál tím více. Jednoduše proto, že je řada poskytovatelů nabízí zcela zdarma. Je to ale opravdu to správné řešení pro všechny? 

Reklama
Reklama
Obrázek ke článku Rádi sledujete obsah streamovacích služeb? Dejte si pozor na pirátské verze Mandaloriana a Netflixu

Rádi sledujete obsah streamovacích služeb? Dejte si pozor na pirátské verze Mandaloriana a Netflixu

Streamovací služby a jejich obsah se v uplynulých měsících těšily velkému zájmu uživatelů, kteří se při pobytu v karanténě chtěli zabavit sledováním filmů a seriálů. Toho bleskově zneužili hackeři, kteří pod názvy oblíbených streamovacích platforem a jejich obsahu maskovali škodlivé soubory. Nejčastěji používali jako návnadu Netflix a seriál The Mandalorian. 

Obrázek ke článku Bionické ruce mění lidem životy. Konference INSPO ukázala nejnovější technologie

Bionické ruce mění lidem životy. Konference INSPO ukázala nejnovější technologie

Bionické myoprotézy rukou jsou ukázkou pokroku, který udělaly za posledních dvacet let technologie pro lidi se zdravotním postižením. Dnešní protézy, které fungují na principu snímání svalových vzorců, umožňují uživatelům operovat s křehkými předměty či provádět úkony složité na kooperaci různých částí těla – ať už jde o hru na hudební nástroje, zavazování tkaniček, nebo třeba pití ze skleničky. Na 20. ročníku konference INSPO se budou zájemci moci naživo seznámit nejen s takzvanou myorukou, ale rovněž s jedním z jejích uživatelů. 

Obrázek ke článku Využití .htaccess na malém webu

Využití .htaccess na malém webu

V dnešní době existuje spoustu cms, které mnohdy ale vůbec nepotřebujeme a stačila by nám pouze základní funkčnost k úpravě url, přesměrování. K tomuto účelu je ideální .htaccess soubor, který nám se všemi těmato úpravami umí pomoct.

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