![TemplateBinding]( "TemplateBinding")
本文介绍了如何将图像列表插入到每个组的分组项目页面中？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我目前正在开发一个使用XAML和C＃的Windows 8应用程序。我开发了动态生成数据组的分组项目页面。我有一个社交媒体图标列表，我需要放在每个组标题的旁边，但在屏幕截图中显示的左侧对齐！ 当我添加列表在XAML代码中，它是在第一组的开始处生成的！我怎样才能为每个组？有任何想法吗？如果任何人都可以提供给我的代码是非常有用的。 $ div class =h2_lin>解决方案 b < Style x：Key =GroupItemStyle1TargetType =GroupItem> < Setter Property =IsTabStopValue =False/> < Setter Property =Template> < Setter.Value> < ControlTemplate TargetType =GroupItem> < Border BorderBrush ={TemplateBinding BorderBrush}BorderThickness ={TemplateBinding BorderThickness}Background ={TemplateBinding Background}> <网格> < Grid.ColumnDefinitions> < ColumnDefinition Width =431 */> < ColumnDefinition Width =429 */> < /Grid.ColumnDefinitions> < Grid.RowDefinitions> < RowDefinition Height =Auto/> < RowDefinition Height =*/> < /Grid.RowDefinitions> < ContentControl x：Name =HeaderContentContentTemplate ={TemplateBinding ContentTemplate}ContentTransitions ={TemplateBinding ContentTransitions}ContentTemplateSelector ={TemplateBinding ContentTemplateSelector}Content ={TemplateBinding Content}IsTabStop =False Margin ={TemplateBinding Padding}TabIndex =0Grid.Column =1/> < ItemsControl x：Name =ItemsControlIsTabStop =FalseItemsSource ={Binding GroupItems}Grid.Row =1TabIndex =1TabNavigation =OnceGrid.Column =1 > < ItemsControl.ItemContainerTransitions> < TransitionCollection> < AddDeleteThemeTransition /> < ContentThemeTransition /> < ReorderThemeTransition /> < EntranceThemeTransition IsStaggeringEnabled =False/> < / TransitionCollection> < /ItemsControl.ItemContainerTransitions> < / ItemsControl> < Button Content =ButtonHorizontalAlignment =LeftMargin =0,194,0,0Grid.Row =1VerticalAlignment =Top/> < / Grid> < / Border> < / ControlTemplate> < / Setter> < / style> 将此样式应用于GridView： <！ - 在大多数视图状态中使用的水平滚动网格 - > < GridView x：Name =itemGridView AutomationProperties.AutomationId =ItemGridView AutomationProperties.Name =分组项目 Grid.RowSpan =2 Padding =116,137,40,46 ItemsSource ={Binding Source = {StaticResource groupedItemsViewSource}} ItemTemplate ={StaticResource Standard250x250ItemTemplate} SelectionMode =无 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> <网格保证金=1,0,0,6> ....... < / GroupStyle> < /GridView.GroupStyle> < / GridView> 您会在每个组之前看到示例按钮 - 更新： 使用以下组风格：例如： < Style x：Key =GroupItemStyle3 TargetType =GroupItem> < Setter Property =IsTabStopValue =False/> < Setter Property =Template> < Setter.Value> < ControlTemplate TargetType =GroupItem> < Border BorderBrush ={TemplateBinding BorderBrush}BorderThickness ={TemplateBinding BorderThickness}Background ={TemplateBinding Background}> <网格> < Grid.ColumnDefinitions> < ColumnDefinition Width =431 */> < ColumnDefinition Width =429 */> < /Grid.ColumnDefinitions> < Grid.RowDefinitions> < RowDefinition Height =Auto/> < RowDefinition Height =*/> < /Grid.RowDefinitions> < ContentControl x：Name =HeaderContentContentTemplate ={TemplateBinding ContentTemplate}ContentTransitions ={TemplateBinding ContentTransitions}ContentTemplateSelector ={TemplateBinding ContentTemplateSelector}Content ={TemplateBinding Content}IsTabStop =False Margin ={TemplateBinding Padding}TabIndex =0Grid.ColumnSpan =2/> < ItemsControl x：Name =ItemsControlIsTabStop =FalseItemsSource ={Binding GroupItems}Grid.Row =1TabIndex =1TabNavigation =OnceGrid.Column =1 > < ItemsControl.ItemContainerTransitions> < TransitionCollection> < AddDeleteThemeTransition /> < ContentThemeTransition /> < ReorderThemeTransition /> < EntranceThemeTransition IsStaggeringEnabled =False/> < / TransitionCollection> < /ItemsControl.ItemContainerTransitions> < / ItemsControl> < StackPanel Background =RedGrid.Row =1> < Button Content =ButtonHorizontalAlignment =LeftMargin =0VerticalAlignment =Top/> < / StackPanel> < / Grid> < / Border> < / ControlTemplate> < / Setter> < / style> 这会给你： 这个人会： < Style x：Key =GroupItemStyle2TargetType =GroupItem> < Setter Property =IsTabStopValue =False/> < Setter Property =Template> < Setter.Value> < ControlTemplate TargetType =GroupItem> < Border BorderBrush ={TemplateBinding BorderBrush}BorderThickness ={TemplateBinding BorderThickness}Background ={TemplateBinding Background}> <网格> < Grid.ColumnDefinitions> < ColumnDefinition Width =431 */> < ColumnDefinition Width =429 */> < /Grid.ColumnDefinitions> < Grid.RowDefinitions> < RowDefinition Height =Auto/> < RowDefinition Height =*/> < /Grid.RowDefinitions> < ContentControl x：Name =HeaderContentContentTemplate ={TemplateBinding ContentTemplate}ContentTransitions ={TemplateBinding ContentTransitions}ContentTemplateSelector ={TemplateBinding ContentTemplateSelector}Content ={TemplateBinding Content}IsTabStop =False Margin ={TemplateBinding Padding}TabIndex =0Grid.Column =1/> < ItemsControl x：Name =ItemsControlIsTabStop =FalseItemsSource ={Binding GroupItems}Grid.Row =1TabIndex =1TabNavigation =OnceGrid.Column =1 > < ItemsControl.ItemContainerTransitions> < TransitionCollection> < AddDeleteThemeTransition /> < ContentThemeTransition /> < ReorderThemeTransition /> < EntranceThemeTransition IsStaggeringEnabled =False/> < / TransitionCollection> < /ItemsControl.ItemContainerTransitions> < / ItemsControl> < StackPanel Grid.RowSpan =2Background =Red> < Button Content =ButtonHorizontalAlignment =LeftMargin =0VerticalAlignment =Top/> < / StackPanel> < / Grid> < / Border> < / ControlTemplate> < / Setter> < / style> I am currently developing a windows 8 application using XAML and C#. I developed the grouped items page that generates data groups dynamically. I have a list of social media icons that I need to put next to each group title but aligned on the left as shown in the screen shot!When I add the list in the XAML Code, it is getting generated at the beginning of the first group! How can I have it for each group? any ideas? if anyone can provide me with the code that would be very helpful. 解决方案 Define GroupItemStyle in page resources section as follows: <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>Apply this style to GridView as:<!-- 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>You will see the sample button before each group here -UPDATE:Use following group styles: for example: <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>this will give you:And this one will: <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> 这篇关于如何将图像列表插入到每个组的分组项目页面中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 09-11 17:31