Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

Présentation

  • : Romagny13 - Du .NET,du pur .NET
  • Romagny13 - Du .NET,du pur .NET
  • : Cycle de progression Faire (quelque chose qui marche) -> comprendre ce que l’on fait/comment cela marche -> pousser plus loin les notions
  • Contact

Recherche

Articles Récents

7 mai 2014 3 07 /05 /mai /2014 01:47

Dans l'exemple j'affiche une liste de personnes rangée par pays .

-          Utiliser une CollectionViewSource ,

o   important la propriété IsSourcedGrouped

o   Source la source de base (exemple liste countries ici)

o   ItemsPath la liste des sous éléments(exemple la liste Persons)

-          ZoomedInView et ZoomedOutView j'affiche simplement une vue plus petite ici

 

<Page

    x:Class="WinRTBase.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:WinRTBase"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Page.Resources>

        <CollectionViewSource x:Name="groupedItemsViewSource"

                              Source="{Binding Countries}"

                              ItemsPath="Persons"

                              IsSourceGrouped="True" />

    </Page.Resources>

 

 

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

       

        <SemanticZoom x:Name="Zoom" Grid.Row="1" Margin="0,-3,0,0">

            <SemanticZoom.ZoomedInView>

                <GridView x:Name="gvCountries" ItemsSource="{Binding Source={StaticResource  groupedItemsViewSource}}"

                          AutomationProperties.AutomationId="ItemGridView"

                          AutomationProperties.Name="Grouped Items"

                          ItemTemplate="{StaticResource Standard250x250ItemTemplate}"

                          Margin="116,0,40,46">

                    <GridView.ItemsPanel>

                        <ItemsPanelTemplate>

                            <VirtualizingStackPanel Orientation="Horizontal"/>

                        </ItemsPanelTemplate>

                    </GridView.ItemsPanel>

                    <GridView.GroupStyle>

                        <GroupStyle>

                            <GroupStyle.HeaderTemplate>

                                <DataTemplate>

                                    <Grid Margin="20,0,0,0">

                                        <Button AutomationProperties.Name="Group Title"

                                                Content="{Binding CountryName}"

                                                Style="{StaticResource TextBlockButtonStyle}"

                                        />

                                    </Grid>

                                </DataTemplate>

                            </GroupStyle.HeaderTemplate>

                            <GroupStyle.Panel>

                                <ItemsPanelTemplate>

                                    <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,50,0" />

                                </ItemsPanelTemplate>

                            </GroupStyle.Panel>

                        </GroupStyle>

                    </GridView.GroupStyle>

                </GridView>

            </SemanticZoom.ZoomedInView>

            <SemanticZoom.ZoomedOutView>

                <GridView ItemsSource="{Binding Source={StaticResource  groupedItemsViewSource}}"

                          AutomationProperties.AutomationId="ItemGridView"

                          AutomationProperties.Name="Grouped Items"

                          ItemTemplate="{StaticResource MinimumItemTemplate}"

                          Margin="116,0,40,46">

                    <GridView.ItemsPanel>

                        <ItemsPanelTemplate>

                            <VirtualizingStackPanel Orientation="Horizontal"/>

                        </ItemsPanelTemplate>

                    </GridView.ItemsPanel>

                    <GridView.GroupStyle>

                        <GroupStyle>

                            <GroupStyle.HeaderTemplate>

                                <DataTemplate>

                                    <Grid Margin="20,0,0,0">

                                        <Button AutomationProperties.Name="Group Title"

                                                Content="{Binding CountryName}"

                                                Style="{StaticResource TextBlockButtonStyle}"

                                        />

                                    </Grid>

                                </DataTemplate>

                            </GroupStyle.HeaderTemplate>

                            <GroupStyle.Panel>

                                <ItemsPanelTemplate>

                                    <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,50,0" />

                                </ItemsPanelTemplate>

                            </GroupStyle.Panel>

                        </GroupStyle>

                    </GridView.GroupStyle>

                </GridView>

            </SemanticZoom.ZoomedOutView>

        </SemanticZoom>

    </Grid>

</Page>

DataTemplate

   <DataTemplate x:Key="Standard250x250ItemTemplate">

            <Grid Height="250" Width="250">

                <Grid.RowDefinitions>

                    <RowDefinition Height="190"/>

                    <RowDefinition Height="60"/>

                </Grid.RowDefinitions>

                <Border Background="{StaticResource ListViewItemCheckSelectingThemeBrush}" Grid.Row="0">

                    <Image Source="{Binding Image}" Stretch="UniformToFill" Margin="20"/>

                </Border>

                <StackPanel Grid.Row="1">

                    <TextBlock Text="{Binding FullName}" Margin="20"/>

                </StackPanel>

            </Grid>

        </DataTemplate>

        <DataTemplate x:Key="MinimumItemTemplate">

            <Grid Height="100" Width="100">

                <Grid.RowDefinitions>

                    <RowDefinition Height="80"/>

                    <RowDefinition Height="20"/>

                </Grid.RowDefinitions>

                <Border Background="{StaticResource ListViewItemCheckSelectingThemeBrush}" Grid.Row="0">

                    <Image Source="{Binding Image}" Stretch="UniformToFill" Margin="5"/>

                </Border>

                <StackPanel Grid.Row="1">

                    <TextBlock Text="{Binding FullName}" Margin="5"/>

                </StackPanel>

            </Grid>

        </DataTemplate>

Models

    public class Person

    {

        public string FullName { get; set; }

        public string Image { get; set; }

 

    }

    public class Country

    {

        public string CountryName { get; set; }

        public IList<Person> Persons { get; set; }

 

    }

 

Le service contient une méthode permettant de renvoyer une liste de pays , avec pour chaque quelques personnes .

 

ViewModel

public class CountryListViewModel 

    {

        public ObservableCollection<Country> Countries { get; set; }

 

        private CountryService countryService;

 

        public CountryListViewModel()

        {

            countryService = new CountryService();

            Countries = new ObservableCollection<Country>(countryService.All());

        }

    }

Et dans le code behind de la page il suffit de définir le DataContext

DataContext = new CountryListViewModel();

 

Pour dézoomer (ctrl + "-")

zoom1.png

 

Ressources

http://blog.loicrebours.fr/2012/05/13/developper-application-windows8-introduction/

http://www.jonathanantoine.com/2012/03/05/winjs-out-of-the-box-available-icons/


Partager cet article

Repost 0
Published by Romagny13 - dans WinRT
commenter cet article

commentaires