Xaml 如何在可变大小的WrapGrid周围放置边框？

这件事让我抓狂，我确信一定有一个直截了当的答案（我还没发现）

我有一个分组的gridview控件，它对分组面板使用VariableSizedWrapGrid。我的客户批准的设计包括每个组的顶部和底部边框。我想我可以做两件事中的一件：

指定VariableSizedWrapGrid上的边框；或

在GroupStyle.HeaderTemplate中创建一行，并将其应用于页脚

---

因此，由于VariableSizedWrapGrid继承自不支持border属性（仅将border添加为子元素）的Panel，并且GridView类不包含分组页脚属性，因此我似乎无法执行这两项操作。是否有方法将边框应用于VariableSizedWrapGrid？Xaml对我来说非常陌生，因为我通常专注于服务器端代码，而不是演示。

如果我正确理解了您的意思，那么您试图实现的目标是：

这是这方面的代码，它也应该与variablesizegrid一起使用。如果我理解错误，请添加更多详细信息和您已有的代码，以便我们可以看到如何最好地帮助您

<common:LayoutAwarePage
x:Name="pageRoot"
x:Class="App14.ItemsPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App14"
xmlns:data="using:App14.Data"
xmlns:common="using:App14.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Page.Resources>
    <CollectionViewSource x:Name="groups" IsSourceGrouped="true" />
</Page.Resources>
<Grid Style="{StaticResource LayoutRootStyle}">
    <Grid.Resources>
        <DataTemplate x:Key="groupTemplate">
            <Grid>
                <Border BorderBrush="White" BorderThickness="0,10" Padding="20">
                    <StackPanel >
                        <Border Background="DarkGreen" Padding="10" Margin="10">
                            <TextBlock Text="{Binding Name}"/>
                        </Border>
                        <Border Background="Yellow" Padding="10" Margin="10">
                            <Image Width="100" Height="100" Stretch="Uniform" Source="{Binding Image}"/>
                        </Border>
                    </StackPanel>
                </Border>
            </Grid>
        </DataTemplate>
    </Grid.Resources>
    <Grid.RowDefinitions>
        <RowDefinition Height="140"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <GridView
        x:Name="itemGridView"
        AutomationProperties.AutomationId="ItemsGridView"
        AutomationProperties.Name="Items"
        TabIndex="1"
        Grid.RowSpan="2"
        Padding="116,136,116,46"
        ItemsSource="{Binding Source={StaticResource groups}}"
        ItemTemplate="{StaticResource groupTemplate}">
        <GridView.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <Grid Margin="10">
                            <TextBlock Text='{Binding Key}' Foreground="White" FontSize="25" Margin="5" />
                        </Grid>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
            </GroupStyle>
        </GridView.GroupStyle>
    </GridView>
</Grid>

{ 公共密封部分类项目页：App14.Common.LayoutAwarePage { 公共项目 { this.InitializeComponent（）

groups.Source=GetAllGrouped（LoadCats（））；
}
公共IEnumerable GetAllGrouped（IEnumerable猫）
{
返回cats.OrderBy（x=>x.Name）.GroupBy（x=>x.Name）；
}
IEnumerable LoadCats（）
{
返回新列表
{
新的FakeCat{Name=“Naomi”，Image=“../Assets/cat1.jpg”}，
新的FakeCat{Name=“Naomi”，Image=“../Assets/cat2.jpg”}，
新的FakeCat{Name=“Peter”，Image=“../Assets/cat3.jpg”}，
新的FakeCat{Name=“Spencer”，Image=“../Assets/cat4.jpg”}，
};
}
}
公营假猫
{
公共字符串名称{get；set；}
公共字符串图像{get；set；}
公共int ItemSize{get；set；}
}

---

}问题解决了！我想我很难弄清楚是什么控制了组的模板，而不是实际的项目。我想把解决这个问题的功劳归功于我，但答案来自LinkedIn集团的一位成员。应用于GridView的GroupStyle的ContainerStyle时，以下样式有效：

