使圖像的ObservableCollection在屏幕上顯示很好

我有一個方法來填充ObservableCollection。這個ObservableCollection綁定到我的XAML，並且它出現在屏幕上。然而，目前它只是向下延伸，接連像這樣一個形象： As you can see, after 3 images, it displays no more and cuts off the image halfway through. 使圖像的ObservableCollection在屏幕上顯示很好

我想會是在網格的方式顯示的圖像，用，例如，5％線，使用戶向下滾動。我怎麼能做到這一點？我想什麼一個例子：

From Google images. With a static number of images this is easy to accomplish, with a binding to an ObservableCollectiout, however, I am lost.

根據我的理解，它可能不會被認爲是「新城」 /「Windows 8應用的風格」，以向下延伸，如果是這樣，我怎麼會效仿功能顯示在圖像中，以便溢出向右延伸，讓您繼續向右滾動？

我此刻代碼：

<ItemsControl ItemsSource="{Binding Path=listOfImages}" 
     HorizontalContentAlignment="Stretch"> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
        <StackPanel VerticalAlignment="Center"> 
         <Image x:Name="images" Source="{Binding}" Visibility="Visible" Stretch="Fill" Width="200" Height="200"/> 
        </StackPanel> 
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
     </ItemsControl>

UPDATE：

我現在已經添加了一個WrapGrid，但它仍然呈現不正確，就像這樣：

I have now added a WrapGrid, but it is still rendering incorrectly, like so

這裏是我正在使用的代碼：

<ItemsControl ItemsSource="{Binding Path=listOfImages}" Grid.Column="1" Grid.Row="3" Grid.ColumnSpan="5" 
       HorizontalContentAlignment="Stretch"> 
        <ListView Height="Auto" Width="Auto"> 
          <ItemsPanelTemplate> 
           <WrapGrid Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="4" VerticalAlignment="Center" Orientation="Horizontal"> 
            <Image x:Name="images" Source="{Binding}" Visibility="Visible" Stretch="Fill" Width="200" Height="200"/> 
           </WrapGrid> 
          </ItemsPanelTemplate> 
        </ListView> 
       </ItemsControl>

我在這裏誤解了什麼？非常感謝。

UPDATE：

簡單代碼：

<ItemsControl ItemsSource="{Binding Path=listOfImages}"> 
           <WrapGrid Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="4" VerticalAlignment="Center" Orientation="Horizontal"> 
            <Image x:Name="images" Source="{Binding}" Visibility="Visible" Stretch="Fill" Width="200" Height="200"/> 
           </WrapGrid> 
        </ItemsControl>

來源

2013-01-11 Simon Kiely

您可以使用WrapPanel與Orientation設置爲Orientation.Vertical。

像這樣，它將首先填滿第一列，溢出到第二列等等，向右延伸。

又見文檔：

如果方向屬性設置爲橫向，子內容形式橫排第一，如果必要的表格行的垂直堆棧。如果「方向」屬性設置爲「垂直」，則子內容首先位於垂直列中，如果沒有足夠的空間，則會發生纏繞並添加水平尺寸中的其他列。

的WrapGrid您使用的是有點奇怪。它看起來像你必須這樣使用它：

<ItemsControl ItemsSource="{Binding Path=listOfImages}"> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <WrapGrid VerticalAlignment="Center" Orientation="Horizontal" /> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <Image Visibility="Visible" Stretch="Fill" Width="200" Height="200" 
        Source="{Binding}" /> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl>

來源

2013-01-11 12:30:42

非常感謝您的迴應。我試圖實現這一點，但遇到了一個問題。我已更新我的問題以反映這一點。再次感謝:) –

這看起來很不對。爲什麼當你只需要使用WrapPanel時，你在ItemsControl中嵌套一個ListView？ –

我已更新以顯示我現在正在使用的代碼，但它正在返回錯誤消息：「WrapGrid只能用於在ItemsControl中顯示項目。」...這對我來說沒有意義:) –

使圖像的ObservableCollection在屏幕上顯示很好

回答

相關問題