如何将图像列表插入到每个组的分组项目页面中？ [英] How to insert an image list in the grouped items page befor each group?

问题描述

我目前正在开发一个使用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 =ButtonHorizo​​ntalAlignment =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 =Horizo​​ntal/> 
< / 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 =ButtonHorizo​​ntalAlignment =LeftMargin =0VerticalAlignment =Top/> 
 <！ -  *****将您的社交图标列表放在这里****结束 - > 
< / StackPanel> 
 
< / Grid> 
< / Border> 
< / ControlTemplate> 
 < / Setter> 
< / style> 
  

这会给你：

< img src =https://i.stack.imgur.com/8iRVf.pngalt =在这里输入图片描述>

这个人会：

 < 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 =ButtonHorizo​​ntalAlignment =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>

这篇关于如何将图像列表插入到每个组的分组项目页面中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！