none
[UWP] Image Gallery with Flipview

    Question

  • I want to create a gallery image on the first page contains a thumbnail for that category and when thumbnail is selected, it will open the image and description of the selected image in flipview (can be swipe to the right and to the left when thumbnail is selected for the image before and after). I have difficulties when applying it into flipview.

    Code: MainPage XAML

    <GridView
                x:Name="itemGridView"
                AutomationProperties.AutomationId="ItemGridView"
                AutomationProperties.Name="Grouped Items"
                Grid.RowSpan="3"
                Padding="116,137,40,46"
                ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
                SelectionMode="None"
                IsSwipeEnabled="false"
                IsItemClickEnabled="True"
                ItemClick="ItemView_ItemClick" Background="#FF6996D1" >
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <Grid HorizontalAlignment="Left" Width="240" Height="180">
                            <Border>
                                <Image Source="{Binding ImagePath}" Stretch="Uniform" AutomationProperties.Name="{Binding Title}"/>
                            </Border>
                        </Grid>
                    </DataTemplate>
                </GridView.ItemTemplate>
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <ItemsWrapGrid GroupPadding="0,0,70,0"/>
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
            </GridView>

    MainPage:

    public MainPage()
            {
                this.InitializeComponent();
                Gallery();
            }
    
            private async void Gallery()
            {
                var sampleDataGroups = await DataItemSource.GetGroupsAsync();
                this.DefaultViewModel["Groups"] = sampleDataGroups;
            }
    
            void ItemView_ItemClick(object sender, ItemClickEventArgs e)
            {
                // Navigate to the appropriate destination page, configuring the new page
                // by passing required information as a navigation parameter
                var itemId = ((SampleDataItem)e.ClickedItem).UniqueId;
                this.Frame.Navigate(typeof(ItemDetailPage), itemId);
            }

    ItemDetailPage XAML:

    <Grid Grid.Row="1" x:Name="contentRegion" Background="#FF6996D1">
                <Image Source="{Binding ImagePath}" HorizontalAlignment="Left" Height="559" Margin="84,20,0,49" VerticalAlignment="Center" Width="732"/>
                <ScrollViewer x:Name="myScroll" VerticalScrollBarVisibility="Auto" Margin="852,60,50,91" VerticalScrollMode="Auto" HorizontalScrollBarVisibility="Auto">
                    <TextBlock Text="{Binding Description}" TextWrapping="Wrap" Height="2210" Width="425" FontSize="27" TextAlignment="Justify" />
                </ScrollViewer>
            </Grid>

    ItemDetailPage Code:

    public ItemDetailPage()
            {
                this.InitializeComponent();
                this.navigationHelper = new NavigationHelper(this);
                this.navigationHelper.LoadState += navigationHelper_LoadState;
            }
    
            private async void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
            {
                // TODO: Create an appropriate data model for your problem domain to replace the sample data
                var item = await DataItemSource.GetItemAsync((String)e.NavigationParameter);
                this.DefaultViewModel["Item"] = item;
            }
    
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
                navigationHelper.OnNavigatedTo(e);
            }
    
            protected override void OnNavigatedFrom(NavigationEventArgs e)
            {
                navigationHelper.OnNavigatedFrom(e);
            }

    How do I apply flipview on ItemDetailPage?

    Note: For more code detail you can view the sample



    • Edited by Priscillia Monday, September 19, 2016 5:21 AM
    Monday, September 19, 2016 5:19 AM

All replies

  • Hi Priscillia,

    On the ViewModel of your detailpage you should have a collection of all your pictures.
    Then you can bind this collection to a FlipView-control on your page. This can look somewhat like this:

                <FlipView ItemsSource="{Binding Items}" SelectedItem="{Binding Item}">
                    <FlipView.ItemTemplate>
                        <DataTemplate>
                            <Grid Grid.Row="1" x:Name="contentRegion" Background="#FF6996D1">
                                <Image Source="{Binding ImagePath}" HorizontalAlignment="Left" Height="559" Margin="84,20,0,49" VerticalAlignment="Center" Width="732"/>
                                <ScrollViewer x:Name="myScroll" VerticalScrollBarVisibility="Auto" Margin="852,60,50,91" VerticalScrollMode="Auto" HorizontalScrollBarVisibility="Auto">
                                    <TextBlock Text="{Binding Description}" TextWrapping="Wrap" Height="2210" Width="425" FontSize="27" TextAlignment="Justify" />
                                </ScrollViewer>
                            </Grid>
                        </DataTemplate>
                    </FlipView.ItemTemplate>
                </FlipView>
    

    Then, the only thing that is left to do is set the sleected item in your FlipView to the one the user has selected on the MainPage.

    Monday, September 19, 2016 9:06 AM
  • How to code on the detailpage? Is it only needs to XAML only?
    Can give a sample?
    Tuesday, September 20, 2016 1:27 AM