Remove sticky header on grouped ListView - xaml

I am developing a Windows Phone 8.1 Runtime app and I'm using ListView with only the GroupStyle and its HeaderTemplate set.
Everything works fine, except I need to disable the sticky header which is always on top while scrolling through the list, but I can't find which template I need to edit to completely disable the sticky header. And one thing that really bothers me is when I navigate away from the page, the current header disappears and a blank appears on the same spot.
The code is simple:
<CollectionViewSource
x:Key="cvs"
IsSourceGrouped="True"
ItemsPath="GroupItems"
Source="{Binding Categories}">
</CollectionViewSource>
in the Resource,
and the ListView:
<ListView
x:Name="ListView"
IsSwipeEnabled="False"
ItemTemplateSelector="{StaticResource AllGamesViewTemplateSelector}"
ItemsSource="{Binding Source={StaticResource cvs}}"
SelectionMode="None"
ShowsScrollingPlaceholders="True">
<ListView.GroupStyle>
<GroupStyle HeaderTemplate="{StaticResource AllGamesViewCategoryTemplate}"/>
</ListView.GroupStyle>
</ListView>
So my question is how to disable sticky headers on grouped ListView?

I had the same question and finally came across this: https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.itemsstackpanel.arestickygroupheadersenabled?f=255&MSPPError=-2147217396
Set the AreStickyGroupHeadersEnabled property in the ListView's ItemsPanelTemplate.
<ListView
x:Name="ListView"
IsSwipeEnabled="False"
ItemTemplateSelector="{StaticResource AllGamesViewTemplateSelector}"
ItemsSource="{Binding Source={StaticResource cvs}}"
SelectionMode="None"
ShowsScrollingPlaceholders="True">
<ListView.GroupStyle>
<GroupStyle HeaderTemplate="{StaticResource AllGamesViewCategoryTemplate}"/>
</ListView.GroupStyle>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel AreStickyGroupHeadersEnabled="False"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>

You should be able to wrap the ListView in a ScrollViewer to prevent the sticky headers.

One solution that comes to mind is not using grouping in the ListView, just simulating it. Create a collection that will hold the items for the groups and placeholder items representing the headers. Then use a template selector for the ListView to render the placeholder items as headers.

Related

Apply Parallax effect into GridView

https://learn.microsoft.com/en-us/windows/uwp/design/motion/parallax
this is microsoft instruction to use the paralax they use the ListView to demo the effect
but my data is stored inside the Grid.View so can anyone show me how to implement into it ?
Microsoft said that we can use this with any element that contain the scrollviewer
ParallaxView works with GridView. The Source property of ParallaxView is for setting the element that either is or contains the ScrollViewer that controls the parallax operation. Here in your code snippet it bind the ForegroundElement to Source property but no such an element in. You need to name the GridView as ForegroundElement .
<GridView
x:Name="ForegroundElement"
IsItemClickEnabled="True"
ItemClick="Grid_Clicked"
ItemsSource="{x:Bind Icons}">
...
</GridView>
Besides this, the code snippet should work well. If you still cannot see the effects it may be caused by items count is not enough. ScrollViewer inside the GridView or ListView only be shown when the host control's layout space is being constrained smaller than the expanded content size, details please see ScrollViewer in a control template. You could try to add more items to check the effects.
Additionally, edit the question to add more details and avoid to put it as an answer.
<GridView Grid.Row="1" ItemsSource="{x:Bind Icons}" IsItemClickEnabled="True" ItemClick="Grid_Clicked">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:Icon">
<StackPanel>
<Image Width="200" Height="200" HorizontalAlignment="Center" Source="{x:Bind ImageCover}"/>
<TextBlock FontSize="16" VerticalAlignment="Center" Text="{x:Bind Title}"/>
<TextBlock FontSize="10" VerticalAlignment="Center" Text="{x:Bind Room}"/>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
this is where the data stored
and this is the parallax
<ParallaxView Source="{x:Bind ForegroundElement}" VerticalShift="50">
<!-- Background element -->
<Image x:Name="BackgroundImage" Source="Assets/turntable.png"
Stretch="UniformToFill"/>
</ParallaxView>

How to take whole width of the screen when binding dynamic values in Universal windows Application

I try to populate radio buttons dynamically in Universal windows application. I already wrote VisualState for different
of screens. Now I try to populate the radio button, which are they have to take the whole width of the window. I able to set fixed width for every VisualState But I think that may not good practice and difficult to handle further.
<GridView Grid.Row="1" Height="auto" Width="auto" HorizontalAlignment="Stretch" ItemsSource="{Binding DamageLocationList}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate x:DataType="model:DamageLocations">
<Grid>
<RadioButton Style="{StaticResource ButtonRadioButtonStyle}" HorizontalContentAlignment="Center" HorizontalAlignment="Stretch" IsChecked="{Binding IsChecked, UpdateSourceTrigger=PropertyChanged}" Content="{Binding DamageLocation}" Margin="0" Click="RadioButton_Checked" />
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
As #Ashok Rathod said, you can try using UniformGrid as the ItemsPanel of your Grid to make your radio buttons take the whole width of your app's window.
Although UniformGrid is not exist in UWP. But we can implement it by ourselves or use a third party UniformGrid like what in WinRTXamlToolkit.
Using WinRTXamlToolkit for example, we can using
<toolkit:UniformGrid Rows="1" />
instead of
<VariableSizedWrapGrid Orientation="Horizontal" />
Here toolkit is the namespace of WinRTXamlToolkit.Controls:
xmlns:toolkit="using:WinRTXamlToolkit.Controls"
As I didn't set Columns property, it will be the default value which is 0. A value of zero (0) for the Columns property specifies that the column count is computed based on the number of rows and the number of visible child elements that are in the Grid. Since I set Rows to 1, all the items will be put in one row and have the same width.
After this, you may also need to set ItemContainerStyle to make the radio buttons stretch like:
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</GridView.ItemContainerStyle>

