Custom transition between Pages in WinRT - c#

I'd like to know if there is any way to create custom animations for transitions between to Pages in WinRT.
Currently the only way I've found to animate the entrance of a Page is to add this kind of stuff in its xaml :
<Page.Transitions>
<TransitionCollection>
<PaneThemeTransition Edge="Right" />
</TransitionCollection>
</Page.Transitions>
Which makes it slide in from the right. The problem is I also want the current page to slide out to the left at the same time. Currently it only disappears, leaving the screen black while the new page slides in. I also need to choose when to use the animation, depending on which page I'm coming from.

Check out the Frame.Navigate method.
You can use that to define the animation for a page you are navigating to by the NavigationTransitionInfo class.
With fine tuning your own animations you will probably want to try build your own PageTransition using StoryBoards.

Related

UWP SplitView CommandBar content binding

In my app i have a SplitView and set the content as Frame for each page. Each page contains its own CommandBar. This works without issue. Now i am creating VisualStates for a mobile view. In it i want to hide the PlitView in the closed state (inline). But now i need a way to add only the "HamburgerButton" (in my case a RadioButton), on the top, for opening the inline SplitView. I have done it also, but the "HamburgerButton" is overlapping each pages Text on the CommandBar. So what is the best solution, create only one CommandBar on the MainPage (where my SplitView is) and bind the content, or create a CommandBar for each Page?
Best regards
I think creating one CommandBar in the MainPage and binding the content may requires more work. Don't forget that you may need to bind the Primary and Secondary Buttons too.
If you want to use a CommandBar in each page and one HamburgerMenu in MainPage, you can try this method.
Create a separate top Row in the Grid for the CommandBar to occupy.
Horizontally stack a transparent Rectangle of width equal to your "HamburgerButton" along with the CommandBar and place it in the above created row.
Create VisualStates to trigger on Phone and set the visibility of the Rectangle accordingly to shift the CommandBar to the right.
Check out Template10 PageHeader Control (Search for "VisualStateNarrow" and "Spacer" in particular). If you are not particular about developing these boilerplate code yourselves, check out Template10. It has many helpful controls developed by the community. Please pardon me if you already knew about this.
You can creat the Page TOP bar and in MainPage use the splitview.

Need to show usercontrol on the top in WPF

I have a user control that I am using for some purpose and it's movable on the screen. Actually I am creating an application using Leap Motion. SO wherever I move my figure on the screen a big circular cursor moves accordingly. But on some place it gets cut off or I would say it gets hide or overlapped due to some other controls. So I want to know, how can I placed it on the top of the mainwindow view. Is it possible using adorner layer? If yes, So can you please tell me how to do that in WPF?
I found few examples on net but they are creating a rectangle or some thing on adorner layer using drwaingcontext object, however I just need to show my user control on the top.
Please give me some idea
Thanks & Regards,
Vinod
You shouldn't need to use the Adorner layer to simply show a UserControl on top of other controls... of course that depends on exactly what is 'overlapping' or hiding it. If they are just other UI controls, then you can fix your problem in two ways.
The first is to simply declare your UserControl that you want to be on top of the other controls at the bottom of the XAML, eg. define that element last.
The second solution is to use the Panel.ZIndex Attached Property to place that element above all others:
<UserControl Panel.ZIndex="10" />

panorama control with scroll

I'm really new to programming but decided I will start learning c# development for windows phone 8. I know they have a button control in the toolbox but I am looking to make the kind of buttons you see on the start screen for the phone. No idea how.
Also I would love to know how to use the panorama control and how to incorporate the buttons asks previously to have an image and put into a verticals scroll layout, separated by panorama items of course. Please note as I said before I'm super new and don't know much yet.
To make start screen buttons alike (a.k.a tiles) take a look here. Download the examples and look under HubTile.
Now for the second part of your question all you need is a panorama page with a WrapPanelthat can also be found in the toolkit mentioned earlier.
So what you should be doing is adding a WrapPanel inside the PanoramaItem, and then the HubTiles inside the wrap panel. Here is an example:
<controls:PanoramaItem Header="hubtiles">
<Grid>
<toolkit:WrapPanel Orientation="Horizontal">
<toolkit:HubTile/> <!-- Change accordingly -->
</toolkit:WrapPanel>
</Grid>
</controls:PanoramaItem>

How do I disable user input on a WebView?

I'm having tons of issues trying to integrate Microsoft's WebView in my WinRT application and one of them is the following. I want to display the WebView and its content (which comes from a local offline server but that works like a charm) and I don't want the user to be able to click around ; basically completely disable user input on this WebView.
There is no IsEnabled property on this control so I tried:
Catching the many Pressed-like events and setting the Handled property of the event object to false in each one of the handlers
Catching the GotFocus event of the WebView to set the focus on another control immediately
Putting the WebView in a ContentControl, then set the IsEnabled property of the ContentControl to false
Obviously, none of these workarounds did work so I'm facing a brickwall here. Maybe some of you can help find a solution?
More details if that can help: the web page that is loaded contains an HTML5 canvas where the user can draw things (like in Microsoft Paint). There are also links (ahref). I dont want the user to be able to draw on this canvas, and I don't want them to be able to click on these links as well!
Thanks
Hi you can use a if the content is not animated then you can use a Rectangle instead of the WebView and in the rectangle you use a WebViewBrush, this actually take the webview and render it's content as an image on the rectangle. since it is an image no interaction is available on the rectangle, but if you have animation then you will lose them.
Generally this trick is used to show content onto the webview.

Showing content in frame interferes with animation on the page

I ran into a little problem while writing Windows 8 application on C#+xaml. My app has one main page, which is divided in two parts – ListView as a navigation panel on the left, and Frame on the right. All of that looks and works a bit like PC Settings panel. But there is one difference – when page into frame has enough content and it’s scrollable, I perform animation of collapsing navigation panel to icons-only state (when in full width it has text and icons).
So, here is the problem. Let’s say I’m on the first page and panel is collapsed. Then I go to the second page, and I've got to return to full-width state of panel. But since I’m doing it at the same time as showing content in the frame, there is a little freeze of animation, and it's becoming really noticeable when GridView has got a lot of items. So animation freezes on a half way, then GridView render all items images, and then it continue.
Only way to fix this problem I come up with, is to do navigation after animation completed. It’s doesn’t look very pretty, so I go on a blank page first, perform animation, and then go on target page. But this solution still feels wrong, and there still some problems with animation after resume from suspending.
So, is there any way to ensure that rendering of GridView will not interfere with my animation?
Thank you, and sorry for my English.
You can set NavigationCacheMode on the pages to Required and navigate through all the pages to preload them while hiding the Frame using the Opacity property, but that will be slow the first time you do it. Try to limit the number of bitmap pixels you need to decode and render on each page too. If all else fails - see if the Preload() method of the AlternativeFrame control from WinRT XAML Toolkit might be of help.

Categories