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 13:14

On a un GridView et une ListView cachée(Visibility="Collapsed") .On utilise un VisualStateManager pour adapter la page . On a donc un GridView ... et une ListView lorsque la vue est "snapped" .

  <Page.Resources>

        <CollectionViewSource x:Name="groupedItemsViewSource"

                              Source="{Binding Countries}"

                              ItemsPath="Persons"

                              IsSourceGrouped="True" />

    </Page.Resources>

 

 

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

       <!-- 1 GridView --> 

        <GridView x:Name="gv" 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>

       <!-- 2 ListView cachée --> 

        <ListView x:Name="lv"  ItemsSource="{Binding Source={StaticResource  groupedItemsViewSource}}" Visibility="Collapsed">

            <ListView.ItemTemplate>

                <DataTemplate>

                    <Grid Margin="6">

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition Width="Auto"/>

                            <ColumnDefinition Width="*"/>

                        </Grid.ColumnDefinitions>

                        <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="60" Height="60">

                            <Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>

                        </Border>

                        <StackPanel Grid.Column="1" Margin="10,0,0,0">

                            <TextBlock Text="{Binding FullName}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" MaxHeight="40"/>

                        </StackPanel>

                    </Grid>

                </DataTemplate>

            </ListView.ItemTemplate>

            <ItemsControl.ItemContainerStyle>

                <Style TargetType="FrameworkElement">

                    <Setter Property="Margin" Value="0,0,0,10"/>

                </Style>

            </ItemsControl.ItemContainerStyle>

        </ListView>

       

       <!-- 3 VisualStateManager -->          

        <VisualStateManager.VisualStateGroups>

            <VisualStateGroup x:Name="ApplicationViewStates">

                <VisualState x:Name="FullScreenLandscape" />

                <VisualState x:Name="Filled" />

                <VisualState x:Name="FullScreenPortrait" />

                <VisualState x:Name="Snapped" >

                    <Storyboard>

                         <!--cache le gridView et affiche la listView-->

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="gv" Storyboard.TargetProperty="Visibility">

                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="lv" Storyboard.TargetProperty="Visibility">

                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

                        </ObjectAnimationUsingKeyFrames>

                    </Storyboard>

                </VisualState>

            </VisualStateGroup>

        </VisualStateManager.VisualStateGroups>

    </Grid>

 Code behind

         public MainPage()

        {

            this.InitializeComponent();

 

            DataContext = new CountryListViewModel();   

            Window.Current.SizeChanged += Current_SizeChanged;

        }

 

        private  void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)

        {

           string viewValue = ApplicationView.Value.ToString();

           VisualStateManager.GoToState(this, viewValue, false);

        }

 

Autre possibilité (ApplicationView étant «  obsolète »)

        private  void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)

        {

 

            if (e.Size.Width < 550)

            {

                VisualStateManager.GoToState(this, "Snapped", false);

            }

            if (e.Size.Width > 550)

            {

                VisualStateManager.GoToState(this, "FullScreenLandscape", false);

            }

        }

 

 

snapp1

 

http://msdn.microsoft.com/en-us/library/windows/apps/hh465349.aspx

Partager cet article

Repost 0
Published by Romagny13 - dans WinRT
commenter cet article

commentaires