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.
Related
I have an ItemsControl with materialDesign Chips as a DataTemplate. My goal is to place the items one after the other without a lot of space in between.
There is a pic what is now looks like: https://imgur.com/hicWnGg.png
And this is my Goal: https://imgur.com/0jIEk8k.png
I tried already the ItemContainerStyle with Margin but this didnt helped me out
My Current Code
<ScrollViewer VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto">
<ItemsControl x:Name="myItemsControl" Height="40" Margin="0 10 0 0">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="1"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<materialDesign:Chip Tag="{Binding Name}" Uid="{Binding SourceName}" Content="{Binding Code}" Width="75" IsDeletable="True" DeleteClick="Chip_DeleteClick"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
Change your ItemsPanelTemplate to StackPanel instead of UniformGrid
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
I have a need to create a GridView, that will have only 1 row and many columns.
Because i want to realize SemanticZoom and Scroll into view.
GridView is populated by CustomUserControls here is my code:
<SemanticZoom IsZoomOutButtonEnabled="False">
<SemanticZoom.ZoomedInView>
<GridView x:Name="ZoomedInView" VerticalAlignment="Center" SelectionMode="None" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ItemContainerStyle="{StaticResource GridViewItemStyle}">
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid MaximumRowsOrColumns="1" Orientation="Horizontal" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
<Controls:FirstControl VerticalAlignment="Stretch" />
<Controls:SecondControl VerticalAlignment="Stretch" />
<Controls:ThirdControl VerticalAlignment="Stretch" />
</GridView>
</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView>
<GridView SelectionMode="None" ScrollViewer.HorizontalScrollBarVisibility="Hidden">
</GridView>
</SemanticZoom.ZoomedOutView>
</SemanticZoom>
The controls Width will be handled by its children, but height must be full size of GridView, how to achieve this?
Replaced the
ItemsPanel to:
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
Worked like a charm
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
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.
I was unable to find a solution for this problem:
I am creating my own table with ItemControls. To resize the columns I'd like to bind the Width-property of one cell to the corresponding ActualWidth-property of the column.
I tried the following, but it is not working:
<StackPanel Orientation="Vertical">
<Border BorderBrush="Black" BorderThickness="1">
<ItemsControl ItemsSource="{Binding Data.Columns}" Margin="26,1,1,1">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<!-- here i set the name of the column (Code) -->
<Border BorderBrush="Black" BorderThickness="1,0,0,0" Width="100" x:Name="{Binding Code}">
<TextBlock Text="{Binding Header}" />
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
<ItemsControl ItemsSource="{Binding Data.Rows}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1,0,1,1">
<StackPanel Orientation="Horizontal" Margin="1">
<Grid Width="25">
<General:SeverityIconControl Severity="{Binding Severity}" />
</Grid>
<ItemsControl ItemsSource="{Binding Values}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<!-- and here i'd like to bind to the ActualWidth of the corresponding column (Code)
but it is not working because ElementName={Binding LocalCode} does not work -->
<Border BorderBrush="Black" BorderThickness="1,0,0,0" Width="{Binding ActualWidth, ElementName={Binding LocalCode}}">
<TextBlock Text="{Binding Value}" />
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
Is there a way to solve this without changing the data source (unfortunately the data source cannot be edited)?
You can't bind x:Name (more info here) since it's only read when you call InitializeComponent() in the constructor.
Easiest way would be to add a DesiredWidth column to your Data object, and bind both widths to that (with a default value of 100).