圖片庫與Flipview

我想在第一頁上創建一個圖庫圖像包含該類別的縮略圖，當選擇縮略圖時，它將打開圖像和翻轉視圖中選定圖像的描述（可以向右滑動當在之前和之後的圖像中選擇縮略圖時向左移動）。將它應用到flipview時遇到困難。圖片庫與Flipview

代碼： XAML的MainPage

<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代碼：

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上應用flipview？

注：更多的代碼細節可以查看sample

來源

2016-09-16 Rose

要在ItemDetailPage申請flipview，我們可以「contentRegion」下添加FlipView並設置Image和ScrollViewer爲FlipView的ItemTemplate類似以下內容：

<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，如：

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

的ItemDetailPage完整的XAML代碼可能會喜歡：

<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虛擬化可能會負面尤其是在有很多圖像的情況下。如果你有很多圖像，你可以嘗試使用增量加載和數據虛擬化。

來源

2016-09-21 05:33:42

如何使用增量加載和數據虛擬化？ – Rose

@Rose請參閱[ListView和GridView數據虛擬化]（https://msdn.microsoft。（數據虛擬化示例）（https://github.com/Microsoft/Windows-universal-samples/） tree/master/Samples/XamlDataVirtualization）在GitHub上。 –

圖片庫與Flipview

回答

相關問題