Page animation in WPF Slide In and Out - c#

So I am developing a WPF application. I am kind of newbie in this area.
Idea:
I need to navigate to a new page whenever there is a interrupt.
I have implemented page navigation using Navigation service. I have entry and exit animation for few pages.
For entry animation I have used page triggers and loaded routed event
For Page exit animation:
I store the exit animation in storyboard in page resources.
Before navigating to next page, i check whether there is a exit animation storyboard, if available, begin storyboard and in storyboard completed event , I navigate the page.
The main page has the frame and other page is navigated in the frame. Whenever i receive interrupts through events I use:
frame.Navigate(targetPage);
One the Page's XAML (Lets say Page A) looks like this
<Page.Resources>
<system:Double x:Key="SlideOffSet">800</system:Double>
<Storyboard x:Key = "ExitAnimation">
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
From="0" To="{StaticResource SlideOffSet}"
Duration="0:0:1" />
</Storyboard>
</Page.Resources>
<Page.RenderTransform>
<TranslateTransform X="{StaticResource SlideOffSet}" Y="0" />
</Page.RenderTransform>
<Page.Triggers>
<EventTrigger RoutedEvent="Page.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
From="{StaticResource SlideOffSet}" To="0"
Duration="0:0:2" Completed="Timeline_OnCompleted"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Page.Triggers>
Code behind of the Main Page looks like :
in the interrupt received event:
Code flow is
Eventargs contains the TargetPage Object
check for whether animation is present or not. If not present navigate to TargetPage
if exit animate is present
topage = e.MyEventString; // obtained as event args
currentPage = frame.Content as Page;
sb = (Storyboard)currentPage.TryFindResource("ExitAnimation");
if (sb != null)
{
if (isAnimating == false)
{
isAnimating = true;
sb.Completed += Sb_Completed1;
sb.Begin(currentPage);
}
}
else{
this.frame.Navigate(topage);
}
completed event looks like
private void Sb_Completed1(object? sender, EventArgs e)
{
isAnimating = false;
this.frame.Navigate(topage);
sb.Completed -= Sb_Completed1;
}
a normal log looks like this (i.e when an interrupt is received after entry animation is completed) :
07:18:23:103 <1> Event received for navigation - target page : Page B
07:18:23:103 <1> Current Page is Page A
07:18:23:103 <1> No Exit animation found for Page A. Hence navigating to Page B
07:18:23:123 <1> Frame Load Completed. Page is Page B
07:18:25:133 <1> Entry Animation Completed
07:18:27:103 <1> Event received for navigation - target page : Page C
07:18:27:103 <1> Current Page is Page B
07:18:27:103 <1> Exit animation found for Page B. Starting Animation
07:18:28:213 <1> Exit animation Completed. Navigating to Page C
07:18:28:280 <1> Frame Load Completed. Page is Page C
07:18:30:133 <1> App close
So we use appium to test our navigation.
Issue here is
whenever there is a ongoing animation initiated at load event and i receive a interrupt at the same time, I try to do exit animation when previous animation is ongoing on the same page.
Sometimes, the entry animation doesn't get completed and also looks like entry animation doesn't start and hence page is not navigated.
error log looks like (when an interrupt is received when entry animation is ongoing)
07:18:23:103 <1> Event received for navigation - target page : Page B
07:18:23:103 <1> Current Page is Page A
07:18:23:103 <1> No Exit animation found for Page A. Hence navigating to Page B
07:18:23:123 <1> Frame Load Completed. Page is Page B
07:18:23:133 <1> Event received for navigation - target page : Page C
07:18:23:133 <1> Current Page is Page B
07:18:23:133 <1> Exit animation found for Page B. Starting Animation
07:18:32:133 <1> App close
--> Seems like Entry animation is not completed ! and exit animation didnt begin/ completed ???
I tried using compose handoffbehaviour for exit animation :
sb.Begin(currentPage,HandoffBehavior.Compose);
looks like entry animation gets completed now but exit animation is not and hence page is not navigated
07:18:23:103 <1> Event received for navigation - target page : Page B
07:18:23:103 <1> Current Page is Page A
07:18:23:103 <1> No Exit animation found for Page A. Hence navigating to Page B
07:18:23:123 <1> Frame Load Completed. Page is Page B
07:18:24:133 <1> Event received for navigation - target page : Page C
07:18:24:133 <1> Current Page is Page B
07:18:24:133 <1> Exit animation found for Page B. Starting Animation
07:18:25:133 <1> Entry Animation Completed
07:18:32:133 <1> App close
--> Seems like Exit animation is not getting fired / completed?!
How can i solve this problem . Any help would be appreciated.`

Related

Is there a way to disable back or forward navigation in Webview2 winforms

In webview2, setting source property to Uri for navigating.
Let's say First URL is opened in webview2 then navigated to another URL.
With the back button on Right-click context menu, able to navigate to the first page.
From google search, found there is no direct way to disable back and forward as of now.
In the normal system forms browser, performed an approach like below which is working
added a bool variable(like IsMyNavigationCall), setting it to true whenever just before navigating to some URL
Added a check in NavigationStarted event and if it's false(when navigation triggered from actions like back) cancelling the request and resetting the bool variable.
In Webview2, it's not working. The problem is navigation is not cancelled even after setting CoreWebView2NavigationStartingEventArgs.cancel to true.
Is there any way or kind of hack to prevent navigation between the back and forward?
It seems that you're looking for CoreWebView2.HistoryChanged Event. In order to enable/disable a "Back" button and a "Forward" button when a new URL is navigated to in WebView2, try the following:
Given:
WebView2 control: webView21
Back button: btnBack
Forward button: btnForward
//subscribe to CoreWebView2 events (add event handlers)
webView21.CoreWebView2.HistoryChanged += CoreWebView2_HistoryChanged;
...
private void CoreWebView2_HistoryChanged(object sender, object e)
{
btnBack.Enabled = webView21.CoreWebView2.CanGoBack;
btnForward.Enabled = webView21.CoreWebView2.CanGoForward;
}
You can disable the context menu and the accelatorkeys via CoreWeView2.Settings
https://learn.microsoft.com/en-us/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2settings?view=webview2-winrt-1.0.1245.22#arebrowseracceleratorkeysenabled
https://learn.microsoft.com/en-us/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2settings?view=webview2-winrt-1.0.1245.22#aredefaultcontextmenusenabled
Example:
webView.CoreWebView2.Settings.AreDefaultContextMenusEnabled = false;
webView.CoreWebView2.Settings.AreBrowserAcceleratorKeysEnabled = false;

DevExpress BlazorServer DataGrid LayoutChanged Event doesn't fire after refresh

the problem:
when a user refreshes the page and then changes the layout of the data-grid there's no LayoutChanged event. Before a refresh the event fires just fine.
the suspect:
in my razor component is a if-condition around the whole html which checks if the base-component is initialized because the LayoutRestoring event fires when the grid initializes but i need some data the base-component handles. When I remove the if-condition the LayoutChanged event fires just fine even after a refresh.
why I do it that way:
balzor renders a component before doing the first await in the OnInitializedAsync method and after the OnInitializedAsync method is finished. When the data-grid is initialized the LayoutRestoring event is fired but for loading the right layout I need some information that the base-component handles. I can't move the functionality from the base-component into my component and the user should not press a button to save the current layout.
This was a bug in the code from DevExpress. supportcenter.devexpress.com/versionhistory

WPF form controls(Next button, cancel button) gets disabled in background

I've a WPF page that contains next and cancel navigation to subsequent pages. Next button gets enabled based on certain validations. On click of another button in the page, another .exe gets opened and the 1st page goes to background. After finishing the tasks in opened exe, if the 1st page is not clicked, Next button and close button stay disabled. Once I click on the form, they get enabled.
I checked that if the 1st form is in background, CanExecuteChanged function gets called only when the form is clicked manually.
How to make the 1st form active again after the 2nd exe is closed?

windows silverlight app stuck on one page

In my windows phone app I am doing a scanning process, wherever I am in the app, when the scan button is pressed on my bottom appbar, I navigate to my scan page, known as ScanView.xaml.
Problem:
I have overridden onnavigatedTo method of scanView to initiate scanning screen.
When I press back button while I am on the scanning screen It goes back to ScanView.xaml and hence onnavigatedTo method is again called and my scanning screen again appears.
What I want to do is, when I press back button while on scanning screen it should navigate directly back to my mainpage.xaml
P.S : I have tried overriding the backbutton handler, but it is still not working.
Here is my code.
protected override void OnNavigatedTo(NavigationEventArgs e)
{
//this method is invoked as soon as we are navited to the ScanView
Scanning();
}
Thanks in advance
Just remove ScanView.xaml from the navigation stack (it is the item at the top of the stack) when navigated to the scanning page.

WPF + UserControl + OnClosing event

I write an application in WPF where I have one main page and one user control in it. I need to call function when I close the page where user control is embedded. I can't call this function from the main page, I need to do it directly in user control (as I don't have access to main page). There is an event unloaded for user control, but it is called to late. How can I get something like onclosing event?

Categories

Resources