A time ago I have asked how to implement a GroupedView and it worked quiet well, but now I have a problem. In my new App, the Grouped view only shows the GroupHeadings, but not the elements.
The MainViewModel has an ObservableCollection Playlists and every T has an ObservableCollection TopVideos.
<Page.Resources>
<CollectionViewSource Source="{Binding Playlists}"
IsSourceGrouped="True"
ItemsPath="TopVideos"
x:Name="GroupedCollection"/>
</Page.Resources>
<GridView x:Name="mainGridView" ItemsSource="{Binding Source={StaticResource GroupedCollection}}"
ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
Margin="10,10,0,0" Grid.Row="1"
LayoutUpdated="mainGridView_LayoutUpdated" Grid.ColumnSpan="2">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="1,0,0,6">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" Tapped="TextBlock_Tapped" />
<TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>
</StackPanel>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
This is nearly exact the code as in the answer to my question, but it does not work as expected. Has anyone an idea what I could have made wrong or how I can debug this problem better? Thanks for every answer.I am thankfull for every hint.
Related
I've created a new GridView that groups the item by key.
<GridView
Style="{StaticResource DefaultGridViewStyle}"
ItemsSource="{Binding Source={StaticResource TimeGroupCollectionViewSource}}"
ItemTemplate="{StaticResource TransactionDataTemplate}"
MaxHeight="{Binding MaximumContentHeight}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Vertical" GroupHeaderPlacement="Left"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Border Background="{ThemeResource B2}" Height="40" VerticalAlignment="Top" Tapped="Border_Tapped">
<TextBlock Style="{StaticResource GroupTextBlockStyle}" Height="40" VerticalAlignment="Top" Text="{Binding Key}" />
</Border>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
<Page.Resources>
<CollectionViewSource x:Name="TimeGroupCollectionViewSource" IsSourceGrouped="True" Source="{Binding TransactionList}" ItemsPath="Data"/>
</Page.Resources>
That works fine. By default every group starts in a new column.
What I want is something like this:
How can I achieve that? Do I miss some properties?
If you want your grid to scroll vertically - you should try changing its ScrollViewer.HorizontalScrollMode and ScrollViewer.VerticalScrollMode or use a ListView with custom ItemsPanel.
I have a slightly extraordinary request ;-)
I'd like to develop an ItemsControl with a "Previous" Control and a "Next" Control. Like this bound to an arbitrary ViewModel:
<controls:PagedItemsControl ItemsSource="{Binding Items}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="5" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="system:String">
<Border Background="Gray" Margin="5">
<TextBlock Text="{Binding}" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
<controls:PagedItemsControl.PreviousControl>
<Button Content="Previous" Command="{Binding PreviousCommand}" />
</controls:PagedItemsControl.PreviousControl>
<controls:PagedItemsControl.NextControl>
<Button Content="Next" Command="{Binding NextCommand}" />
</controls:PagedItemsControl.NextControl>
</controls:PagedItemsControl>
In the example I passed 2 buttons controlled by the ViewModel's commands. It would be awesome if somebody could tell me how to listen to the Control.IsEnable state and show the PreviousControl as first item if enable and the the NextControl as last item if enable.
Thank you
Have a look at the following XAML. We cannot add elements to ItemsPanel while using ItemsSource. But we may try to build a tricky collection which consists of ItemsSource and additional elements. Unfortunately CollectionContainer unable to bound to Items directly. Lucky that good guys already found a solution for this case.
<Grid>
<Grid.Resources>
<BooleanToVisibilityConverter x:Key="BoolToVisibilityConverter"/>
</Grid.Resources>
<TextBlock Name="TrickyBinder"
Tag="{Binding Items}"
Visibility="Collapsed"/>
<ItemsControl>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="5" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="system:String">
<Border Background="Gray" Margin="5">
<TextBlock Text="{Binding}" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsSource>
<CompositeCollection>
<CollectionContainer>
<CollectionContainer.Collection>
<col:ArrayList>
<Button Content="Previous" Command="{Binding PreviousCommand}" Visibility="{Binding Path=IsEnabled,RelativeSource={RelativeSource Self},Converter={StaticResource BoolToVisibilityConverter}}" />
</col:ArrayList>
</CollectionContainer.Collection>
</CollectionContainer>
<CollectionContainer Collection="{Binding Path=Tag,Source={x:Reference TrickyBinder}}"/>
<CollectionContainer>
<CollectionContainer.Collection>
<col:ArrayList>
<Button Content="Next" Command="{Binding NextCommand}" Visibility="{Binding Path=IsEnabled,RelativeSource={RelativeSource Self},Converter={StaticResource BoolToVisibilityConverter}}" />
</col:ArrayList>
</CollectionContainer.Collection>
</CollectionContainer>
</CompositeCollection>
</ItemsControl.ItemsSource>
</ItemsControl>
</Grid>
Hope this helps!
I have the following XAML code:
<StackPanel Background="White" Margin="267,207,0,44" Grid.ColumnSpan="2">
<ScrollViewer Margin="30,30,0,30" Height="444">
<ItemsControl Name="ListCountries">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,10,0" Width="100">
<TextBlock Text="{Binding Key}" Foreground="Red" />
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,10,0,0">
<TextBlock TextWrapping="Wrap" Text="{Binding title}" Foreground="Black" />
<TextBlock TextWrapping="Wrap" Text="{Binding desc}" Foreground="Gray" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</StackPanel>
I set the itemSource of the itemsControl named ListCountries, with a IEnumerable> and it prints a list of titles, followed by a list of objects of the OtherClass.
My problem is that , the columns that are filled sometimes are bigger than the height of the Stackpanel that they are inserted to, i want to be able to split my inner list of into columns.
as you can see in the image, Belgium country gets splited into 2 columns
right now all my countries are single column with vertical scroll.
You should use a GridView for this. Here's some code slightly modified from a Grid app in Visual Studio
<GridView
x:Name="itemGridView"
Grid.RowSpan="2"
Padding="116,137,40,46"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
SelectionMode="None"
Height="600">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="200">
<TextBlock Text="{Binding Description}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="60" Margin="15,0,15,0"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
Here's a screenshot of what this looks like, with sample data
Ok, this is driving me nuts! I have spent a good half of my day working on this problem. I am using a XAML based Windows 8.1 app, and essentially I am trying to implement some drag and drop functionality between groups in a GridView. So far everything has been working, except when I try to "drop" an item into a new group. After way to much time, I have narrowed it down to the "drop" event not being fired for the GroupStyle.Panel VariableSizedWrapGrid. I was trying to follow something along the lines of this webpage.
I for the life of me cannot figure out why it won't fire. I have tried testing other drop events throughout my gridview, and they all seem to be working as expected.
Below is the code I currently have in place:
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Grid.RowSpan="2"
Padding="116,137,40,46"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}, Mode=TwoWay}"
SelectionMode="None"
CanDragItems="True"
DragItemsStarting="itemGridView_DragItemsStarting"
IsSwipeEnabled="true"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick">
<GridView.ItemTemplate>
<DataTemplate>
<VariableSizedWrapGrid HorizontalAlignment="Left" Width="250" Height="250">
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="splash"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Path=Name }" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="60" Margin="15,0,15,0"/>
</StackPanel>
</VariableSizedWrapGrid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid GroupPadding="0,0,70,0"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle HidesIfEmpty="False">
<GroupStyle.HeaderTemplate>
<DataTemplate>
<VariableSizedWrapGrid Margin="0,0,0,2">
<Button Foreground="{ThemeResource ApplicationHeaderForegroundThemeBrush}"
AutomationProperties.Name="Group Title"
Style="{StaticResource TextBlockButtonStyle}"
Click="Button_Click">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" Margin="0,-11,10,10" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" />
<TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-11,0,10" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" />
</StackPanel>
</Button>
</VariableSizedWrapGrid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Drop="VariableSizedWrapGrid_Drop" AllowDrop="True"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
I really hope someone out there can see my error! I'm sure it is something simple, but I just need someone to point out the obvious. :)
Had the same problem, then found this example:
How to drag item between groups in grouped gridview
I tried to use StackPanel as ItemsPanel of GridView, worked for me. Try to use StackPanel instead of ItemsWrapGrid for your GridView.
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
Still can't understand this behavior, any ideas?
There is an app which has the listbox with multiple rows and there is some info in each of this rows. How to implement that? Try to use gridview in listbox?
Simplest way to replicate this
Create a new Store App with Grid App Template
Replace the GridView code with this
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="1,0,0,6">
<Button
AutomationProperties.Name="Group Title"
Click="Header_Click"
Style="{StaticResource TextPrimaryButtonStyle}" >
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
<TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>
</StackPanel>
</Button>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Horizontal" Margin="0,0,80,0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
It's a grouped GridView. You should set ItemsPanel of GridView as VirtualizingStackPanel with vertical orientation.
Check out Grouping GridView on Windows 8