Windows 分组网格视图中的不同项目大小

我创建了一个带有项目模板和标题模板的分组GridView。它工作得很好，但我希望我的列表的第一篇文章有一个不同的模板（更大）。比如法语应用程序“LeMonde”。我不知道如何定义模板来实现这一点

这是我当前的xaml代码

<Page.Resources>
 <CollectionViewSource x:Name="cvs1" IsSourceGrouped="True" />
</Page.Resources>

<Grid Background="White">

    <GridView  x:Name="PicturesGridView" SelectionMode="None"
ItemsSource="{Binding Source={StaticResource cvs1}}"IsItemClickEnabled="True"  ItemClick="ItemView_ItemClick">
        <GridView.ItemTemplate>
            <DataTemplate>
                <StackPanel x:Name="RectanglesStackPanel" Margin="8" Orientation="Vertical" Width="242">

                    <Image Source="{Binding imageUrl}" Height="180"  Width="225"   Stretch="UniformToFill" />

                    <Border Background="Gray" Opacity="1" Width="225" Height="115">
                       <TextBlock Text="{Binding title}"
           Foreground="White" TextWrapping="Wrap" Width="215" FontSize="18" />
                    </Border>
                </StackPanel>
            </DataTemplate>
        </GridView.ItemTemplate>
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
        <GridView.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                         <Button  Click="Button_Click_1" Content="{Binding Key}" Foreground="Black" Background="White" FontSize="30" Margin="0,0,0,-10" ></Button>     
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
                <GroupStyle.Panel>
                    <ItemsPanelTemplate>
                        <VariableSizedWrapGrid Orientation="Vertical" />
                    </ItemsPanelTemplate>
                </GroupStyle.Panel>
            </GroupStyle>
        </GridView.GroupStyle>
    </GridView>


</Grid>

提前感谢：）

---

谢谢你，伊万。这对我帮助很大。但是，示例中提供的代码对于Windows 8似乎不是最新的。您对如何访问页面资源中定义的模板有何想法。FindResources方法不再存在。我尝试使用此代码，但没有成功：

 public class AuctionItemDataTemplateSelector : DataTemplateSelector
 {
    protected override DataTemplate SelectTemplateCore(object item, 
                                                  DependencyObject container)
    {
        FrameworkElement element = container as FrameworkElement;

        if (element != null && item != null && item is Article)
        {
            Article auctionItem = item as Article;

            DataTemplate mySmallTemplate = element.FindName("SmallTemplate") as DataTemplate;

            switch (auctionItem.isFirstItem)
            {
                case true:
                    return
                  element.FindName("BigTemplate") as DataTemplate;

                case false:
                    return
                   element.FindName("SmallTemplate") as DataTemplate;
            }
        }

        return null;
    }
}

---

“

您必须为第一个元素定义不同的ItemTemplate，然后为所有其他元素定义不同的ItemTemplate，而不是为GridView中的所有项目使用单个ItemTemplate

为此，必须定义远程ItemTemplate并使用ItemTemplateSelector来确定要使用的样式

---

您可以在这里找到更多信息：

我按照创建自定义DataTemplateSelector的方法，将所有需要的模板作为属性

namespace Helper
{
    public class CustomSampleDataTemplateSelector : DataTemplateSelector
    {
        public DataTemplate FirstDataTemplate { get; set; }

        public DataTemplate SecondDataTemplate { get; set; }

        protected override DataTemplate SelectTemplateCore(object item, 
                  DependencyObject container)
        {
            if (item is FirstItemType)
                return FirstDataTemplate ;
            if (item is SecondItemType)
                return SecondDataTemplate;
            else
                return FirstDataTemplate ;
        }
    }
}

现在您可以在XAML中直接使用它，如下所示：

声明资源：

<UserControl.Resources>
    <DataTemplate x:Key="myTemplate1">
        <Border Background="White">
            <TextBlock Text="{Binding Name}"
                       FontSize="40"
                       Foreground="Black"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center" />
        </Border>
    </DataTemplate>
    <DataTemplate x:Key="myTemplate2">
        <Border Background="Orange">
            <Grid>
                <Image Source="{Binding Image}"></Image>
                <TextBlock Text="{Binding ShopName}"
                           FontSize="64"
                           Foreground="LightBlue"
                           HorizontalAlignment="Center"
                           VerticalAlignment="Center" />
            </Grid>
        </Border>
    </DataTemplate>
    <Common:CustomSampleDataTemplateSelector x:Key="mySelector"
                                     FirstDataTemplate="{StaticResource myTemplate1}"
                                     SecondDataTemplate="{StaticResource myTemplate2}">
    </Common:CustomSampleDataTemplateSelector >
</UserControl.Resources>

使用它

<GridView  x:Name="PicturesGridView" ItemTemplateSelector="{StaticResource mySelector}">

---

就这些

谢谢。它实际上工作得很好，因为它使第一个项具有与另一个不同的模板。但这不是我想要的抱歉这是我的错我不清楚。 因为使用您的技术，网格视图中的项目大小始终相同。 假设我选择myTemplate1的网格宽度为400，myTemplate2的网格宽度为200。然后，如果我的第一个元素跟随myTemplate1，那么网格视图的所有元素的大小都将为400，即使其中的图像只有200

我希望获得本文中所述的结果：

所以我找到了我真正需要的VariableSizedWrapGrid，并重新实现了gridView的一个版本

不过，我会将您的答案标记为正确，因为它回答了我最初的问题：它允许在组网格视图中选择不同的项目大小

---

非常感谢您抽出时间，这对我帮助很大

您不应该在标题中添加“windows 8”之类的内容。这就是标签的用途。是的：

<GridView  x:Name="PicturesGridView" ItemTemplateSelector="{StaticResource mySelector}">