0

GridView (Windows 8 アプリ) では、次のアイテム テンプレートを使用してアイテムを表示します。

<DataTemplate x:Key="ProjectTemplate">
    <Grid Width="500" Background="MidnightBlue">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" Text="{Binding Name}" Margin="20, 10" Style="{StaticResource SubheaderTextStyle}" TextWrapping="Wrap" Foreground="WhiteSmoke"/>
        <StackPanel Grid.Row="1" Orientation="Horizontal" Margin="20, 10, 10, 10" Background="MidnightBlue">
            <TextBlock Text="Last Modified :" Style="{StaticResource TitleTextStyle}" Foreground="WhiteSmoke"/>
            <TextBlock Text="{Binding LastModified}" Margin="5, 0, 0, 0" Style="{StaticResource TitleTextStyle}" Foreground="WhiteSmoke"/>
        </StackPanel>
        <TextBlock Grid.Row="2" Text="{Binding VideoPath}" Margin="20, 10, 10, 10" Style="{StaticResource TitleTextStyle}" TextWrapping="Wrap" Foreground="WhiteSmoke"/>
    </Grid>
</DataTemplate>

したがって、主に、これは、対象のアイテムのGridName、LastModified、および VideoPath プロパティにバインドされたデータを示す 3 つの行です。アイテムは正しく取得され、バインディングは問題ありません。私の問題はもっと... デザインの問題です。ProjectGridView

例を次に示します。

ここに画像の説明を入力

お気付きのように、最初の 2 つの項目は問題ないように見えます。これらにはName、LastModified日付とVideoPath表示があります。一方、3 番目の項目は で示されているよりも長いNameであり、示されてTextBlockいるTextWrapping=true場合VideoPathは が省略されています。の 3 番目のテキストブロックにVideoPathも TextWrapping が設定されています。

完全なコンテンツを表示する必要に応じて、個々のアイテムのグリッドを拡大する方法はありますか? テンプレートにどのような変更を加える必要がありますか?

編集

Height を明示的に設定したくなかったのは、その場合、GridViewItems (テキストブロックのテキストが 1 行に十分短い) が大きくなり、... 空の領域があるためです (説明が悪くて申し訳ありませんが、上手く表現できる言葉が見つからない…）

4

1 に答える 1

0

可変サイズのアイテムをたくさん検索し、多くの複雑なソリューションを見つけましたが、非常に簡単なソリューションに出会いました。

WinRT XAML ToolkitWrapPanel私の場合、すべての仕事をしたこの素敵なものがあります。Gridテンプレートの の代わりに、 を使用WrapPanelし、GridView の場合ItemPanelTemplateも同様に使用しました。

<GridView.ItemsPanel>
    <ItemsPanelTemplate>
        <toolkit:WrapPanel Orientation="Vertical"/>
     </ItemsPanelTemplate>
</GridView.ItemsPanel>

結果は次のようになります。ここに画像の説明を入力

于 2013-08-10T20:17:22.320 に答える