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
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 small data entry form (ContentDialog) in UWP XAML.
<ContentDialog .....>
<StackPanel>
<TextBox PlaceholderText="Name" Text="{Binding ItemName}"/>
<TextBox PlaceholderText="Notes" Height="62" Margin="0" AcceptsReturn="True"/>
<ComboBox PlaceholderText="Item Type" ItemsSource="{Binding ItemTypeList}" .../>
</StackPanel>
In the designer the placeholder text shows correctly for all controls, but as soon as the dialog is shown at runtime, the placeholder text is blank for the text boxes, even the ones without focus. The placeholder text is correct for the combo box (and some AutoSuggestBox controls) but all TextBox controls show empty - whether they are bound or not.
I am fairly new to UWP, is there something else that could be affecting this?
More Info:
I found that this also happens on normal pages and usercontrols. Only the TextBox seems to be affected.
Testing a bit more shows that if the pages are displayed directly, eg: changing rootFrame.Navigate in App.xaml.cs to display "HomePage" instead of "MainPage", the placeholders show. However my "MainPage" has a hamburger menu (I am using the Devexpress Hamburger Menu Frame) and it seems once this is loaded, my TextBoxes no longer display the PlaceHolderText at runtime. I'll keep testing and maybe raise this with DevExpress as it seems to be an issue with that control. I'll update this post when I solve this.
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.
i want to show progress indicator in my windows phone app when System.Tray is not visible (my app is full screen). is there a simple way to show the progress indicator?
Why don't you use ProgresBar control which gives you the same result when you put it on the top of your layout? It's easy to use and looks exactly the same.
<Grid x:Name="LayoutRoot">
<!-- Your controls are here -->
<ProgressBar x:Name="MyProgressBar"
VerticalAlignment="Top"
IsIndeterminate="True" />
</Grid>
That is the benefit of showing SystemTray - you can use it for status messages and progress. If you choose not to use SystemTray, you have to add ProgressBar to the xaml of your Pages.
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>