Search code examples
c#xamluwpflipview

Image Gallery with Flipview

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

Solution

  • To apply flipview on ItemDetailPage, we can add FlipView under "contentRegion" and set the Image and ScrollViewer as FlipView's ItemTemplate like following:

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

    And in code-behind, set the data source like following:

    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);
    var group = await DataItemSource.GetGroupByItemAsync(item);
    this.DefaultViewModel["Group"] = group;
    this.DefaultViewModel["Item"] = item;
}

    Here I add a GetGroupByItemAsync(SampleDataItem item) method in DataItemSource which can retrieve the group according to the item.

    public static async Task<SampleDataGroup> GetGroupByItemAsync(SampleDataItem item)
{
    await _DataItemSource.GetSampleDataAsync();
    // Simple linear search is acceptable for small data sets
    var matches = _DataItemSource.Groups.Where(group => group.Items.Contains(item));
    if (matches.Count() == 1) return matches.First();
    return null;
}

    Besides these, we also need to remove DataContext="{Binding Item}" form root Grid and put in in <Grid Background="#FF6996D1" DataContext="{Binding Item}">.

    After this, the FlipView should be able to work. However here is a strange behavior, if we select the second or third image, the previous image in flip view won't show like following
    enter image description here

    We are investigating on this issue. As a workaround, we can disable FlipView's virtualization by changing its ItemsPanel like:

    <FlipView.ItemsPanel>
    <ItemsPanelTemplate>
        <StackPanel Orientation="Horizontal" />
    </ItemsPanelTemplate>
</FlipView.ItemsPanel>

    The complete XAML code of ItemDetailPage might like:

    <Page x:Class="ImageGalerry.ItemDetailPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:common="using:ImageGalerry.Common"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:data="using:ImageGalerry.Data"
      xmlns:local="using:ImageGalerry"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      DataContext="{Binding DefaultViewModel,
                            RelativeSource={RelativeSource Self}}"
      mc:Ignorable="d">

    <Grid d:DataContext="{Binding Groups[0].Items[0], Source={d:DesignData Source=/DataModel/DataItem.json, Type=data:DataItemSource}}" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Grid.RowDefinitions>
            <RowDefinition Height="140" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!--  Back button and page title  -->
        <Grid Background="#FF6996D1" DataContext="{Binding Item}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1366" />
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton"
                    Margin="39,59,0,0"
                    VerticalAlignment="Top"
                    AutomationProperties.AutomationId="BackButton"
                    AutomationProperties.ItemType="Navigation Button"
                    AutomationProperties.Name="Back"
                    Command="{Binding NavigationHelper.GoBackCommand,
                                      ElementName=pageRoot}"
                    Style="{StaticResource NavigationBackButtonNormalStyle}" />
            <TextBlock x:Name="pageTitle"
                       Margin="120,40,30,40"
                       VerticalAlignment="Top"
                       IsHitTestVisible="false"
                       Style="{StaticResource HeaderTextBlockStyle}"
                       Text="{Binding Title}"
                       TextWrapping="NoWrap" />
            <!--<MediaElement x:Name="mediaplayer" Source="images/ost.mp3" AudioCategory="BackgroundCapableMedia" />
            <Button x:Name="PlayButton" Content="Stop" Click="PlayButton_Click" Margin="1274,72,0,30" />-->
        </Grid>

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

    Please note that disabling UI virtualization for FlipView may negatively impact performance especially when there are a lot of images. If you have a lot of images, you can try to use incremental loading and data virtualization.