I have a Scrollviewer wrapping a ListView of movie posters, and it is scrollable verticaly and horizontaly and also zoomable.
When I set IsHorizontalRailEnabled="False" to the Scrollviewer the horizontal rails are effectively disabled, but whatever the value I assign to IsVerticalRailEnabled, the rails are never disabled.
<ScrollViewer ZoomMode="Enabled"
MinZoomFactor="0.1"
MaxZoomFactor="1"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto"
IsVerticalRailEnabled="False"
IsHorizontalRailEnabled="False">
<ListView Grid.Row="0"
Name="MovieListView"
ItemTemplate="{StaticResource ItemTemplate}"
ItemsSource="{Binding movie_posters_list}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid MaximumRowsOrColumns="15" Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</ScrollViewer>
I cant find any helpful documentation about this weird behaviour, any idea how to correct it ?
EDIT : As Justin XL mentionned in the comments, this way is breaking the UI virtualization of the ListView, and therefore should be avoided. See his comment for more info
I found the answer myself. I do not fully understand why I had to do that for it to work but OK. If you have an explanation on why I had to duplicate the property usage I would appreciate it :)
All I had to do is add ScrollViewer.IsVerticalRailEnabled="False" to my ListView element.
Note that I have to keep IsVerticalRailEnabled="False" in my ScrollViewer too for it to work.
Here is the updated xaml :
<ScrollViewer ZoomMode="Enabled"
MinZoomFactor="0.1"
MaxZoomFactor="1"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto"
IsVerticalRailEnabled="False"
IsHorizontalRailEnabled="False">
<ListView Name="MovieListView"
ItemTemplate="{StaticResource ItemTemplate}"
ItemsSource="{Binding movie_posters_list}"
ScrollViewer.IsVerticalRailEnabled="False">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid MaximumRowsOrColumns="15" Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</ScrollViewer>
Related
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
I want to override the default transtionion of miy ListView control which is bound to an observable collection. I want to use the more fluit transitions when adding / removing items to it or setting it completely new.
What am I doing wrong?
<ListView
VerticalAlignment="Top"
ItemsSource="{Binding FilteredNewsDealsList}"
ItemTemplate="{StaticResource DealItemTemplateStretch}"
ItemContainerStyle="{StaticResource ListViewItemStyleStretch}"
Grid.Row="5" Padding="40,10,25,0"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="itemGridView_ItemClick"
ScrollViewer.VerticalScrollMode="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListView.ItemContainerTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
<RepositionThemeTransition/>
</TransitionCollection>
</ListView.ItemContainerTransitions>
</ListView>
I have also tried to do realize the transtitions in the ItemsPanel but that doesn't work either:
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal">
<WrapGrid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
<RepositionThemeTransition/>
</TransitionCollection>
</WrapGrid.ChildrenTransitions>
</WrapGrid>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
Thanks and best regards!
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.
I've got a grouped GridView with some explicitly sized databound controls inside it.
The GridView has a VariableSizedWrapGrid as the ItemPanelTemplate type.
As you can see the ScrollView scrolls well beyond the content.
Any help appreciated, XAML below.
<GridView Grid.Row="2" ItemsSource="{Binding Source={StaticResource contentSetListViewSource}}" ItemTemplate="{StaticResource DashboardContentSetItem}" SelectedIndex="-1" SelectionMode="Multiple" Padding="0,0,0,15" VerticalAlignment="Center" Margin="20 0" HorizontalAlignment="Left">
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Key}" Margin="0 10" Style="{StaticResource GroupHeaderTextStyle}"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
GridView by default uses an ItemsPanelTemplate consisting of a Border containing a WrapGrid.
So I was targeting the wrong panel, this is the fix I used:
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
The reason being that a WrapGrid isn't variable sized it's fixed to the size of the largest collection, the size of the second grouping (1 item) was the same as the first (5 items) which is why it extended beyond the content.
Can you resize grid items dynamically?
I have a gridview that has a textbox in it. They textbox has a number of bound values that can cause it to grow in size but it does not do so after the app is running.
<Slider x:Name="FontSizeSlider" Minimum="10" Maximum="120" />
<GridView ItemsSource="{Binding MyList}" >
<GridView.ItemTemplate>
<DataTemplate>
<TextBlock
Height="{Binding ElementName=FontSizeSlider, Path=Value}"
Width="{Binding ElementName=FontSizeSlider, Path=Value}"
Text="{Binding}"
FontSize="{Binding ElementName=FontSizeSlider, Path=Value}"/>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
I realise that the items would have to shuffle around too so that then can fit in the columns. I don't think this is supported in gridview is it?
Is this possible?
Fixed it by adding:
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid />
</ItemsPanelTemplate>
</GridView.ItemsPanel>