C# 如何在分组前的分组项目页面中插入图像列表?
我目前正在使用XAML和C#开发一个windows 8应用程序。我开发了分组项目页面,动态生成数据组。我有一个社交媒体图标列表,我需要把它放在每个群组标题的旁边,但在左边对齐,如屏幕截图所示 当我在XAML代码中添加列表时,它是在第一个组的开头生成的!我怎样才能为每个小组准备?有什么想法吗?如果有人能提供我的代码,这将是非常有帮助的C# 如何在分组前的分组项目页面中插入图像列表?,c#,xaml,gridview,windows-8,C#,Xaml,Gridview,Windows 8,我目前正在使用XAML和C#开发一个windows 8应用程序。我开发了分组项目页面,动态生成数据组。我有一个社交媒体图标列表,我需要把它放在每个群组标题的旁边,但在左边对齐,如屏幕截图所示 当我在XAML代码中添加列表时,它是在第一个组的开头生成的!我怎样才能为每个小组准备?有什么想法吗?如果有人能提供我的代码,这将是非常有帮助的 在页面资源部分定义GroupItemStyle,如下所示: <Style x:Key="GroupItemStyle1" TargetType="GroupI
在页面资源部分定义GroupItemStyle,如下所示:
<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.ColumnDefinitions>
<ColumnDefinition Width="431*"/>
<ColumnDefinition Width="429*"/>
</Grid.ColumnDefinitions>
<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" Grid.Column="1"/>
<ItemsControl x:Name="ItemsControl" IsTabStop="False" ItemsSource="{Binding GroupItems}" Grid.Row="1" TabIndex="1" TabNavigation="Once" Grid.Column="1">
<ItemsControl.ItemContainerTransitions>
<TransitionCollection>
<AddDeleteThemeTransition/>
<ContentThemeTransition/>
<ReorderThemeTransition/>
<EntranceThemeTransition IsStaggeringEnabled="False"/>
</TransitionCollection>
</ItemsControl.ItemContainerTransitions>
</ItemsControl>
<!-- ***** Put your social icon list here **** Start-->
<Button Content="Button" HorizontalAlignment="Left" Margin="0,194,0,0" Grid.Row="1" VerticalAlignment="Top"/>
<!-- ***** Put your social icon list here **** End -->
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
将此样式应用于GridView,如下所示:
<!-- Horizontal scrolling grid used in most view states -->
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Grid.RowSpan="2"
Padding="116,137,40,46"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle ContainerStyle="{StaticResource GroupItemStyle1}">
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="1,0,0,6">
.......
</GroupStyle>
</GridView.GroupStyle>
</GridView>
.......
您将在此处看到每组前面的示例按钮-
更新:
使用以下组样式:例如:
<Style x:Key="GroupItemStyle3" 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.ColumnDefinitions>
<ColumnDefinition Width="431*"/>
<ColumnDefinition Width="429*"/>
</Grid.ColumnDefinitions>
<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" Grid.ColumnSpan="2"/>
<ItemsControl x:Name="ItemsControl" IsTabStop="False" ItemsSource="{Binding GroupItems}" Grid.Row="1" TabIndex="1" TabNavigation="Once" Grid.Column="1">
<ItemsControl.ItemContainerTransitions>
<TransitionCollection>
<AddDeleteThemeTransition/>
<ContentThemeTransition/>
<ReorderThemeTransition/>
<EntranceThemeTransition IsStaggeringEnabled="False"/>
</TransitionCollection>
</ItemsControl.ItemContainerTransitions>
</ItemsControl>
<StackPanel Background="Red" Grid.Row="1">
<!-- ***** Put your social icon list here **** Start-->
<Button Content="Button" HorizontalAlignment="Left" Margin="0" VerticalAlignment="Top"/>
<!-- ***** Put your social icon list here **** End -->
</StackPanel>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
这将为您提供:
这一个将:
<Style x:Key="GroupItemStyle2" 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.ColumnDefinitions>
<ColumnDefinition Width="431*"/>
<ColumnDefinition Width="429*"/>
</Grid.ColumnDefinitions>
<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" Grid.Column="1"/>
<ItemsControl x:Name="ItemsControl" IsTabStop="False" ItemsSource="{Binding GroupItems}" Grid.Row="1" TabIndex="1" TabNavigation="Once" Grid.Column="1">
<ItemsControl.ItemContainerTransitions>
<TransitionCollection>
<AddDeleteThemeTransition/>
<ContentThemeTransition/>
<ReorderThemeTransition/>
<EntranceThemeTransition IsStaggeringEnabled="False"/>
</TransitionCollection>
</ItemsControl.ItemContainerTransitions>
</ItemsControl>
<StackPanel Grid.RowSpan="2" Background="Red">
<!-- ***** Put your social icon list here **** Start-->
<Button Content="Button" HorizontalAlignment="Left" Margin="0" VerticalAlignment="Top"/>
<!-- ***** Put your social icon list here **** End -->
</StackPanel>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
发布您迄今为止所做的XAML工作。我们在这里看不到任何屏幕截图。你想在每个小组之前都有图标列表,对吗?Thx man,这非常有用!但有一个小问题,如果你看我的屏幕截图,按钮集是在标题下,而不是在它之前,所以如果一个小的修改可以解决这个问题,这将是伟大的。我把它放在组标题下的目的是,在不同的组之前重复相同的按钮将不得不将我带到不同的页面,但我担心在你的网站上不会有。我怎样才能根据他所属的群组,为每个群组之前重复的同一按钮赋予不同的功能?我怎样才能根据他所属的群组,为每个群组之前重复的同一按钮赋予不同的功能?我需要针对一个特定的按钮,例如组标题1带我到下一页,但组2下的按钮不应该!您可以将元数据(例如GroupId)绑定到按钮的标记字段。在按钮单击事件中获取该标记,并相应地进行处理。