<Style x:Key="GroupItemStyle1" TargetType="GroupItem">
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="GroupItem">
        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
        <Grid>
            <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
        <ContentControl x:Name="HeaderContent" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" Content="{TemplateBinding Content}" IsTabStop="False" Margin="{TemplateBinding Padding}" TabIndex="0"/>
        <Rectangle VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Height="1" Fill="White" Margin="5,0,15,0" />
        <ItemsControl x:Name="ItemsControl" IsTabStop="False" ItemsSource="{Binding GroupItems}" Grid.Row="1" TabIndex="1" TabNavigation="Once">
            <ItemsControl.ItemContainerTransitions>
                <TransitionCollection>
                    <AddDeleteThemeTransition/>
                    <ContentThemeTransition/>
                    <ReorderThemeTransition/>
                    <EntranceThemeTransition IsStaggeringEnabled="False"/>
                </TransitionCollection>
            </ItemsControl.ItemContainerTransitions>
        </ItemsControl>
        <Rectangle Grid.Row="1" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Height="1" Fill="White" Margin="5,0,15,0" />
        </Grid>
        </Border>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
</Style>

然后在GridView的XAML中：

<GridView.GroupStyle>
    <GroupStyle  HidesIfEmpty="True" ContainerStyle="{StaticResource GroupItemStyle1}">
        <GroupStyle.HeaderTemplate>
            <DataTemplate>
                <!-- Header Template here  -->
            </DataTemplate>
        </GroupStyle.HeaderTemplate>

        <GroupStyle.Panel>

            <ItemsPanelTemplate>
                <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,0,0"/>
            </ItemsPanelTemplate>

        </GroupStyle.Panel>
    </GroupStyle>
</GridView.GroupStyle>

你能提供一个屏幕截图/红线显示你在视觉上想要的东西吗？很遗憾，我不能发布图像-没有足够的用户点：-（但是对于分组网格视图中的每个组，标题下面都有一条垂直线（分组内容的长度）在内容的底边会有一条匹配的线。我想我知道你的意思，但我更愿意确定。你能把图片上传到imgur.com并在这里发布链接吗？（这是一个公共网站，但也是如此）感谢您的帮助Shahar，我已将图片上传到此处：感谢您抽出时间回复Iris。我认为我的图片可能没有那么好地显示我想要实现的目标。我希望边界位于团队周围，而不是团队中的项目。这应该能更清楚地显示出来：（其中您有一个物种集合类，其中物种拥有一个动物对象集合）。我似乎无法为variableSizedWrapGrid添加边框您需要为GroupItem设置模板样式以获得所需效果。

<Style x:Key="GroupItemStyle1" TargetType="GroupItem">
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="GroupItem">
        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
        <Grid>
            <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
        <ContentControl x:Name="HeaderContent" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" Content="{TemplateBinding Content}" IsTabStop="False" Margin="{TemplateBinding Padding}" TabIndex="0"/>
        <Rectangle VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Height="1" Fill="White" Margin="5,0,15,0" />
        <ItemsControl x:Name="ItemsControl" IsTabStop="False" ItemsSource="{Binding GroupItems}" Grid.Row="1" TabIndex="1" TabNavigation="Once">
            <ItemsControl.ItemContainerTransitions>
                <TransitionCollection>
                    <AddDeleteThemeTransition/>
                    <ContentThemeTransition/>
                    <ReorderThemeTransition/>
                    <EntranceThemeTransition IsStaggeringEnabled="False"/>
                </TransitionCollection>
            </ItemsControl.ItemContainerTransitions>
        </ItemsControl>
        <Rectangle Grid.Row="1" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Height="1" Fill="White" Margin="5,0,15,0" />
        </Grid>
        </Border>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
</Style>

<GridView.GroupStyle>
    <GroupStyle  HidesIfEmpty="True" ContainerStyle="{StaticResource GroupItemStyle1}">
        <GroupStyle.HeaderTemplate>
            <DataTemplate>
                <!-- Header Template here  -->
            </DataTemplate>
        </GroupStyle.HeaderTemplate>

        <GroupStyle.Panel>

            <ItemsPanelTemplate>
                <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,0,0"/>
            </ItemsPanelTemplate>

        </GroupStyle.Panel>
    </GroupStyle>
</GridView.GroupStyle>