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>
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'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 have a bottom menu bar. For unknown reason, when pressing Enter/Space button, the default behavior is that the commands will be fully shown or the first action executed, depending on the state which is extremely undesirable as I am handling the key events for the entire Page. I tried setting IsTabStop="False" but it does not help. Is there a way to eliminate this baked-in behavior?
<Page.BottomAppBar>
<CommandBar IsTabStop="False" ClosedDisplayMode="Minimal">
<!-- Buttons -->
</CommandBar>
</Page.BottomAppBar>
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