1

ObservableCollectionにデータを取り込むメソッドがあります。このObservableCollectionはXAMLにバインドされており、画面に表示されます。しかし、現在、それは単に下向きに伸びており、次のように次々と画像が表示されます。 ご覧のとおり、3つの画像を表示すると、それ以上表示されず、途中で画像が切り取られます。

たとえば、1行に5枚ずつ、ユーザーが下にスクロールできるように、画像をグリッド形式で表示したいと思います。どうすればこれを達成できますか？私が欲しいものの例：

Google画像から。 静的な数の画像を使用すると、これはObservableCollectioutにバインドすることで簡単に実現できますが、私は迷子になります。

私が理解しているように、下向きに拡張することは「メトロ」/「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>

アップデート ：

WrapGridを追加しましたが、次のように正しくレンダリングされません。

WrapGridを追加しましたが、まだ正しくレンダリングされていません。

これが私が使用しているコードです：

  <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>

私はここで何を誤解しましたか？どうもありがとう。

アップデート ：

簡単なコード：

 <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>
4

1 に答える 1

4

WrapPanelにOrientation設定してを使用できますOrientation.Vertical。

このように、最初に最初の列を埋め、2番目の列にオーバーフローし、以下同様に右に拡張します。

ドキュメントも参照してください。

OrientationプロパティがHorizo​​ntalに設定されている場合、子コンテンツは最初に水平方向の行を形成し、必要に応じて行の垂直方向のスタックを形成します。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-11T12:30:42.980 に答える