WPF MVVM UserControl Binding to create a Wizard UI - c#

I m working in a WPF MVVM Project and I am using one Wpf Window. In this window i have a space for one usercontrol and two buttons next and back. When i click the next button I want usercontrol1 to be replaced with usercontrol2. etc.

Sounds like you're trying to create a wizard-style user interface.
This Code Project article may help. And right here is a good place for getting started too.

You can have Wizard user control which is binded to WizardModel, In the Wizard control put ContentPresenter control, and bind it to WizardModel's WizardPage property. And by changing that WizardPage property, you can change wizard page from model.
Hope this helps, here used the same mechanism for changing views

Related

C#, WPF, MVVM, Creating a viewmodel for message dialogs/confirmation dialogs?

I am not using anything other than a simple WPF application project in visual studio. I've implemented an mvvm application.
I want to display a list of content changes made by a user. I have a main window view model and it currently just builds a strings with changes. I have objects that I can reuse to display their properties (the content).
Currently, I use a MessageBoxResult to show a really long string with the changes. This is a terrible design (I know), but I couldn't really find an answer to what class a regular wpf project has that would allow me to achieve what I want.
I know there is a popup class I can use. In practice, which is better-- another view model for the dialog, or a popup?
Can anyone provide a simple example of one of the two approaches?
Thank you in advance for your response.
What I've done in the past is have a simple Border control, and inside of a TextBlock and whatever Button controls I need. I bind the TextBlock.Text to a public string property named "MessageBoxMessage" which calls OnPropertyChanged(). I bind the Command of each Button to a separate public ICommand which specifies what action to take in the view model when the button is clicked. I then bind the visibility of the Border control - which contains all of the other controls I mentioned - to a Visibility property.
When I want to show a dialog, I set the MessageBoxMessage to the message I want to show, makes sure the commands are set properly, and then set the Visibility on the Border to Visibility.Visible. This shows the box (border), message, and buttons.
You can even implement a semi-transparent rectangle underneath the border (over the rest of the form) that you set to visible at the same time. This will give you the nice "form dimmed" effect and also block the normal form controls from being clicked. A general note - for this to work, these controls need to be at the very bottom of your XAML as the z-index among controls at the same level is inferred from their placement in the XAML - lower in the code is top level on the form.
Let me know if you have any questions about implementing this if it sounds like what you are looking for.

WPF, Different UserControl Navigation on the same TabItem

http://s7.directupload.net/images/140511/66z6w2tq.jpg
As you can see on the picture I am explaining everything with a Schema, I have a TabItem and on this TabItem I want to change the DataContext everytime with a Button. What I mean,is that I want to navigate through different UserControls but to stay on the same TabItem from a TabControl. I dont know how to Navigate through different ViewModels and everytime my values not to change from my Elements. I also could not find an Example of the same situation. Any Help with a Code Snippet or a full example will be appriciated.
Thanks in advance.
WPF/MVVM
I think this is a good case for using pub sub with EventAggregator or MvvmLight's Messenger.
You can then loosly coupled notify the MainViewModel to exchange controls or views within a tab.
Basically you can notify another ViewModel with another scope to do certain changes and then subscribe to it.
A possible structure could be:
- A MainViewModel with a collection of TabItemViewModels
- A single TabItemViewModel could contain also Controls and nested ViewModels
If you want to change a tab send a ChangeTabMessage to the MainViewModel
If you want to navigate within a tab use also Messaging or navigate as you do today.
Check out the EventAggregator here: http://msdn.microsoft.com/en-us/library/ff921122.aspx
or check out MVVMligh Toolkit Messenger ...
HTH

WPF: One window, multiple views

Once I asked how to display multiple views in one window in a windows-forms-application (link).
Now I'd like to know how to do the same in an WPF-application.
You could have in your MainWindow.xaml, just one Stackpanel. Nothing else.
You define all your views in other xaml files. Just that the parent element is not a Window. You need to have it as a Grid/StackPanel.
When you want to load a new view, you just set the appropriate view's root element(or the view itself) as the Children of the StackPanel in MainWindow.xaml
Your best option is to use an MVVM framework such as Caliburn.Micro, which makes view composition very easy. In this case, you would have your shell screen for example, which would be a conductor, and each of your sub screens would just be other view models, which your shell would have references to, and each would become the active item when they needed to be displayed.
I would recommend you to go to MVVM framework . I think you need a MainTabControl which will have child controls. The child controls are not needed to be Windows but UserControls. You can use DataTemplates in wpf to choose the view according to the viewmodel.
Please do let me know if you need more explanation on this.

