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

<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

从您的项目模板中删除宽度和高度属性，如下所示：

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