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.
Vytvořte si vlastní webové stránky. Snadno, rychle a levně přes Saywebpage.com
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       9 977×

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 Zavádění Master Data Management v praxi

Zavádění Master Data Management v praxi

Předchozím článku jsme si vysvětlili, co jsou to Master Data, kdy je firma obvykle začíná řešit, v jakých krocích postupovat a jak nám může pomoci zvláštní nástroj pro evidenci Master dat. V tomto článku se podíváme na dvou příkladech, jak prakticky začít Master data řešit.

1. Nová Master Data, která potřebujeme někde spravovat
2. Zmapování existujících Master dat a určení jejich vlastníků

Reklama
Reklama
Obrázek ke článku 5 nesprávných důvodů, proč dělat vlastní mobilní aplikaci

5 nesprávných důvodů, proč dělat vlastní mobilní aplikaci

Myslíte si, že máte skvělý nápad na byznys apku a znáte všechno, co potřebujete? Možná vám vývoj software na míru rozmluví Vláďa Skoumal, z firmy studio SKOUMAL vyvijející mobilní aplikace 5.11. 2019 v 18:00 v Impact Hub Praha nebo tento jeho článek.


 

Obrázek ke článku Ericsson ConsumerLab Report: rozšířená realita je další úrovní gamingu

Ericsson ConsumerLab Report: rozšířená realita je další úrovní gamingu

Celkem 66 % uživatelů zajímá rozšířená realita v oblasti gamingu. Mezi nimi je i 35 % těch, kteří jinak hry nehrají.
Pro téměř 50 % respondentů by bylo zajímavé zapojení virtuální objektů do reálného světa. Objekty by zůstaly tam, kde je při hře „umístili“.
Až 43 % uživatelů láká využití rozšířené reality ve sportu

Obrázek ke článku Instalace nejnovější verze Apache 2.4, PHP 7.3, MariaDB 10.3 a Memcached na Windows 10

Instalace nejnovější verze Apache 2.4, PHP 7.3, MariaDB 10.3 a Memcached na Windows 10

Buďte při vývoji efektivní! Pomocí tohoto návodu během chvíle vytvoříte ze svého počítače lokální webový server. Vyzbrojíte jej vším, co budete při práci potřebovat: Apache 2.4, PHP 7.3, MariaDB 10.3 a Memcached. Je to plná polní pro webové vývojáře s Windows 10. Navíc poradíme, jak mít na localhostu více projektů pomocí VirtualHost.

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