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.
Related
I've got a simple page set up:
<Page ...stuff goes here...>
<Hub>
<Hub.Header>
<views:HubHeaderView />
</Hub.Header>
<HubSection x:Name="PrimaryViewSection">
<DataTemplate>
<views:PrimaryHubView />
</DataTemplate>
</HubSection>
</Hub>
</Page>
Every time I navigate to this page, on first view and when I hit the back button after further navigation, I always get the turnstile animation. It looks really ugly since the Hub control is so wide. The problem is, I've tried clearing all the Transitions and ChildrenTransitions that I can find, and none of them seem to be the right one. What do I have to do to make the Hub not animate like this?
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'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>