Question

我有一个包含自定义组的网格视图。在MyTemplateSelector : DataTemplateSelector中，我定义了要使用的模板。使用this post我创建了以下布局。 enter image description here 如何调整“新闻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>

Answer 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上的高度/宽度：

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

Answer 2

从ítem模板中删除宽度和高度属性，如下所示：

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

Answer 3

你的所有步骤都非常好。但是，如果您在datatemplate中设置项目宽度，项目高度;所有商品都有标准尺寸。项目模板必须灵活布局这种情况。此解决方案可以解决您的请求：

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可以是这样的：

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

的问候;）

如何在代码中更改网格视图中的项目布局

3 个答案: