Gridview scrolling stutters - xaml

I've been experimenting with Windows 8 and Visual Studio 2012 express but I can't achieve my goal.
I've been trying to create a grid of tiles that expands horizontally (much like the 'start' screen does).
The items are added at runtime and although scrolling horizontally works, it's not good enough.
When using my touchpad, it seems to clip to something, on a tablet this would feel laggy.
Scrolling with the cursor seems fine.
I'd like to know how I can give it a smooth experience by using XAML, unfortunately I'm not very good at it (yet).
XAML: (the stackpanel should be pointless but I was experimenting)
<Grid Background="White" ScrollViewer.HorizontalScrollBarVisibility="Visible">
<Grid.RowDefinitions>
<RowDefinition Height="19*"/>
<RowDefinition Height="109*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="stackPanel1" HorizontalAlignment="Left" Height="622" Margin="97,93,0,0" VerticalAlignment="Top" Width="0" Orientation="Horizontal" Grid.RowSpan="2"/>
<GridView x:Name="gridView1" ItemTemplate="{StaticResource Standard250x250ItemTemplate}" Margin="0,0,0,0" Background="Red" Grid.Row="1" ScrollViewer.HorizontalScrollBarVisibility="Hidden"/>
<Image HorizontalAlignment="Left" Height="90" Margin="1206,11,0,0" VerticalAlignment="Top" Width="106" Source="Assets/SmallLogo.png"/>
</Grid>

Not 100% sure if this is the issue you're facing though, but maybe it helps:
By default the ItemsTemplatePanel of a GridView is a VirtualizingStackPanel. If you don't have many items in your GridView, the scrolling of your GridView can indeed seem to be stuttering.
Try setting the ItemsPanelTemplate to a StackPanel in stead of VirtualizingStackPanel (unless you insist that your control GridView virtualizes its items).
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Width="Auto"
HorizontalAlignment="Left"
Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
Hope this helps!

Related

uwp xbox app XYNavigation in Pivot Control

I am an experienced uwp developer but a beginner for uwp xbox platform. I am trying to set the XY Navigation for my app and trying to test it with keyboard (as I don't own a xbox myself).
I am using a Pivot view and I can easily navigate between the pivot items with right and left arrow keys, which makes sense. but when my settings page is selected with pivot option (settings pivot header is focused and settings pivot item is in view) then I try to shift my focus vertically downwards to the first control in the settings page (radio buttons) but I am not able to do it the focus remains on settings header and doesn't shift downward on the page.
So how can I shift the focus downwards from a pivot header to the 1st control within the page on pressing down, and vice versa i.e : when 1st control is focused I should move up to go back to the header of the pivot of that page, because I think that is the traditional navigation with pivot control on uwp xbox right?
Secondly the docs and the xbox app dev videos I watched recommended to set the focus on an element which makes sense, when the app loads, should that be done with this.Focus() method or is there a more efficient way to do it with xaml?
Code:
Pivot.xaml
<Grid x:Name="MainGrid">
<Pivot x:Uid="PivotPage" x:Name="MainPivot" >
<PivotItem x:Uid="PivotItem_OnNow">
<Frame>
<views:OnNowPage/>
</Frame>
</PivotItem>
<PivotItem x:Uid="PivotItem_Guide">
<Frame>
<views:GuidePage/>
</Frame>
</PivotItem>
<PivotItem x:Uid="PivotItem_Settings">
<Frame>
<views:SettingsPage/>
</Frame>
</PivotItem>
</Pivot>
</Grid>
Settings.xaml
<Grid>
<Grid Margin="{StaticResource MediumLeftRightMargin}">
<Grid.RowDefinitions>
<RowDefinition Height="48"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock
Grid.Row="0"
x:Uid="Settings_Title"
x:Name="TitlePage"
Style="{StaticResource PageTitleStyle}" />
<StackPanel Grid.Row="1">
<TextBlock
x:Uid="Settings_Personalization"
Style="{StaticResource SubtitleTextBlockStyle}" />
<StackPanel Margin="{StaticResource SettingsSubheaderMargin}">
<TextBlock
x:Uid="Settings_Theme"
Style="{StaticResource BodyTextStyle}" />
<StackPanel Margin="{StaticResource EightTopMargin}">
<RadioButton
x:Uid="Settings_Theme_Light"
GroupName="AppTheme"
IsChecked="{x:Bind ViewModel.ElementTheme, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter=Light, Mode=OneWay}"
Command="{x:Bind ViewModel.SwitchThemeCommand}">
<RadioButton.CommandParameter>
<xaml:ElementTheme>Light</xaml:ElementTheme>
</RadioButton.CommandParameter>
</RadioButton>
<RadioButton
x:Uid="Settings_Theme_Dark"
GroupName="AppTheme"
IsChecked="{x:Bind ViewModel.ElementTheme, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter=Dark, Mode=OneWay}"
Command="{x:Bind ViewModel.SwitchThemeCommand}">
<RadioButton.CommandParameter>
<xaml:ElementTheme>Dark</xaml:ElementTheme>
</RadioButton.CommandParameter>
</RadioButton>
<RadioButton
x:Uid="Settings_Theme_Default"
GroupName="AppTheme"
IsChecked="{x:Bind ViewModel.ElementTheme, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter=Default, Mode=OneWay}"
Command="{x:Bind ViewModel.SwitchThemeCommand}">
<RadioButton.CommandParameter>
<xaml:ElementTheme>Default</xaml:ElementTheme>
</RadioButton.CommandParameter>
</RadioButton>
</StackPanel>
</StackPanel>
<TextBlock
x:Uid="Settings_About"
Style="{StaticResource SubtitleTextBlockStyle}"/>
<StackPanel Margin="{StaticResource EightTopMargin}">
<TextBlock
Text="{x:Bind ViewModel.VersionDescription, Mode=OneWay}" />
<TextBlock
x:Uid="Settings_AboutDescription"
Margin="{StaticResource EightTopMargin}" />
<HyperlinkButton
x:Uid="Settings_PrivacyTermsLink"
Margin="{StaticResource EightTopMargin}" />
</StackPanel>
</StackPanel>
</Grid>
</Grid>
The MSDN has listed several scenarios that XY navigation might not work the way you expect:
The IsTabStop or Visibility property is set wrong.
The control getting focus is actually bigger than you think—XY navigation looks at the total size of the control (ActualWidth and ActualHeight), not just the portion of the control that renders something interesting.
One focusable control is on top of another—XY navigation doesn't support controls that are overlapped.
If XY navigation is still not working the way you expect after fixing these issues, you can manually point to the element that you want to get focus using the method described in Overriding the default navigation.
Please first check these scenarios, after that, if you still could not solve this issue. Please provide a Minimal, Complete, and Verifiable example. I will help you diagnose it on my side.

How do I enable Scrollbars on a UWP GridView

I have a UWP where I am loading from an XML file and showing it in a GridView and I am trying to enable Scrollbars in a way that allows me to stack and wrap items in all the available space like in the image below. The problem that I am having is that I cannot figure out how to enable the scrollbars so that I can scroll the boxes until I get to the end of the list.
So far I have got it to do what you see in the picture, which is wrapped the way I want but it fills all the available space and doesn't allow you to scroll vertically or horizontally (I only want to scroll one way but I have tried to see if I could go either way). Through a lot of trial and error I was able to get it to scroll one row or one column at a time to the end of the list but that is not the desired result either. Here is where I am with the XAML right now (trimmed down version of the screen shot).
<GridView x:Name="DataGrid1">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
ScrollViewer.VerticalScrollBarVisibility="Disabled" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Border Width="270"
Height="200"
Margin="5"
BorderBrush="Black"
BorderThickness="2">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70" />
<ColumnDefinition Width="100*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
Background="#87CEFA">
<TextBlock Margin="2"
HorizontalAlignment="Center"
FontSize="16"
FontWeight="Bold"
Text="{Binding Company}" />
</StackPanel>
<TextBlock Grid.Row="1"
Grid.Column="0"
Margin="2"
HorizontalAlignment="Right"
FontWeight="Bold"
Text="Code: " />
<TextBlock Grid.Row="1"
Grid.Column="1"
Margin="2"
Text="{Binding Code}" />
</Grid>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
So what do I need to do to enable the scrollbars the way that I want?
Make sure your GridView is in a Grid and not a StackPanel. It does not expand in a StackPanel.
To make it scroll in a StackPanel you have to specify the height of the GridView. This was the issue with mine :)
To my knowledge gridviews that are not showing scrollbars automatically are due to stackpanel's presence. So my solution here is to try remove stackpanel what so ever, and if I find the stackpanel that's responsible replace it with other kind of panel and work my way back up. It's totally a brute force kind of approach but it works most of the time.
And another piece of advice. In that process of replacing the stackpanel try to replace it with grid and try to divide it's rows and columns with widths and heights set to auto or star sizing instead of specifying it with actual numbers to see if it works this way. If it works then work your way up speicifying it with actual numbers.
Here's your problem, in the definition of the ItemsWrapGrid you have:
ScrollViewer.VerticalScrollBarVisibility="Disabled"
this is going to mean that even if the scrollbar is shown it wont work.
Remove this line and you should get a working scrollbar.

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.

XAML WP8 - ScrollViewer doesnt take into account orientation

Im working on an app for Win Phone 8 and need to make a settings screen.
I created a user control for this.
...omitted the beginning stuff...
<Grid x:Name="LayoutRoot" Opacity="0.995" VerticalAlignment="Top">
<ScrollViewer
Name="scrollViewer"
Margin="0"
VerticalAlignment="Top"
VerticalScrollBarVisibility="Hidden" Background="#CC000000" Opacity="0.995" HorizontalScrollBarVisibility="Disabled">
<StackPanel Orientation="Vertical" VerticalAlignment="Top" Margin="0">
<RichTextBox x:Name="MenuLabel" Height="100" HorizontalAlignment="Left" VerticalAlignment="Center">
<Paragraph>
<Run Text="[Menu]"/>
</Paragraph>
</RichTextBox>
I have all my setting options in the stack panel.
While im in portait orientation, everything works fine, listed correctly, scrolls correctly by swiping upward from the bottom of the phone to the top. However, when I rotate the phone to landscape orientation, the control shows correctly but the swiping remains the same. So instead on swiping up from one side to the other, I still need to swipe from the bottom of the phone to the top -- essentially swiping right to left to make the control scroll up.
Am I missing something? Did I forget a setting somewhere? Ive scoured the internet for any clues / advice and could not find anything relevant.
Any help or suggestions would be greatly appreciated.
Thanks,
-G
Remove the Opacity property on your ScrollViewer and your Grid, and it will work!
<Grid x:Name="LayoutRoot"
VerticalAlignment="Top">
<ScrollViewer Name="scrollViewer"
Margin="0"
VerticalAlignment="Top"
VerticalScrollBarVisibility="Hidden"
Background="#CC000000"
HorizontalScrollBarVisibility="Disabled">
<StackPanel Orientation="Vertical"
VerticalAlignment="Top"
Margin="0">
<RichTextBox x:Name="MenuLabel"
Height="100"
HorizontalAlignment="Left"
VerticalAlignment="Center">
<Paragraph>
<Run Text="[Menu]" />
</Paragraph>
</RichTextBox>

How to set a RichTextBox in Silverlight 4 to fit it's parent height and maintain it on resize?

I am having hard times figuring this out. Here is what I need:
<StackPanel x:Name="container" VerticalAlignment="Stretch">
<RichTextBox Height="???" />
</StackPanel>
Basically what I know I can do is to bind RichTextBox Height to it's parent's height ( Height="{Binding ElementName=container, Path=ActualHeight}". Unfortunately this only works on load, because as it seems ActualHeight and ActualWidth don't notify for changes.
So what is the best way in Silverlight 4 to tell RichTextBox or TextBlock, it doesn't matter, to fill it's parent height, and maintain scrollbar if it's content height is bigger. Is the only way to bind some Resize events and maintain the height explicitly? That seems really ugly to me? Have anybody had this problem as well?
Any resources or information is highly appreciated! Thanks.
Ivan,
The best way to solve this is to use a Grid as the parent for the RickTextBox, instead of a StackPanel. By default, a Grid will "Strectch" its content to take up all of the available space. A StackPanel will only Stretch its content in one diminsion.
As an example, paste the following XAML into my XamlViewer to see the difference:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<RichTextBox
Foreground="Blue" FontSize="24" Background="Yellow">
<Paragraph>RichTextBox inside a StackPanel</Paragraph>
</RichTextBox>
</StackPanel>
<Grid Grid.Row="1">
<RichTextBox
Foreground="Blue" FontSize="24" Background="Tan">
<Paragraph>RichTextBox inside a Grid</Paragraph>
</RichTextBox>
</Grid>
</Grid>
</UserControl>
Good luck,
Jim McCurdy, Face to Face Software and YinYangMoney