1

カスタム グループを含むグリッド ビューがあります。で、MyTemplateSelector : DataTemplateSelector使用するテンプレートを定義します。この投稿を使用して、次のレイアウトを作成しました。 ここに画像の説明を入力 「ニュース 1」の最初のアイテムのサイズを変更して、利用可能なコンテンツ全体を埋めるにはどうすればよいですか?

ここに私のグリッドのコードがあります:

class ResizableGridView : GridView
    {
        protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
        {
            var viewModel = item as IResizable;

            if (viewModel != null && viewModel.Width != 0 && viewModel.Height != 0)
            {
                element.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, 2);
                element.SetValue(VariableSizedWrapGrid.RowSpanProperty, 2);
            }

            base.PrepareContainerForItemOverride(element, item);
        }
    }


 <resizeableGrid:ResizableGridView
            x:Name="itemGridView"
            AutomationProperties.AutomationId="ItemGridView"
            AutomationProperties.Name="Grouped Items"
            Grid.Column="3"
            Padding="116,137,40,46"
            ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
            ItemTemplateSelector="{StaticResource mySelector}"
            SelectionMode="None"
            IsSwipeEnabled="false"
            IsItemClickEnabled="True"
            ItemClick="ItemView_ItemClick">

そして、使用されるアイテム テンプレートのコード。

<DataTemplate x:Key="tmp170x170ItemTemplate">
            <Grid HorizontalAlignment="Left" Width="170" Height="170">
                <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
                    <Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
                </Border>
                <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                    <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="30" Margin="15,0,15,0"/>
                    <TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
                </StackPanel>
            </Grid>
        </DataTemplate>
4

3 に答える 3

1

次のように、静的グリッドのセルの高さと幅を設定することが重要です。

 <GroupStyle.Panel>
    <ItemsPanelTemplate>
          <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0" ItemHeight="10" ItemWidth="10"/>
    </ItemsPanelTemplate>
 </GroupStyle.Panel>

そして今、コードでは、ColumnSpan/RowSpan を設定しながら、カスタム サイズを簡単に設定できます。したがって、セルを 500 x 200 にしたい場合は、次のように設定する必要があります。

 element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.ColumnSpanProperty, 50);
 element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.RowSpanProperty, 20);

そして、DataTemplate の Height/Width を削除するには:

<DataTemplate x:Key="VariableSizeItemTemplate">
            <Grid HorizontalAlignment="Left">
                <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
                    <Image Source="{Binding Image}" Stretch="UniformToFill" HorizontalAlignment="Center" AutomationProperties.Name="{Binding Title}"/>
                </Border>
                <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                    <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="30" Margin="15,0,15,0"/>
                    <TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
                </StackPanel>
            </Grid>
        </DataTemplate>
于 2012-12-30T13:20:41.973 に答える
0

あなたのすべてのステップはとても良いです。ただし、データ テンプレートでアイテムの幅、アイテムの高さを設定すると、すべてのアイテムには標準サイズがあります。この場合、アイテム テンプレートは柔軟なレイアウトにする必要があります。この解決策はあなたの要求を解決します:

protected override void PrepareContainerForItemOverride(Windows.UI.Xaml.DependencyObject element, object item)
{
    base.PrepareContainerForItemOverride(element, item);

    try
    {
        dynamic _item = item;
        element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.ColumnSpanProperty, _item.ColSpan);
        element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.RowSpanProperty, _item.RowSpan);

    }
    catch
    {
        element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.ColumnSpanProperty, 1);
        element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.RowSpanProperty, 1);
    }
    finally
    {
        base.PrepareContainerForItemOverride(element, item);
    }
}

ColumnSpanProperty,RowSpanProperty; を使用しない場合。「if」コードの条件を変更します。

データテンプレートは次のようになります。

    <DataTemplate x:Key="NewsShowCaseItemTemplate">
        <Grid Margin="6">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="110" Height="110">
                <Image Source="{Binding Thumbnail}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
            </Border>
            <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
                <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextStyle}"/>
                <TextBlock Text="{Binding Summary}" Style="{StaticResource CaptionTextStyle}" />
            </StackPanel>
        </Grid>
</DataTemplate>

よろしく;）

于 2012-12-14T16:28:57.327 に答える
0

次のように、item テンプレートから幅と高さのプロパティを削除します。

<DataTemplate x:Key="tmp170x170ItemTemplate">
        <Grid HorizontalAlignment="Left">
            <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
                <Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
            </Border>
            <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="30" Margin="15,0,15,0"/>
                <TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
            </StackPanel>
        </Grid>
    </DataTemplate>
于 2012-12-14T15:54:42.603 に答える