Flip Page animation in UWP - c#

I am developing a UWP app for file reader in C#, and I use two UserControl include Image to render the file page bitmaps. Now when user horizontally swipe the either screen, I'd like the file will flip to previous or next two pages, I just update the page buffer directly now, but I want the animation of the flipping page process, the animation effect is simulating turning a real book, can anyone help? So when user swipe on right screen from right to left, page 1 and 2 will turn to page 3 and 4.

Related

Text disappears once ARCore loads in Unity app

I am using ARCore on Unity. I have a canvas in camera space and a text UI component as a child of the canvas to be used to display information to the user while they use the app. When my app first loads I can see the text on my mobile phone (during the initial loading screens where it says "Unity" and the screen is black). As soon as the app loads and the camera screen is displayed the text UI component for the most part disappears. I can still see a gray line where the top of the text should be. I am not doing anything programmatic at runtime to the mesh or anything. I am updating the actual text value. I don't see any crashes or errors logged using adb. Is there something I am missing with using UI and ARCore?
Press Play, switch to Scene view, select your text UI in the hierarchy, on the top menu open GameObject->Align View to Selected.
If you see your text ui in the scene then you know it's still there, just need to figure out why it's not displaying. My guess is it could be a scale issue, where the text ui scales in AR mode.
Start with Canvas Scaler component (attached to your canvas) and set "UI Scale Mode" to "Scale with Screen Size." Then in your Canvas Component (attached to your Canvas) change "Render Mode" to "Screen Space - Overlay."

Xamarin C# XAML Cross-Platform With Buttons Bound To Custom Graphic

Here's the basic idea of what I'm trying to do; have this (see image link) graphic with roots going into the ground and the roots split off into different directions. At the end of each root I'd like to place a round button with a number in it which will take them to a new page. (the image only shows a few buttons but later on, for updates i'll have more lessons, meaning more buttons, and so the page would scroll down revealing more buttons)
What I have tried; I tried drawing a dynamic root system graphic, which worked and resized properly based on the screen size. But Skiasharp doesn't really work with absolute layouts and adding buttons on top of the SKCanvas. From my understanding absolute layouts are the only way to but buttons in customs spots.
I'd like to have the Graphic dynamic and locked onto the buttons. I'v tried just placing the buttons over the top of a background image that already had the root graphic on it. But, they don't always align properly.
Is there a way to make this work, or another way to draw the graphic and have the buttons bound to the end of the roots? Or am I just stuck with not having them align with a static background image?
Concept image for app page is below:

windows store app page blank when navigating to it

I have 3 pages in my application.
First page: 5 Buttons, each navigates to different page (currently, only the first button works).
Second page: Back Button and ListView, the ListViewItems are UserControlItems with Button, Image and TextBlock. When you click on the Button (of the UserControlItem) it Navigates to the third page, which is Media Player Page with alot of controls.
Third page: Media Player page with alot of controls such as MediaElement, Slider, Buttons and more
When I navigate from Third Page to Second Page using the Back Button, sometimes the screen stays black (the color of the theme) and sometimes it loads too much time. In addition, the ListView has visible vertical scrollbar (always) which is not shown unless you move your mouse on the ListView.
How to fix these problems?
EDIT 1:
link to my project - put some .wmv/.mp3/.mp4 files in the Videos Library folder.
EDIT 2:
I investigated the black page issue abit more and I found that the MediaElement is the cause.
The MediaElement stores the stream and it slows the computer.
In order to resolve to problem, when you click on the GoBack Button, it first set the source of the MediaElement to null, and only when the MediaElementState == Closed, I go back - seems to solve my problem (since I applied the solution I didnt experience more black screens).
About the scrollbar - I think I'll be able to solve it if I simulate MouseOver over the ListView - no idea how to do it
Ok Ill List out the issue one by one.
List View Scroll Bar : Since we are developing for a potential touch surface so scrollbars are not meant to be visible every time.
Blank Page : When you press the back button then Big page Ie third page gets stored in the forward navigation property of the history element. Additionally all the resources that were being used in the third page is disposed. So the time taken to go to second page becomes huge.
Please try havig a fourth page which will have less controls. And see if any Black background issue is occuring or not. It will give a better and clear picture.
--- Update Code for permanent visibility of scroll bar---
Please download the code for listview styling from
Listview styles
add your code to the project
and replace all FadeOutAnimation By FadeInAnimation.
This was the quickest I could do for a solution. For a Better one you can always play with the styles.
Ohh one more thing please add
Style="{StaticResource ListViewStyle1}"
To your list view. please try and let me know.

How to locally disable sliding in a panoramic app WP8

I am making an app with panoramic view where the user can select a color hue, saturation and value from a color wheel and SV graph like this:
http://i.imgur.com/JM1FD1z.jpg
http://i.imgur.com/51ymotz.jpg
The user can either tap or drag a pointer across the square, coordinates determine the values. But when they drag(mousemove), the app will also slide to the next screen.
Is there a way I can disable the slide to next page if the sliding is done within the graph? It should function normally outside the graph area.
Something like a disable panoramic slide function that can be implemented within the graphs mousemove event handler?
Putting the hue wheel and SV-graph on separate pages will dramatically reduce the combined dynamic functionality of the two so I'd prefer them to be on one panoramic page.
This doesn't seem a good use of a panorama. This will lead to "gesture competition" between the touch action on the controls and the panorama itself. The same problem arises if you use a Pivot control.
If you want Hue and SV on the same page, why don't you put them on the same page and allow switching of the mode by a button, say on the app bar?
You can have both controls in the XAML tree and show the one which is active and hide the other. You can do this by changing the Visibility of each control.

Which WPF Layout and Controls Should I Use for a Storyboard Effect

I want to create a layout that has small panels at the top and bottom and then a main panel in the center that fills the remainder of the window. The main window should have the functionality of a tab panel but instead of simple tabs I want the tab pages to slide on and off the screen. It will be like one large storyboard that slides back and forth and only displays one scene at a time.
So lets assume there are 4 tab pages. Initially the first page will be visible, the 2nd page will be directly off the screen to the right, the 3rd page will be 2 pages off the screen to the right and the 4th page will be 3 pages off the screen to the right. When the user clicks to see the 3rd tab page the layout will slide left 2 pages. Then if the user clicks to see page 1 again, the page will slide back right 2 pages.
The window needs to be resizeable, so I can't use fixed sizes and offset.
Do I just need to use a StackPanel and programmatically set width, height, and position or is there something built-in that I can use?
Hrrrm the first idea that comes to mind is use a ScrollViewer and hide the ScrollBars.
You could then display all your items in a StackPanel in the ScrollViewer, and when you want to scroll an item into view, simply animate the ScrollViewer's position so it smoothly scrolls to the specified item.

Categories

Resources