I made a WPF app that opens successive windows based on user interaction. For example, the first winodw asks what module the user wants to work on, when a selection is made and a button pushed, a new windows open showing some Vendors and summary counts. Selecting one of those vendors and pushing the Edit button opens another window that shows the details of that Vendor. Clicking a detail and then a button open yet another window where the user can change some numbers etc. Then the user closes that window, picks a different item and edits, or closes that window and picks a different vendor etc. Each window has its own view model currently. I want to get rid of all the layers of windows. Tab Control doesn't seem to be a good option, since the user will have to go through the correct sequences etc. What is the best way to change this to use only one window, and swap out what the user sees in the one window when he, for example, pushes a button to edit etc.?
Personally I prefer to use a <ContentControl /> for my content area, and to swap out the active content based on the user's current "window"
I have an example on my blog that you could look at, but the basic components look like this:
ViewModel:
ObservableCollection<IViewModel> AvailableScreens;
IViewModel ActiveScreen;
ICommand SetActiveScreenCommand;
With some XAML that looks like this:
<ContentControl Content="{Binding ActiveScreen}" />
And I usually use DataTemplates to tell WPF how to draw each ViewModel
<Window.Resources>
<DataTemplate DataType="{x:Type local:ModulesViewModel}">
<local:ModulesView />
</DataTemplate>
<DataTemplate DataType="{x:Type local:VendorsViewModel}">
<local:VendorView />
</DataTemplate>
<DataTemplate DataType="{x:Type local:EditVendorViewModel}">
<local:EditVendorView />
</DataTemplate>
</Window.Resources>
You can use a docking framework such as AvalonDock, which mimics the behavior of Visual Studio.
Related
Hi I'm a newbie to windows store apps and i want to create a pop up that'll show image .I'm currently using Prism framework and tried many things.However , I'm successfully able to launch the pop up using code behind file but i need it from View Model class. Please help.
You can use default winrt popups but if you want popups developed by yourself this is the way.
Create modal dialog user control, structure is following
<Grid>
<Grid Background="Black" Opacity="0.4"/>
<Grid HorizontalAlignment="Center" VerticelAlignment="Center">
<!-- your popup xaml -->
</Grid>
</Grid>
Of course, you have to set ViewModel in some way, e.g. through ViewModelLocator
DataContext="{Binding Source={StaticResource ViewModelLocator}, Path=ModalDialog}">
Add this user control to your main view ( root view ) or to all views where you want to have popup.
<controls:ModalDialog Visibility="{Binding IsVisible, Converter={StaticResource BoolToVisibilityConverter}}"/>
After this you can implement some service or use messenger to show dialogs. I know that it is maybe not so understandable but it is difficult to describe in all details. Feel free to ask.
I have the following code that adds a context menu to a textbox on the UI. The user is supposed to be able to bring up the context menu and select a new units to be used. So the method CurrentUnits in my view model is bound to the textbox. I want a context menu populated by all the potential units. So the method Units in my view model returns a string[] of unit options; such as inches, cm, feet, meters, etc. When the user selects one the method NewUnits_Click is invoked. All works fine, however the contextmenu does not go away when the user selects a menu option. Pressing somewhere else on the screen like the application menu bar will then clear it. Has anyone else seen this problem, or see something wrong with the code below. It seems to have something to do with the ItemTemplate/DataTemplate I have, as creating an set of menu items by hand works fine.
<TextBlock Width="100" Text="{Binding CurrentUnits}" TextAlignment="Right">
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu ItemsSource="{Binding Units}">
<toolkit:ContextMenu.ItemTemplate>
<DataTemplate>
<toolkit:MenuItem Header="{Binding}" Click="NewUnits_Click" />
</DataTemplate>
</toolkit:ContextMenu.ItemTemplate>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</TextBlock>
If you aren't using MVVM when working with WPF, I highly suggest you to start doing so. And even if you are not, I suggest that instead of binding to Click you instead bind on the Command property which wants something that implements ICommand. I think that the behavior you are getting is intended, buttons and menu items in WPF are intended to bind to Commands, it's not just WinForms 2.0.
Another solution would be to hide the Context menu in the code-behind. Perhaps this resource will help you in achieving that.
I'm developing a .NET 4.0 application using PRISM and MVVM, as well as WPF.
I currently have a shell subdivided in regions, with views inserted in them. When the user clicks on a button in one of the views, I would like a custom-made modal dialog to be displayed on top of all the views, but still within the same shell.
I looked at the StockTrader RI example and their implementation of the RegionPopupBehavior. Basically, they created a dependency property which allows them to define regions with a specific, custom-made behavior. The behavior is the one in charge of handling it's associated view's rendering, hence displaying it as a popup window.
The only downside to this approach is that all the other views are still active, so the popup isn't modal. I guess this can be resolved by manually disabling all un-needed regions in the shell, but I'm not sure how "clean" this is.
I was wondering if there were a better and simpler approach to displaying modal pop-up views in Prism ?
You might be interested in a custom PopupUserControl I have posted on my blog that behaves like that.
Usually I use it like this:
<local:PopupPanel
Content="{Binding PopupContent}"
local:PopupPanel.PopupParent="{Binding ElementName=SomeParentPanel}"
local:PopupPanel.IsPopupVisible="{Binding IsPopupVisible}">
<local:PopupPanel.Resources>
<DataTemplate DataType="{x:Type local:SomeViewModel}">
<local:SomeView />
</DataTemplate>
<DataTemplate DataType="{x:Type local:DifferentViewModel}">
<local:DifferentView />
</DataTemplate>
</local:PopupPanel.Resources>
</local:PopupPanel>
Although you can also just write the Content in the popup instead of binding the Content property
<local:PopupPanel
local:PopupPanel.PopupParent="{Binding ElementName=SomeParentPanel}"
local:PopupPanel.IsPopupVisible="{Binding IsPopupVisible}">
<Border BorderBrush="Blue" BorderThickness="2">
<local:MyUserControl />
</Border>
</local:PopupPanel>
I'm wondering how to go about creating different views in the main window when a button is pressed. I'm not sure of the correct terminology, so that has hampered my google fu.
I'm thinking that the main viewing area would be a content control, that I could change when a event happens. I made a small drawing to help illustrate my idea / thought.
Any input will be appreciated. Thanks!
It would be really easy to implement this senario using MVVM approach....
Make a ViewModel for you MainView. Then Define Properties of the ViewModels of your UserControls
For Example You have Two UserControl as FirstView and SecondView then make a properties in your viewmodels as ViewToLoadProperty of the type ViewModel (usually called as ViewModelBase)
Set bindings as
<!-- Panel For Hosting UserControls -->
<Border Grid.Column="2">
<ContentControl Name="userControlContentControl"
Content="{Binding Path=ViewToLoadProperty,
}">
<ContentControl.Resources>
<DataTemplate DataType="{x:Type ViewModelLayer:FirstViewModel}">
<ViewLayer:FirstView/>
</DataTemplate>
<DataTemplate DataType="{x:Type ViewModelLayer:SecondViewModel}">
<ViewLayer:SecondView />
</DataTemplate>
</ContentControl.Resources>
</ContentControl>
</Border>
<!-- Panel For Hosting UserControls -->
Then when you click the button Use a command to set the respective ViewModel Intance to this(ViewToLoadProperty) property...(Use RelayCommannds or something like it)
DataTempates would do the rest of the job by selecting the right View according to the right type of ViewModel
YOu can use MVVMLight toolkit if you are implementing MVVM Pattern.. :)
On the right you could have a frame. Then the button would bind a different page or user control to the content of that frame.
So I have a Panorama control and the PanoramaItems are programmatically added to the control using the following template.
<UserControl>
<Grid x:Name="LayoutRoot">
<controls:PanoramaItem Name="sitePanoramaItem" Header="{Binding Name}">
<Controls:DockPanel VerticalAlignment="Stretch">
<StackPanel Orientation="Horizontal" Margin="0,10,0,0" Controls:DockPanel.Dock="Top">
<Image Source="../Images/action.png" Width="64" />
<TextBlock Text="{Binding Stats, Mode=TwoWay}" FontSize="45" Margin="15,0,0,0" />
</StackPanel>
<Grid x:Name="graphCanvas" HorizontalAlignment="Stretch" Margin="10,10,10,10"> </Grid>
</Controls:DockPanel>
</controls:PanoramaItem>
</Grid>
</UserControl>
When I click on graphCanvas what I'd like to do is sorta pop the graphCanvas out and display that fullscreen then when I click again restore it to where it was. I've been all over this site and Google and can't find anything similar to what I'm looking for.
I would still like to maintain the Panorama control functionality so that the graphCanvas is still the only one visible but you can cycle through them. Currently I have it sorta working in that I remove the Grid from the DockPanel and put it directly in the LayoutRoot while making the sitePanoramaItem collapsed. However, it's not fullscreen as the Panorama name is still visible (I guess I could hide that as well...) When I put the graphCanvas back int he DockPanel the size of the canvas is all screwed up.
I was hoping there was a simpler way.
Is it even possible?
It is possible to create the UI you describe but it's not going to be simple. You're on the right track with removing it in code and adding it the LayoutRoot and making the Panorama hidden. However you would have to code the scrolling behavior yourself and that is going to be quite tricky - especially making it feel the way to panorama does.
One trick you could try is actually layer a PivotControl on top of your Panorama and have it be collapsed by default. Also edit it's template to remove all default content eg: remove the header control, set margins to 0, etc). Then when you want to go full screen you can remove all the graphCanvases from the Panorama items and and add them to new PivotItems in the PivotControl. Then hide the Panorama and show the Pivot. This will give you scrolling capability for free and the illusion of full screen.
Having said all that I'm not sure I would recommend this. The more common approach would be to simply be to navigate to another page when the user selects an item and handle the full screen aspects there (possibly using the Pivot control again for scrolling). And when you want to leave "fullscreen" mode simply navigate back to the first page. Handling Tombstoning of the fullscreen state will be much easier with this approach for one thing.
You can try making the graphCanvas a Page and putting it in a different XAML. Then add a frame (name it InnerFrame for example) in the same place where you have the graphCanvas right now and navigate to that page with InnerFrame. When the frame is clicked, you navigate with the RootFrame of the app to your graphCanvas page. When you decide to close it, just navigate back with the RootFrame.
Hope it's clear enough :)
Edit:
Navigation in WP7 works very similar as the standard navigation in Silverlight 4, but it's a bit more restrictive. Just throw a PhoneApplicationFrame in your XAML like this:
<phone:PhoneApplicationFrame x:Name="Frame" />
This is basically the same as a Silverlight frame. All the pages you create inherit from PhoneApplicationPage by default, so they can be showed in a frame without any changes.
Your whole application actually runs on a PhoneApplicationFrame. If you take a look at your App class you will see this:
public PhoneApplicationFrame RootFrame { get; private set; }
Here's the MSDN documentation for the navigation system on WP7