Creating a reusable interface element in WPF

I'm developing a WPF application in C# and was thinking about implementing a custom UI element accross various windows.
I would like to have a minimized tray (only about 4px visible) that expands after clicking on an icon next to the tray. The expanded version would show all controls and would minimize when I click the icon again. I created a quick HTML concept to clarify things.
I know I could put a stackpanel and button in my application and making both of them move up when I click the button, but then I would need to duplicate the code a lot.
Though I'm experienced with C#, I'm fairly new to WPF interface development/templates, but I'm sure there has to be a way so I can use that UI element accross my application without needing to copy/paste a lot of lines of code in my form class file.
I hope someone can help me, or at least point me in the right direction.
There are three ways to customize your elements.
1 If you only need visual modifications you can use styles to change the appearance of the .net default controls. You can even override / extend the default templates.
2 If you want custom logic in a control you can create a custom control. The framework brings a lot of "primitives" to build upon. Examples are ContentControl or HeaderedContentControl. Say you want to build a custom expander control you can inherit your custom control from HeaderedContentControl which provides you with Header and Content properties and you just have to implement the toggling logic yourself.
CustomControls are a good choice if you want to build basic functionality which can be used throughout your application. They can be themed/styled depending on the use case, too (see 1).
3 If you want to compose different controls into one control you can create a UserControl. User controls are composed using XAML. Most top level controls are user controls driven by a view model.
Your case can be build using a Popup and ToggleButton or an Expander.
The decision depends on the desired behavior. If you want the opened panel to move following content down you need a expander. If you want a dropdown like functionality you need popup.
If you use a popup just bind the IsPopupOpen Property to IsChecked of the ToggleButton and set PopupStaysOpen = false to wire the button to your popup.
If you use an expander control you should create a style which can be applied to all equal expanders in your application to minimize the required XAML in each view.
How about using Expander Control?
There's a control called an Expander that is perfect for this. You'll have to style it to look like you want, however it has the functionality you want built-in.

Expose multiple command in WPF user control

A better explanation, I hope:
I have a toolbar with 3 buttons on it, all three bound to a Command (including a CommandParameter)
this toolbar is used on several screens
the xaml of the toolbar is exactly the same over all those screens
I want to remove the toolbar instance and replace it with a user control that provides 3 commands, so I can keep the bindings in each screen. The plan is to later change the toolbar functionality, but the external programming interface (namely, 3 commands) is the same.
So:
I created a user control, and created 3 sets of dependency properties for each command (OneCommand, OneCommandParameter, OneCommandTarget) so I can use these for the binding.
I moved the toolbar xaml inside the user control xaml.
I modified the bindings on the toolbar buttons to bind to the intristic user control properties
on each screen (or really, only the first for now) I replaced the original toolbar with the user control,binding the new properties to the correct commands.
The control shows, but the buttons don't work.
That's about it.
--
Original explanation - not so clear:
I have a WPF user control encapsulating a number of buttons. Previously, the control was a Toolbar with a number of buttons on it, but since I need exact the same functionality on a number of screens, I refactored the toolbar into a custom control.
However, I'd like to keep the command bindings of the original buttons.
I created 3 sets of dependency properties (XCommand, XCommandParameter and XCommandTarget) on the usercontrol.
In the user control xaml I bind the "real" buttons to those properties (each button to each set of properties).
Where I use the usercontrol, I bind the new properties to the real command bindings.
In essence, I want to keep the ICommandSource functionality for each "command" that the user control exposes. However, this dual databinding scenario doesn't seem to work, or I'm doing something wrong. :)
Is there a better way to do this? All I need is to "bridge" the commands from outside the control to the inner buttons so the Execute and CanExecute functionality remains.
I solved this. There was a bug in my RelativeSource in the internal control bindings. It works fine as expected, now.

Categories