GridView Items Width

Got a GridView that its items width are set by the first one width(Screenshot)
How could I set some auto width for each item?
<GridView ItemsSource="{x:Bind PopularItems}" Style="{StaticResource GVStyle}" Height="230">
<GridView.ItemTemplate>
<DataTemplate x:Name="GVTemp" x:DataType="models:LessDetails">
<StackPanel>
<Image Height="180" Width="132" Source="{x:Bind Img}" />
<TextBlock Margin="4,4,0,4" HorizontalAlignment="Stretch" TextAlignment="Center"
Text="{x:Bind Name}" Style="{ThemeResource BodyTextBlockStyle}" />
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
You can not auto-width each item in a GridView control, it is by designed to use the first item's size as the uniform size (ListViewItemPresenter for each items has the same size).
For the auto-size scenario, I suggest you using the StackPanel or creating a custom ItemsControl.
Use an ItemsStackPanel:
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Left" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
The only downside is that it doesn't wrap items.. For that you can use the ItemsWrapGrid but then you lose the auto-width functionality (first item determines the width of all items).
There's also the VariableSizedWrapGrid that can be used by giving items a certain ColumnSpan/RowSpan, but it's not quite the same as automatically calculating the width.
If you want the best of both world, probably you'll need to write your own custom panel.
UPDATE: For a solution that allows for both automatic width and item wrapping, you can use the WrapPanel control from the UWP Community Toolkit.

Windows 8.1 how to automatically wrap grid items?

I'm building a universal app and my Win8.1 app has to show a grid of items. Normally the grid consists of 3 columns, but on smaller screens I want the items to wrap so that there are only 2 columns (or even 1). This is my code:
<GridView ItemsSource="{Binding Regions}" IsItemClickEnabled="True">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="3" MinWidth="400" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="10">
<Image Source="{Binding Code, Converter={StaticResource FlagIconConverter}, ConverterParameter='/Assets/Icons/Flags/{0}.png'}" Width="30" />
<TextBlock Text="{Binding NativeName}" Style="{StaticResource BodyTextBlockStyle}" Margin="10,0,0,10" VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
Whenever I make the app smaller, the items do not automatically wrap. I tried solving this by changing the MaximumRowsOrColumns property with a VisualStateManager but that didn't work because it couldn't access my WrapGrid for some reason. Changing the property from code-behind didn't work either, because again it couldn't access the WrapGrid.
I tried this with both WrapGrid and ItemsWrapGrid (what is the difference anyway?) and ListView and GridView. No difference there.
Does anyone know how to accomplish this?
You shouldn't need to do anything. It should wrap based on the available client area. The only thing I can think of that would not make it wrap is that you put your <GridView> inside a fixed width container or a container that is size Auto in which you don't update the Observable Collection to notify the Grid to redraw/update itself.
For example this will not wrap.
<Grid Width="1000">
<GridView x:Name="myGridView" IsItemClickEnabled="True">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="5"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<!-- DATATEMPLATE -->
</GridView.ItemTemplate>
</GridView>
</Grid>
However get rid of that Width=1000 and it will wrap.
Example output 3 different sizes

Listview Scrollbar - Vertical Displays but doesn't work, Horizontal Not Displayed but Does work

I have the following ListView defined in a Grid win a <RowDefinition Height="8"> to take up all the visible area. The Listview is bound and created and populated on the fly at page creation. Essentially the list is going to be bigger than the viewable area and taller than the viewable area, so I want to be able to scroll up to down and left to right.
Basically, the vertical scroll bar appears but it doesn't work. It shows lots of area to be scrolled but it is unmoveable with mouse. The Horizontal scroll seems to appear off the bottom of the list as the mouse wheel does scroll horizontally, but the scroll bar isn't seen.
<ListView
x:Name="itemListViewHorizontal"
AutomationProperties.AutomationId="ItemListView"
AutomationProperties.Name="Grouped Items"
Grid.Row="1"
Visibility="Visible"
Margin="0,-10,0,0"
Padding="10,0,0,60"
ItemsSource="{Binding Source={StaticResource SearchItemsViewSource}}"
ItemTemplate="{StaticResource Standard80PersonTemplate}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="7,7,0,0">
<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>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
Essentially, what I want is to have the scrollbars at the left and bottom to scroll side to side or top to bottom. But no matter what I try, short of getting rid of the ItemsPanelTemplate and ItemsPanel information, which makes a single long list, it doesn't work.
Any suggestions?
In changing this, my vertical scrollbar works but horizontal is toast.
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Visible"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
Well, I was looking for a much more elegant way of doing this. Apparently, stackpanel cannot be used for both scrollbars at the same time, though it doesn't explicitly say this. So, I surrounded my listview with a scrollviewer, using a name and then disabling on snap view.
Problems solved, but I was looking for a way without so much nesting, but, it is what it is.