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.
Related
I have a Canvas that overrides PointerMoved event do some stuff if the user "paints" on it. Now I'm trying to move this Canvas inside a ScrollViewer to add Zoom and Scroll effects which works perfectly.
<ScrollViewer x:Name="MainScrollViewer" Grid.Column="1"
VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"
ZoomMode="Enabled" MinZoomFactor="0.5" MaxZoomFactor="2.0" >
<Canvas x:Name="MainCanvas" Background="#000000"
HorizontalAlignment="Left" VerticalAlignment="Top"
PointerMoved="MainCanvas_PointerMoved" />
</ScrollViewer>
However, the ScrollViewer captures all the Pointer move Events and this caused the main paint procedure not working anymore.
Any idea on how to fix this?
Drawing with touch while still allowing zooming/panning - this is currently not supported in XAML. You will need to turn OFF zooming/panning in order to be able to draw with Pointer events and it is not possible to obtain system zooming and panning behaviors simultaneously with custom manipulations. You can however try to use Manipulation events by setting ManipulationMode=All and handle two finger scrolling and pinch zoom using Scale and Translate values manually.
See more at: Touch based drawing app with a Canvas inside a ScrollViewer
I didn't work with canvas and scrollview but I think which I found will help you :)
There is a trick! You can add a tool button (like hand) to switch in two conditions.
First condition enable drawing: you can disable HorizontalScrollMode and VerticalScrollMode of ScrollViewer which gives you ability to use pointer events of Canvas.
In second one you should enable the HorizontalScrollMode and VerticalScrollMode for ScrollViewer, and it works!
To change ScrollViewer properties programmatically:
MainScrollViewer.HorizontalScrollMode = ScrollMode.Auto;
MainScrollViewer.VerticalScrollMode = ScrollMode.Auto;
MainScrollViewer.ZoomMode = ZoomMode.Enabled;
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 am currently re-templating the ComboBox in a Metro XAML application.
The ItemsPanel is the standard CarouselPanel, which acts like a tumbler, endlessly revolving through the items list - nice !
An added nice detail, is that in the VS/Blend simulator if you 'flick' the items with the touch pointer then the carousel 'spins', rather like the Date tumbler in Windows Phone.
My problem is, when used in Desktop mode (via a mouse) I cant re-created the same spinning effect. there seems to be some kind of failure in the maouse/touch guesture translation.
Doesn anyone have any ideas about how to get this to work ?
At first I thought it might be like the GridView which does not bubble up the mouse wheel events. But then I tried the code below and the mouse wheel does spin it. It doesn't do this in Blend, but it does it at runtime fine.
<Grid Background="Black">
<ComboBox VerticalAlignment="Top">
<x:String>0</x:String>
<x:String>1</x:String>
<x:String>2</x:String>
<x:String>3</x:String>
<x:String>4</x:String>
<x:String>5</x:String>
<x:String>6</x:String>
<x:String>7</x:String>
<x:String>8</x:String>
<x:String>9</x:String>
<x:String>10</x:String>
<x:String>11</x:String>
<x:String>12</x:String>
<x:String>13</x:String>
<x:String>14</x:String>
<x:String>15</x:String>
<x:String>16</x:String>
<x:String>17</x:String>
<x:String>18</x:String>
<x:String>19</x:String>
<x:String>20</x:String>
<x:String>21</x:String>
<x:String>22</x:String>
<x:String>23</x:String>
<x:String>24</x:String>
<x:String>25</x:String>
<x:String>26</x:String>
<x:String>27</x:String>
<x:String>28</x:String>
<x:String>29</x:String>
</ComboBox>
</Grid>
Best of luck!
So I have a grid with a background. Inside the grid is a WebView and then some space on the left hand side of the screen where I have just placed a Button for now.
As the program runs, the left hand bar (that shows the grid with the background and the button laid out on it) doesn't render, instead I get the background, no controls on it and a black triangle (or geometric shape) at the bottom.
I suspect it's an issue with the VM and the video driver. I had a similiar issue with WPF a few years ago and MS's response was that I had an incompatible video driver that was causing the form to not render correctly at all times (this is very much the same behavior).
What can I do to prevent this? I'm including an image.
I'm going to include the small XAML I used and then a screenshot of the behavior (The XAML I rekeyed by hand):
<Grid>
<Grid.Background>
<ImageBrush ImageSource="Media/Background.jpg" />
</Grid.Background>
<TextBlock FontSize="24" Margin="15,15,0,0">Sample Label</TextBlock>
<WebView x:Name="wv1" Margin="250,0,0,0"></WebView>
<Button Content="Do Something" HorizontalAlignment="Left" Height="42" Margin="57,131,0,0" VerticalAlignment="Top" Width="170" Click="Button_Click1" />
</Grid>
VMs don't work well with multimedia. You should expect all sorts of problems with video.
I have the following snippet:
<StackPanel>
<Popup>
<TextBox ToolTip="Edit current date"/>
</Popup>
<Label "Current Date"/>
</StackPanel>
I want the popup to show when the StackPanel is clicked, and hidden when it (the Popup) loses focus.
I was wondering what would be the shortest way to write this in xaml.
To do this with an animation, use BooleanAnimationUsingKeyFrames. The example shows how to animate the IsEnabled property but will work equally well with Popup.IsOpen. (You'll need to scroll waaaay down to see the XAML example.) Take care about the FillBehavior so that the Popup doesn't animate back to being closed when the animation ends (unless of course this is what you want!).