I want to let the user swipe on control that contains ListView.
Here is the example code:
<Border ManipulationMode="All"
ManipulationDelta="UIElement_OnManipulationDelta">
<ListView>
<ListView.Items>
<x:Int32>1</x:Int32>
<x:Int32>1</x:Int32>
<x:Int32>1</x:Int32>
<x:Int32>1</x:Int32>
<x:Int32>1</x:Int32>
<x:Int32>1</x:Int32>
<x:Int32>1</x:Int32>
</ListView.Items>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Width="200" Height="50"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Border>
For some reason ManipulationDelta event is not raising on a phone. How can i solve this?
At the very beginning I want to say, if there is no Margin on the ListView or no Padding on the Border, and there is no such size limit on both elements, the ListView in this scenario will fill the whole border and catch all the event first by default.
But UIElement.ManipulationDelta event is a routed event. When you swipe on it, the ListView catches it, the meanwhile you didn't handle this event on ListView, so will this event bubble up to parent elements because it goes unhandled, then your Border as a parent elemtn can handle this event. This is why manipulations on ListView's parent can get fired on PC.
But why can't it get fired on mobile emulator? As I said, this swipe gesture is first caught by ListView, and a ListView control contains a ScrollViewer in it, this ScrollViewer will handle your swipe gesture as scrolling on mobile emulator, then won't ListView pass this event to its parent again like it on PC.
The difference between this event on PC and emulator is, the manipulation event can respond to Mouse device, but not to single finger touch. You can refer to ListView ManipulationCompleted event doesn't work on phone.
How to solve this problem? One very simple method is that you can give some space between Border and ListView like this <ListView Margin="50">, then you can catch this event outside the ListView on emulator, but this will break your original UI design. Another workaround method is like I said in that case, you can use Pointer event. Just tested it, when these events are on ListView's parent, they can still get fired on emulator.
Related
I'm trying to make my UWP app play nice with xbox controllers, and am running into the following issue:
As a system for modal windows, I've got a Frame control in the foreground of my MainPage, and a mask behind the frame that acts as a dismiss layer (clicking on it closes the frame). The UI stack looks like this:
<Page>
<Grid>
<Grid x:Name="content"></Grid>
<Rectangle x:Name="LightDismiss" Visibility="Collapsed"/>
<Frame x:Name="SubFrame" Visibility="Collapsed" MaxWidth="500" MaxHeight="500" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
</Page>
I then have a SubFrameNavigator()that will navigate the subframe to the specified page, and animate the LightDismiss layer.
The issue is that XY navigation with a gamepad completely, and logically, ignores the dismiss layer making it possible to move focus from within the frame to controls in the grid behind it. How can I "lock" focus within the Frame, so that it's impossible to move focus outside of it?
I've tried setting XYFocusKeyboardNavigationMode to Disabled on the grid containing the app's content, but it doesn't seem to change anything. I've also tried fiddling with the FocusEngagement related properties, but I've had no success either.
I have a simple xaml page with one TextBox and a RichTextBlock.
Inside that RichTextBlock there are some InlineUIContainers.
But when the user presses a button, I remove through code an InlineUIContainer. This goes well, but each time this is done, the TextBox that is on the page get's focus!
Resulting in the touch keyboard popping up. Anyone an idea why this is happening? Or how I can prevent this?
I can't set the IsTabStop, because the user still has to be able to fill something in if needed.
I'm working on the Windows Phone part of a WinRT Universal app
Some code, but the actual removal is done in the Attached Dependency Property
It's the KeywordsInput textbox that get's the focus after each removal
<TextBox x:Uid="Search_KeywordsInput" x:Name="SearchKeywordsInput"
Text="{Binding KeywordsInput, Mode=TwoWay}" />
<RichTextBlock Grid.Row="4"
Margin="0,9.5,0,0"
IsTextSelectionEnabled="False"
dependencyProperties:RichTextBlockTagCloud.Command="{Binding SelectedTagFilterCommand}"
dependencyProperties:RichTextBlockTagCloud.TagItems="{Binding SelectedFilters, Mode=TwoWay}">
<Paragraph x:Name="TagsFilters" />
foreach (InlineUIContainer container in buttonsToRemove)
tagParagraph.Inlines.Remove(container);
Have you try to set IsTabStop=False on Button, so clicking button doesn't steal RichTextBox focus.
If you remove the focused control then the focus will move to a valid control. In this case, the next control found is your TextBox. If you park the focus on a benign (non-text) control before removing the focussed button then the keyboard won't trigger.
Depending on your overall layout you may be able to set the focus to the page, you may have another button which would make sense, or you could add a non-editable control to the tab order.
I've created a GridView with a width of 1800, with several GridViewItems inside it which fills up more than the screen realestate, so I have to swipe to see more content. However, when I swipe horizontally, I can see the content which is not visible before swiping, but once I remove my finger/stop swiping, the GridView automatically slides back to the content on the very left. For some reason, the methods which I've usually used, won't work in this particular project. At the moment, the GridView contains:
<GridView
HorizontalAlignment="Left"
Width="1800"
SelectionMode="None"
IsSwipeEnabled="True"
IsItemClickEnabled="False">
What must be added to make the gridview swipe normally, as in it won't bounce back to start once you let go of the screen?
Regards.
Have you tried to wrap your gridview with a scrollviewer?
<ScrollViewer Style="{StaticResource HorizontalScrollViewerStyle}">
<GridView ... />
</ScrollViewer>
Here is the msdn doc
I have a WinRT app in which an AppBar button can be one of two buttons depending upon what is selected. Changing from one button to another is straightforward, however it is lacking the visual fluidity we strive for with WinRT.
The visual behavior I am looking for is also seen in the Mail app that ships with Windows 8. If you select a message and bring up the bottom AppBar, tapping the "Mark as Read/Unread" buttons results in a nice transform effect between the two buttons.
Does anyone know if this is a pre-rolled animation or do I have to implement it by hand (or even better, is there a solution out there already)?
The available transitions are in the Windows.UI.Xaml.Media.Animation namespace. Check out what is there and if you don't see what you are looking for then you will have to create your own.
The transition that looks most similar to me is AddDeleteThemeTransition, though the effect is only present when app bar items are added/removed and not when the app bar is opened.
Here's an example of its use
<AppBar>
<Grid>
<StackPanel x:Name="LeftPanel" Orientation="Horizontal">
<Button x:Name="Search" Style="{StaticResource SearchAppBarButtonStyle}" />
<StackPanel.ChildrenTransitions>
<TransitionCollection>
<AddDeleteThemeTransition/>
</TransitionCollection>
</StackPanel.ChildrenTransitions>
</StackPanel>
</Grid>
</AppBar>
So I got a normal AppBar to work in a C# metro app, but the problem is I need the app to display an html page. I create a WebView that takes up 100% of the width and height of the page, and by doing so, the AppBar doesn't show up anymore on right clicks and edge swipes. Is there a way for the AppBar to work with such a WebView in place?
--Resolved--
What I ended up doing was adding a 1px border around the WebView so that swipes could be detected. Since what I included in my WebView dynamically changes with time, WebViewBrush didn't work out for me. Instead I just shrunk the size of the WebView when the AppBar is opened and then expanded it when it was closed.
Not trying to steal Filip's answer, but I think a few more details are necessary to fully answer the question.
Even with a WebView running full-screen, the AppBar tries to show itself when you right-click or swipe. You can prove this by subscribing to the AppBar.Opened event. What's interesting is that the AppBar appears to somehow know it's obscured and automatically closes itself. Even if it didn't close itself, you wouldn't be able to see it because it's obscured under the WebView.
Filip had the right idea about hiding the WebView and using WebViewBrush while the AppBar is open. You can find a good example of doing that here:
http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.webviewbrush.aspx
As for when to swap between WebView and WebViewBrush, I'd simply do it on AppBar.Opened and reverse it on AppBar.Closed. AppBar is light dismiss, meaning as soon as you tap anywhere outside of it's client area it will close.
One last word of advice: In my testing it seemed that the swipe gesture was getting swallowed sometimes. That problem seemed to go away when I put a 1 pixel boarder on top and bottom of the WebView. Your mileage may vary.
You need to hide the WebView while displaying XAML UI on top of it and use the WebViewBrush instead.
As suggested above, the 1px border can help with ensuring the top/bottom swipe is honored for the AppBar. However, similar to #matthieu I was still having issues getting the AppBar to open reliably when using the mouse and right-click method.
The issue was that I included the XAML element as a peer to the WebView, rather than as a parent as the MSDN reference for AppBar.Closed suggests:
<Border BorderBrush="Gray" BorderThickness="2" Margin="100,20,100,20">
<Grid>
<WebView x:Name="contentView" Source="http://www.contoso.com"/>
<Rectangle x:Name="contentViewRect"/>
</Grid>
</Border>
If I apply the border this way, the AppBar also reliably opens with the mouse.
One last thing to note is that using a BorderBrush="Transparent" works fine as well, so you don't have to actually see the ugly border. My final XAML was something like:
<Border BorderThickness="0,1,0,1" BorderBrush="Transparent">
<Grid>
<WebView x:Name="WebView"></WebView>
<Rectangle x:Name="RectWebViewBrush"></Rectangle>
</Grid>
</Border>