I have an application that is made using WPF, i have multiple pages and a form that contains a frame, and i load the pages on a frame, and each page has back and next buttons.
what i want to do is to animate the navigation of the pages on the frame in a way when i press Next, the current page slides to the left and the following page slides also to the left and replacing the the current page, and when i press back the current page slides to the right and the previous page slides to the right replacing the current page.
how to do that?
I may be proven wrong here but I don't believe WPF exposes a way to implement this easily. There are methods for overriding existing transition animations in UWP.
For WPF you can handle this one of two ways...
Start the animation of the page sliding out. When the animation is
complete let it fire an event that will then call frame to change
pages.
Have the page offset by default and perform the animation to slide it
in to it's original spot.
or....
Capture the Navigating event of the frame, monitor NavigationMode, call the animations, make the navigation wait or mark e.Handled == true and recall it after with a flag that says it can continue.
Do the same for transitioning in.
Here's the problem; you won't have both pages on the screen at the same time and you'll have to write some fancy transitioning code to make all this work correctly. I would go as far as introducing custom controls with interfaces or DependencyProperties that have the transitioning functions embedded etc.
That said; I have had this problem in the past and to be fair I just gave up on the Frame control and pages and did it all manually. In the end it felt faster, easier to maintain, and I was able to achieve any effect I wanted.
So if you want my honest answer just don't use Frame and do it all manually... (This is speaking for WPF only. UWP has other features and more reasons to use the built in navigation than WPF does.)
Well, I believe the simplest solution would be to drop using Frames and implement your own navigation mechanism using something along the lines of the TransitioningContentControl (so you don't have to implement the transitions from scratch).
Basically, you'd have an list of your controls, an TransitionContentControl and two buttons (back and forward). So all you'd have to do is handle the clicks on the buttons and set the Transition accordingly (eg. when back button is pressed set it to Left and load the previous page).
Related
I have been trying lately to have one constant menu for all the screens, but I couldn't find any solution for that! The only solution was to copy the menu code and paste it in every single screen with their click events code. Do you have any ideas about this?
I want one stable / constant menu in my whole project.
Thanks.
Approach 1: You can create a user control that wraps whole menu and its item commands. This seems more proper, flexible and straightforward approach than 2nd one below. Get started on how to create user controls in WPF.
Approach 2: Have a one main window in application with a Menu and a Frame that will host rest of the views of your application. These views will be result of the menu item command. Frame and Page are generally used in application where navigation is desired. For your case I repeat Approach 1 suits and sound logical more.
Has anyone seen an implementation or plugin for extjs where you can "pull off" or "dock" tabs/windows the way you can with a browser? Is it even possible?
Searching has not revealed much but I did come across a proposed solution in an older version:
http://www.sencha.com/forum/showthread.php?16842-Dockable-floatable-panels-in-ExtJS
#DmitryB
To clarify, in chrome if I have multiple tabs in the same window like so:
And I "drag" one of the tabs, it pops off into a new window:
I imagine you might accomplish this by moving the content of the tab panel into a window but not sure how to go about it.
In a nutshell:
- Make the tabs draggable, watch for the drag event and mark the
tab-strip as your "safe" zone
- When a tab is dragged and then "dropped" (as in, the drag event ends) you do a check:
> Is the tab within the safe area?
No: Create a new Ext.Window at the x/y of the mouse, copy the components/HTML
out of the original panel and insert them into the new window. Destroy the
original panel.
Yes: Do nothing.
Unfortunately, I am still quite jaded from learning D&D in ExtJS3, so I can't offer any help with this and real code pertaining to ExtJS 4, however the concept seems relatively straightforward to me. I would say you're going to probably want to do your best to NOT have this be flashy - unless you REALLY REALLY need to, I wouldn't worry about showing the panel's contents while you drag the tab - much less show the panel itself. Just let the tab element get dragged around the screen and copy when it's released outside of the safe zone.
I have several Wpf pages in my project, these pages have different forms and ui control indide theme. The image below shows the mainWindow and there are two button.
I want to show a specific page when I click on + or Edit button using the Frame control which is highlighted.
apparenatly this woks:
Page1 me = new Page1();
mainFrame.Content = me;
But it has an IE navigation sound and a toolbar appears after going to page2.
any better way to show diffrent pages and not using a frame?
You may want to convert the Page into a UserControl. You can then put that control inside some other container, such as a Grid. You'll have to manually swap out the pages in the container when navigating, but it looks like you're doing that anyway.
The purpose of the Frame control is to allow navigation. If you don't want navigation, then don't use Frame. You can turn off the navigation toolbar, but that won't actually disable navigation - there are mouse buttons and keyboard shortcuts for navigating back.
If you just want to host a UI element without navigation, use something simpler, like a Border element - put the content in its Child property. You can change the Child as many times as you like at runtime.
I was able to set the frame control's NavigationUIVisibility to Hidden. This solved the problem for me. I am using Visual Studio 2010 though so it might not be applicable to older VS versions.
Ian Griffiths, what you suggest increases the workload on the developer substantially. And you are stepping outside of the underlying paradigm of XAML.
In my case I'm developing a game application and have chosen WPF as the UI platform as much as possible. For me that means a intro screen, character select, etc. The purpose of Pages is to encapsulate the navigational need of such an application.
I suspect your downvote is due to your statement "If you don't want navigation...". Upon re-reading the original posters question I see he does want navigation, he just wants it on his own terms. I would have voted you down too. YotaXP's solution neglects the issues with using a User Control, particularly if it may contain other User Controls. It looks like Chris Calvert came up with an actual solution to the poster's issue within the parameters of the problem.
I would be curios if I could override the navigation hotkeys and such within the existing paragimn but that's properly in its own thread.
I am currently loading the default file, page.xaml, but in that page, I am loading the content from another xaml file. With each "page" change, I just load the content from a different xaml file, and on and on.
Example: this.Content = new StartPage();
I'm running into some syntax issues, however, because of the way I am changing my content, and was wondering if there is a definitive answer on how to accomplish this?
For example, when trying to capture user's keystrokes, I would normally do:
this.Keydown += new KeyEventHandler(this_KeyDown);
but that event handler doesn't even fire in my situation. So, I'm looking for a new approach to my content-switching approach before revisiting the keystroke problem.
Have you looked at using Silverlight 3. It has a new Page Navigation functionality.Silverlight 3 Navigation
As far as content switching goes, I've always done what you propose in the question. Normally I create a MainPage.xaml which has has the frame of the application (usually a Grid for me). One of the cells in the Grid is considered the content area of the app. When the user takes an action that I would consider to be navigation, I create a new instance of a Page, which for me is a file like MyUserControl.xaml, and then add it to the appropriate content cell in the Grid. MainPage stays around for the life of the application and assists with navigation.
If you want something fancier, and want to take advantage of browser based back/forward buttons, you could look into the SL3 navigation like Correl suggested.
A Big problem with what your're doing is that journalization doesnt take place automatically when you swap out framework elements by creating them and plugging them in the codebehind. This means that you lose the back and forward functionality of the browser. You can manually journalize stuff when you swap out pages, but this is simply a hack to get your navigation approach working.
Take a look at Prism at www.compositewpf.codeplex.com/, specifically the MVVM method of GUI design, it'll save you alot of time later on. And remember, you dont need to go hardcore when you look at MVVM, u could always cut out alot of "dynamic" functionality if you're a one man band
Also swap to silverlight 3 and use the navigation application. If you cant, take a look at helix 0.3, it'll provide a more asp oriented approach to navigation. the link provides a really really good starting point, its a three part article, i suggest you read all three and download the sample application and understand it.
A book could have been written on your question, this has to suffice for now.
Is there a simple way to tell what triggered Click event of a Button apart from setting multiple flags in Mouse/Key Up/Down event handlers? I'm currently only interested in distinguishing mouse from everything else, but it would be nice to handle Stylus and other input types if possible. Do I have to create my own button control to achieve this?
Edit: To clarify why I care: in this particular case I'm trying to implement "next" and "previous" buttons for a sort of picture viewer. Pictures in question may be of different size and buttons' positions will change (so they are always centered below picture). It's quite annoying to follow such buttons with mouse if you need to scroll through several pictures, so I want to keep mouse position constant relative to clicked button, but only if it was clicked by mouse, not keyboard.
Edit2: It does not matter whether the buttons are on top or down at the bottom, since the center can change anyway. "Picture viewer" here is just an abstraction and in this particular case it's important for me that top left corner of the picture retains it's position, but it's out of the scope of the question to go in details. Scaling the picture is not so trivial in this sort of application as well, so I do want to know the answer to the question I asked not going into UI implementation discussion.
if (InputManager.Current.MostRecentInputDevice is KeyboardDevice)
You should instead handle specifically the MouseXXX, StylusXXx, and KeyboardXXX events.
Could you elaborate on why you would care?
Having written many custom controls myself over the years, I cannot recall one instance where I cared how a click event was triggered. (Except for that pre VB6 control lifecycle glitch that fired the got focus-click-lost focus in a different order depending on whether you clicked a button, used an accelerator key, or pressed ENTER as the default).
Personally I find it annoying when people place buttons at the bottom of Windows forms and web pages. Read some of the literature on UI and you will find that most people don't even get that far if they don't find something interesting on the page/form. I like to be able to click next as soon as I know the content is of no interest to me, so keep the nav buttons prominent at the top.
I would put the prev/next at the top of the picture where you can control their position. Dancing those buttons around goes against most opinions on UI consistency. Further creating a different experience for a mouse user versus a keyboard user also goes against most current wisdom on good UI design.
The alternative is to choose a constant max size a picture can obtain on the UI and if it exceeds that scale to fit, otherwise allow it to change freely within a frame. This keeps your buttons at the same place if you absolutely must have them on the bottom.
You could create an enumeration with the different devices, have a global property that you set every time the mouse/keyboard/etc. is initiated, and just refer to this when needed.