Our goal is to have 2 sections on this screen and for the user to be able to swipe left/right between them. We do not want the carousel effect where you can keep swiping in one direction forever. To this end, we have set Pivot.IsHeaderItemsCarouselEnabled = "False" in our XAML, but this has the negative side effect shown below. Notice how the beginning of "Available Contracts" scrolls out of view when we swipe to view "My Contracts". How can we present the carousel effect and prevent the header area from moving like this? Thanks!
It turns out that a Pivot control does not play will with padding. I removed the Padding below and achieved the desired behavior.
<Pivot
Padding="50,25"
AutomationProperties.AutomationId="ItemsGridView"
AutomationProperties.Name="Items"
RelativePanel.AlignBottomWithPanel="True"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.Below="errorMessage"
IsHeaderItemsCarouselEnabled="False"
TabIndex="1">
Related
While using the Appbar button in the CommandBar of a Page, content of the Appbar button is fixed it seems. So that the width is not increase based on the Content.
Is there any work around to make visible the whole content or like wrapped content?
Thanks in advance.
<CommandBar BorderBrush="White"
BorderThickness="1"
IsSticky="True">
<CommandBar.PrimaryCommands>
<AppBarButton Icon="Accept" Label="return to yard" />
</CommandBar.PrimaryCommands>
</CommandBar>
It's funny but it depends on your phone's language. I have discovered it in my own app, where one of AppBar buttons has long label. When the language is set to Polish, then the label wraps and has two lines. But in English it has the same problem like you... One line and clipped (first button in screenshots below).
Polish:
English:
The answer to your question is: there is no way to change the size of AppBar buttons or labels. You have to come up with some shorter label...
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"
We have put a scroll viewer inside a content panel in design page of a databound app. We have to add more number of textblocks inside the scrollviewer which we cannot do by dragging and dropping from the toolbar as the design shows only three textblocks...
You can add the textboxes manually and specify it's margin. You don't need to drag and drop. For example:
<Grid x:Name="Content Panel">
<ScrollViewer>
<TextBox x:Name="textbox_1" Margin="10,0,0,0"/>
<TextBox x:Name="textbox_2" Margin="10,10,0,0"/>
<TextBox x:Name="textbox_3" Margin="10,20,0,0"/>
<TextBox x:Name="textbox_4" Margin="10,30,0,0"/>
..and so on.
Margin parameters are Left, Top, Right and Bottom. Keep increasing the top margin to push the control below.
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;
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.