I ran into a little bug while creating a scrollable stackpannel. I used the scrollviewer. I have placed the Stackpannel inside the Scrollviewer but I can't scroll using a emulator.. I don't have a windows phone so I cant check it out on an actual phone. Here is my code:
<ScrollViewer Height="979" Margin="0,100,0,-439" VerticalAlignment="Stretch">
<StackPanel Height="979" VerticalAlignment="Stretch" Width="268">
// things inside the stackpannel
</StackPanel>
</ScrollViewer>
Am I doing something wrong or does the scrollviewer not work in an emulator?
The height of the ScrollViewer is the same as the height of the StackPanel so there is nothing to scroll (it just falls off the end of the screen). Try using VerticalAlignment="Stretch" instead of setting Height on the ScrollViewer which should help (if not, you have some other problem in your layout ;-) but using a fixed, smaller Height for the ScrollViewer will solve this immediate problem).
Related
I'm trying to port my WP8 app to WP8.1 by creating a new Universal app.
One thing that really drives me crazy is the new scaling behaviours of WP on higher resolution screens.
I just want my XAML to scale up (so everything becomes bigger). Just like it did on WP8. I've tried to do this with a Viewbox but that didn't work out very well either (weird margins all over the place :S).
How do I achieve this?
Kind regards,
Niels
I'm also making use of Viewboxes and had problems with weird margins but setting the Stretch property of the Viewbox to Fill solved it:
<Viewbox Stretch="Fill">
<Grid Height="1280" Width="768">
<Grid> ... </Grid>
</Grid>
</Viewbox>
Hope this helps!
The problem is that when I switch to portrait mode, everything extend down to fill the available space like it should, but when I rotate back, the controls don't go back to the position they started from, they remain in positions that are out of view in landscape mode.
Anyone know how to fix this?
I'm using the simulator to test the rotation.
EDIT
I confirmed its the ScrollViewer fault, I enabled the vertical scrollbar and verified that when I rotate to portrait the ScrollViewer vertical size extends in height to accommodate the portrait mode, then when I rotate back, the ScrollViewer maintains its height and all the controls inside it got displaced as a result.
<ScrollViewer Grid.Row="1" Margin="0,-140,0,0" VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Hidden" HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Visible">
<Grid Margin="0,-140,0,0" Grid.Row="1" ></Grid>>
</ScrollViewer>
when I replace the Scrollviewer with a Grid the effect disappears and the controls resize correctly when I switch between portrait and landscape
I think I found the answer but I hope someone can verify, seems to work in the simulator.
I removed the issue by setting both of these values to disabled. It wasn't enough to just set one to disabled and the other to hidden, they both have to be disabled
VerticalScrollMode="Disabled"
VerticalScrollBarVisibility="Disabled"
If I start the scrolling vertically or horizontically the scroller "locks", such that you can only scroll horizontically or vertically, untill you let go. If I however start of by scrolling diagonally, there is no problem, in thhese cases I can manouvre the scrollviewer how i want. How do I make sure that the scrollViewer doesn't "lock" if I start of scrolling vertically or horizontically. Here is my scrollViewer:
<StackPanel>
<TextBlock x:Name="MainPageTitle" Text="{Binding title}" Height="89"/>
<ScrollViewer Width="768" Height="380" HorizontalScrollBarVisibility="Hidden">
<Map/>
</ScrollViewer>
<TextBlock x:Name="LEgE" Text="HEJHEJEHEJEHJEHJ"/>
</StackPanel>
So just to clarify, how do I make sure that no matter how I start of the scroll, I'm always capable of scrolling in any direction. With in the grid of course. Any help would be appreciated.
This is a known Issue that the scrollviewer runs on "rails".
Which is also stated in the artikel in msdn forums http://social.msdn.microsoft.com/Forums/wpapps/en-US/8fdbe189-c037-4f55-89c5-6d6814dc58f2/scrollviewer-locks-when-you-only-scroll-horizontally-or-vertically?forum=wpdevelop
But one could look at how to handle manipulation events for windows phone
http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff426933(v=vs.105).aspx
For this you need to set ScrollViewer.ManipulationMode to Control and manage it yourself.
But as stated in the first link, to acheive smoothness is very hard.
I have layout as described below:
<ScrollViewer>
<StackPanel Orientation="Horizontal">
<!-- ... -->
<ScrollViewer>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel ScrollViewer.VerticalScrollBarVisibility="Visible" Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ScrollViewer>
<!-- ... -->
</StackPanel>
</ScrollViewer>
And I would like to achieve that effect that is present in weather app.
In my application, when you're scrolling horizontaly using mouse wheel, when pointer gets over ItemsControl it immediately starts scrolling verticaly wheras in weather application there's fluent horizontal scrolling effect and scrolling verticaly begins when there's some time hover that vertical collection.
Is that behaviour somewhere implemented by default?.
Szymon
Generally, the guideline is that introducing vertical scrolling in a horizontally scrolling repeater is a bad idea. I think you should NOT consider Weather (or any standard Windows 8 app) as a model to emulate. Most of them violate the guidelines in some of the worst ways.
The Weather app accomplishes what you are asking based on the current mouse placement, the motion of the grid, and control with focus. That's a complex way of saying, some developer dreamed up a solution to help make their UI as confusing to the user as possible.
Please, don't.
What I think they do in order to achieve that effect is this:
If the mouse is over the vertical list for a while, they deactivate the horizontal scroll and activate the vertical one. Once the mouse moved outside the list, they switch back (deactivate the vertical scroll and activate the horizontal scroll).
I have not tested this to see if this works, but I think it should.
So I have come to that point where I am saying to myself over and over again I am missing some basic stuff.
I have a ScrollViewer with a RichTextBlock that converts HTML to the content.
Everything shows up as expected but I can't scroll! I had the VerticalScrollBarVisibility to Hidden but I have taken that out. After seeing this anwsear in StackOverflow I have stoped with the following code:
<ScrollViewer VerticalAlignment="Stretch"
HorizontalScrollMode="Disabled"
VerticalScrollBarVisibility="Visible"
VerticalScrollMode="Auto"
ZoomMode="Disabled"
Padding="52"
Background="#60000000" >
<RichTextBlock rtbx:Properties.Html="{Binding TextHTML}"
TextAlignment="Justify"
FontSize="20" />
</ScrollViewer>
It also seems that the PanningMode is not avaiable in Windows 8 but I belive that it is still the expected behaviour to scroll with the touch.
I have tried to put the ManipulationMode to All in the ScrollViewer and also tried to set to none in the RichTextBlock. However, I got no sucess with those approaches.
Removing the manipulation modes and isolating the problem and simplifing the "options" I was using led me to the conclusion that the ScrollViewer wasn't the issue.
The problem was: I had was a Control that was on top of the ScrollViewer that was hidden (opacity = 0). This Control swallowed all the events that I was needing in the ScrollViewer. Basic mistake.
I had to put the Visibility equals to Collapsed.