Flipviewの画像ギャラリー

Question

最初のページにギャラリー画像を作成したいのですが、そのカテゴリのサムネイルが含まれています。サムネイルを選択すると、選択した画像の画像と説明が右にスワイプできます画像のサムネイルが前後に選択されているときは左に表示されます）。私はフリップビューにそれを適用する際に困難があります。

コード： メインページ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> 

メインページ：

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コード：

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); 
} 

ItemDetailPageでフリップビューを適用するにはどうすればよいですか？

注：ItemDetailPageにflipviewを適用するにはsample

Answer 1

を表示することができますより多くのコードの詳細については 、私たちは「contentRegion」の下FlipViewを追加し、次のようにFlipViewのItemTemplateとしてImageとScrollViewerを設定することができます。

<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> 

そして、コードビハインドでは、次のようなデータソース設定：

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; 
} 

を

ここでは、DataItemSourceにGetGroupByItemAsync(SampleDataItem 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; 
} 

は、これらに加えて、我々はまた、DataContext="{Binding Item}"フォームルートGridを削除し、<Grid Background="#FF6996D1" DataContext="{Binding Item}">に入れる必要があります。

この後、FlipViewが機能するはずです。しかし、ここで奇妙な行動は、私たちは第二または第三の画像を選択した場合、フリップビューで前の画像は、私たちはこの問題について調査して

を次のように表示されません、です。

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

ItemDetailPageの完全なXAMLコードが好むかもしれない：：回避策として、私たちはそのItemsPanelのように変更することでFlipViewの仮想化無効にすることができます

<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> 

をFlipViewのためのUIの仮想化を無効にするとマイナスの場合がありますのでご了承ください特に多くの画像がある場合には、衝撃性能。イメージがたくさんある場合は、増分ロードとデータ仮想化を使用できます。