Question

我想在第一页上创建一个包含该类别缩略图的图库图像，当选择缩略图时，它将在flipview中打开所选图像的图像和描述（可以向右和向左滑动当为之前和之后的图像选择缩略图时）。将它应用到flipview时我遇到了困难。

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

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

Answer 1

要在ItemDetailPage上应用flipview，我们可以在“contentRegion”下添加FlipView，并将Image和ScrollViewer设置为FlipView的{{1}}，如下所示：

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; }中添加GetGroupByItemAsync(SampleDataItem item)方法，可以根据项目检索组。

DataItemSource

除此之外，我们还需要删除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>的完整XAML代码可能是：

ItemDetailPage

请注意，禁用FlipView的UI虚拟化可能会对性能产生负面影响，尤其是在存在大量图像时。如果您有大量图像，则可以尝试使用增量加载和数据虚拟化。

图像库与Flipview

1 个答案: