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>
Related
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.
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.
i want to display large image in small control such that entire image can be scrolled.
for this, i have used following code but i could only succeed in achieving vertical scrolling.
what should i do for enabling both, horizontal and vertical scrolling ?
<Grid HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1" Width="470">
<ScrollViewer x:Name="scrollViewer" Width="470" Height="270" HorizontalAlignment="Left" VerticalAlignment="Top">
<Image Name="drag" Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Top"/>
</ScrollViewer>
</Grid>
if there is any other solution than using scrollviewer then please share it, or mention any changes in this code which are useful for achieving the same.
Try
<Grid HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1" Width="470">
<ScrollViewer x:Name="scrollViewer" Width="470" Height="270" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"HorizontalAlignment="Left" VerticalAlignment="Top">
<Image Name="drag" Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Top"/>
</ScrollViewer>
</Grid>
You need to set HorizontalScrollBarVisibility and VerticalScrollBarVisibility properties to achieve desired scrolling.
Edit :
If you want to see the scroll bars always you can set HorizontalScrollBarVisibility="Visible" and VerticalScrollBarVisibility="Visible" .Otherwise("Auto") scroll bars will appear based on the content size
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!
I have a ContentControl wrapped in a ScrollViewer but for some reason I cant work out even though the content that I place within the ContentControl is bigger than the visible space the scrollbars do not get enabled. The verticalscrollbarvisibilty is set to visible.
When I view my silverlight app the vertical scrollbar is also cut off at the bottom i.e. I cant see the button that you would use for scrolling ownwards.
Can anyone shed any light on this or point me in the right direction.
there is no reason for that may be you are doing something wrong see this code may be this will help you
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Width="200" Height="200">
<Grid Width="500" Height="400">
<TextBlock VerticalAlignment="Top" HorizontalAlignment="Left" Text="Hello"/>
<TextBlock VerticalAlignment="Bottom" HorizontalAlignment="Right" Text="World"/>
</Grid>
</ScrollViewer>
sorry forgot to add the layout grid
<Grid x:Name="LayoutRoot" Background="White">
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Width="200" Height="200">
<Grid Width="500" Height="400">
<TextBlock VerticalAlignment="Top" HorizontalAlignment="Left" Text="Hello"/>
<TextBlock VerticalAlignment="Bottom" HorizontalAlignment="Right" Text="World"/>
</Grid>
</ScrollViewer>
</Grid>