81293

How to insert an image list in the grouped items page befor each group?

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.

<img src="https://i.stack.imgur.com/SUdEl.png" alt="enter image description here">

Answer1:

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 - <img src="https://i.stack.imgur.com/DsoFc.png" alt="enter image description here">

<strong>UPDATE:</strong>

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:

<img src="https://i.stack.imgur.com/8iRVf.png" alt="enter image description here">

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>

<img src="https://i.stack.imgur.com/C5EDc.png" alt="enter image description here">

Recommend

  • php's json_encode and character representation
  • Entity Framework and SQL Server Savepoints
  • flask request.json order
  • Preventing user from tabbing outside of Frame
  • Opening a File whose Name Contains a Space
  • load store for List using json
  • Localizing day and month in moment.js [duplicate]
  • WPF combobox disabled background color
  • WPF ComboBox default ControlTemplate
  • Multiple field autocomplete with index type boost
  • @ConstructorResult mapping in jpa 2.1
  • How to insert an image list in the grouped items page befor each group?
  • How to modify Silverlight template at runtime?
  • Local WPF C# Programming
  • regarding WPF validation;
  • How can I bind a string to double in WPF?
  • How to find point on Path from the closest point?
  • DropShadowPanel adapt to button template style
  • How to create a fast loading wrapping ListBox?
  • Apply PivotItemHeader style to PivotItem in UWP
  • Line with fill and stroke
  • Having an issue with my TextBox control template
  • What's wrong with my datatrigger binding?
  • Dynamically add UI elements to StackPanel after button pressed
  • Disable Kendo Autocomplete
  • How to add a focus style to an editable ComboBox in WPF
  • Django invalid literal for int() with base 10
  • xtable package: Skipping some rows in the output
  • how to save the state in userdefaults of accessory checkmark-iphone
  • Database structure design with variable amounts of fields
  • C++ Partial template specialization - design simplification
  • How do I fake an specific browser client when using Java's Net library?
  • How to get a value (ex: baseURL) in every Karate feature?
  • How to stop GridView from loading again when I press back button?
  • Bitwise OR returns boolean when one of operands is nil
  • sending mail using smtp is too slow
  • Checking variable from a different class in C#
  • costura.fody for a dll that references another dll
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2