이미지의 스크롤 가능한 수직 격자를 만드는 방법

Question

세로 축을 따라 스크롤 할 수있는 이미지의 목록을 만들어야합니다.

이미지의 링크는 string[] imagesLocation입니다.

타일을 클릭하면 이벤트 처리기는 string imageLocation을 알아야합니다.

그것은 다음과 같이 보일 말아야 :

내가 그리드에 그것을 만들 수 있었다. 그러나 스크롤 할 수 없게 만들었습니다.

LongListSelector을 사용할 팁을 찾았지만 작동하지 못했습니다.

업데이트 :

MainPage.xaml.cs를 :

namespace PhoneApp1 
{ 
    public partial class MainPage : PhoneApplicationPage 
    { 
     public MainPage() 
     { 
      InitializeComponent(); 
      ContentPanel.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Auto }); 
      ContentPanel.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength() }); 
      ContentPanel.RowDefinitions.Add(new RowDefinition() { Height = new GridLength() }); 
      ContentPanel.Children.Add(new TextBlock() { }); 
      for (int i = 0; i < 3; i++) 
      { 
       for (int j = 0; j < 5; j++) 
       { 
        Image MyImage1 = new Image(); 
        MyImage1.SetValue(Grid.ColumnProperty, i); 
        MyImage1.SetValue(Grid.RowProperty, j); 

        ImageSource src = new BitmapImage(new Uri(string.Format("Assets/ApplicationIcon.png"), UriKind.RelativeOrAbsolute)); 

        MyImage1.Source = src; 

        ContentPanel.Children.Add(MyImage1); 
       } 
      } 
     } 
    } 
} 

MailPage.xaml :

<phone:PhoneApplicationPage 
    x:Class="PhoneApp1.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" 
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" 
    FontFamily="{StaticResource PhoneFontFamilyNormal}" 
    FontSize="{StaticResource PhoneFontSizeNormal}" 
    Foreground="{StaticResource PhoneForegroundBrush}" 
    SupportedOrientations="Portrait" Orientation="Portrait" 
    shell:SystemTray.IsVisible="True"> 
    <Grid x:Name="LayoutRoot" Background="Transparent"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="*"/> 
     </Grid.RowDefinitions> 
     <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> 
      <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/> 
      <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> 
     </StackPanel> 
     <Grid Grid.Row="1" x:Name="ContentPanel"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="*"/> 
      </Grid.RowDefinitions> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="160"></ColumnDefinition> 
       <ColumnDefinition Width="160"></ColumnDefinition> 
       <ColumnDefinition Width="160"></ColumnDefinition> 
      </Grid.ColumnDefinitions> 

     </Grid> 
    </Grid> 

</phone:PhoneApplicationPage> 

Answer 1

나는 당신이 시도 할 수있는 쉬운 솔루션의 생각 . 는 Panel 먼저 삽입 한 후 panel

panel 내부의 격자를 생성하기 그냥 True

panel.AutoScroll = "True"; 

WrapPanel가 수직 또는 물건을 레이아웃에 좋은 곳입니다 해당 설정해야 AutoScroll라는 속성이 있습니다 컨테이너의 가장자리에 도달 할 때까지 가로 방향으로 이동 한 후 다음 열이나 행으로 이동하십시오. 하지만 유감스럽게도 WrapPanel은 (는) Windows Store 앱 (범용 앱)에서 더 이상 지원되지 않습니다.

UniversalWrapPanel은 WrapPanel 레이아웃의 대안입니다.

이

당신이 UniversalWrapPanel를 얻을 수 Visual Studio

최선을 다하고 고려하고있다, 이것은 당신의 참조에 DLL을 추가 할 것입니다, 패키지 관리자로 이동 찾아 패키지 UniversalWrapPanel를 설치합니다.

그런 MainPage.xaml을 열고 XAML에 네임 스페이스를 추가합니다

xmlns:UniversalWrapPanel="using:Gregstoll"