Flipview가 포함 된 이미지 갤러리

Question

첫 번째 페이지의 갤러리 이미지를 만들고 싶습니다. 해당 카테고리의 미리보기 이미지가 포함되어 있으며 미리보기 이미지를 선택하면 선택한 이미지의 이미지와 설명이 오른쪽으로 스 와이프됩니다. 이미지의 썸네일이 선택 될 때 왼쪽과 왼쪽). 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에서 플립보기를 적용 할 수 있습니까? 당신이이 sample

Answer 1

ItemDetailPage에 flipview을 적용하려면, 우리는 다음과 같이 FlipView의 ItemTemplate로 Image 및 ScrollViewer을 "contentRegion"에서 FlipView를 추가하고 설정할 수 있습니다 볼 수 있습니다 더 많은 코드의 세부 사항에 대한 :

주

<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 가상화 할 수있다 부정적인를 특히 많은 이미지가있을 때 충격 성능. 이미지가 많은 경우 증분로드 및 데이터 가상화를 사용할 수 있습니다.