Using a Button to navigate to another Page in a NavigationWindow - wpf

I'm trying to use the navigation command framework in WPF to navigate between Pages within a WPF application (desktop; not XBAP or Silverlight).
I believe I have everything configured correctly, yet its not working. I build and run without errors, I'm not getting any binding errors in the Output window, but my navigation button is disabled.
Here's the app.xaml for a sample app:
<Application x:Class="Navigation.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="First.xaml">
</Application>
Note the StartupUri points to First.xaml. First.xaml is a Page. WPF automatically hosts my page in a NavigationWindow. Here's First.xaml:
<Page x:Class="Navigation.First"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="First">
<Grid>
<Button
CommandParameter="/Second.xaml"
CommandTarget="{Binding RelativeSource=
{RelativeSource
FindAncestor,
AncestorType={x:Type NavigationWindow}}}"
Command="NavigationCommands.GoToPage"
Content="Go!"/>
</Grid>
</Page>
The button's CommandTarget is set to the NavigationWindow. The command is GoToPage, and the page is /Second.xaml. I've tried setting the CommandTarget to the containing Page, the CommandParameter to "Second.xaml" (First.xaml and Second.xaml are both in the root of the solution), and I've tried leaving the CommandTarget empty. I've also tried setting the Path to the Binding to various navigational-related public properties on the NavigationWindow. Nothing has worked so far.
What am I missing here? I really don't want to do my navigation in code.
Clarification.
If, instead of using a button, I use a Hyperlink:
<Grid>
<TextBlock>
<Hyperlink
NavigateUri="Second.xaml">Go!
</Hyperlink>
</TextBlock>
</Grid>
everything works as expected. However, my UI requirements means that using a Hyperlink is right out. I need a big fatty button for people to press. That's why I want to use the button to navigate. I just want to know how I can get the Button to provide the same ability that the Hyperlink does in this case.

According to the documentation, only DocumentViewer and FlowDocumentViewer implement this command specifically. You'll need to either find a command for navigation that NavigationWindow implements, or set up a CommandBinding for this command and handle it yourself.

In XAML:
<Button Command="{x:Static Views:Commands.NavigateHelp}" Content="Help"/>
In Views (We have a Commands.cs file that contains all of these):
public static RoutedCommand NavigateHelp = new RoutedCommand();
In the Page contstructor, you can connect the two:
CommandBindings.Add(new CommandBinding(Commands.NavigateHelp, NavigateHelpExecute));
NavigateHelpExecute can be in the code behind (which is what we do), hook into a ViewModel event handler, or whatever. The beauty of this is that you can disable other navigation like so:
CommandBindings.Add(new CommandBinding(NavigationCommands.Refresh, null));
Hope this helps.

You will want to use the NavigationService of your NavigationWindow as follows:
XAML:
<Button HorizontalAlignment="Right" Name="continueButton" Width="75" Margin="0,0,8,11" Height="23" VerticalAlignment="Bottom" Click="continueButton_Click">
Continue
</Button>
C#:
private void continueButton_Click(object sender, RoutedEventArgs e)
{
this.NavigationService.GoForward();
//or
this.NavigationService.Navigate("Second.xaml")
}
With either of this you can use use this, I only show the NavigationService here for clarity

public class NavigateButton : Button
{
public Uri NavigateUri { get; set; }
public NavigateButton()
{
Click += NavigateButton_Click;
}
void NavigateButton_Click(object sender, System.Windows.RoutedEventArgs e)
{
var navigationService = NavigationService.GetNavigationService(this);
if (navigationService != null)
navigationService.Navigate(NavigateUri);
}
}
And then you can put the following in your xaml:
<local:NavigateButton Content="NavigateButton" NavigateUri="Page2.xaml"/>
Then you still don't need code behind your pages, and you don't need to add commands to your viewmodel.

Related

Issues with ApplicationCommands between modules in Wpf with Prism

I am using WPF with Prism.
I have a Custom Canavs DrawingCanvas.cs in Module A where i have set ApplicationCommands.Delete as commandbinding as follows.
this.CommandBindings.Add(newCommandBinding(ApplicationCommands.Delete, Delete_Executed, Delete_Enabled));
I have another Module B where i have a MenuItem delete, and another Button for delete. I have set command from xaml for both as follows.
<MenuItem Header="Delete" x:Name="menuItemDelete" Command="{x:Static ApplicationCommands.Delete}"
<Button x:Name="buttonDelete" Background="Black" Height="25" Width="25" ToolTip="Delete" Command="{x:Static ApplicationCommands.Delete}"/>
Here MenuItem for Delete works fine as expected.(MenuItem will be enabled when some drawing is selected in DrawingCanvas from UI and "Delete_Executed" in DrawingCanvas.cs will be called when on Delete menu item click)
But Delete button is always Disabled. It doesn't get enabled when some drawing is selected in DrawingCanvas from UI.
I am wondering why the same command working for MenuItem but not for Button in same view and same Module.
Can anybody help me with this? Am i doing anything wrong?
Thanks in advance.
The problem here is that the CanExecute for the ApplicationCommands.Delete returns false all the time. There is one way to solve this - through the Window's command bindings:
<Window.CommandBindings>
<CommandBinding Command="ApplicationCommands.Delete" CanExecute="CommandBinding_CanExecute"/>
</Window.CommandBindings>
The event handler would look like:
private void CommandBinding_CanExecute(object sender, CanExecuteRoutedEventArgs e)
{
e.CanExecute = true;
}
It can always be true if you want it to be enabled all the time or just add your condition as in when you want it enabled.

databinding in silverlight

I have a xaml with a button like this:
Button.xaml
<Grid x:Name="LayoutRoot" >
<StackPanel >
<Button Content="Button1" Click="Button1_Click" />
</StackPanel >
</Grid>
and Button.xaml.cs:
private void Button1_Click(object sender, RoutedEventArgs e)
{
// Get a instance of ClientOversikt
CustomerView childWindow = m_container.Resolve<CustomerView >();
childWindow.Show();
}
It's working fine. But I want to use Databinding in Button.xaml instead of Click="Button1_Click". How could I do it?
I appreciate all the help
Since you're using Silverlight 4, you can use commands. You bind the Command property of the Button to an instance of ICommand, which will open the child window when executed. Then, when you click on the button, the command will be executed.
This page contains a reasonably good introduction to commanding.

How to enable KeyBinding for DelegateCommand in Prism 4?

I would like to enable a KeyBinding for a DelegateCommand in a Prism4 desktop application. For example, in my XAML file I have this:
<Grid.InputBindings>
<KeyBinding Gesture="CTRL+A" Command="{Binding Command3}"/>
</Grid.InputBindings>
<StackPanel>
<Button Grid.Row="0" Grid.Column="1" Content="HitMe" prism:Click.Command="{Binding Command3}" />
</StackPanel>
and in my ViewModel I have this:
public DelegateCommand<string> Command3 { get; private set; }
private void ExecuteCommand3(string commandParameter)
{
Debug.WriteLine("ExecuteCommand3");
}
private bool CanExecuteCommand3(string commandParameter)
{
return true;
}
When I press the HitMe button the debug line outputs but pressing CTRL+A has no effect.
I have considered using the CommandReference class from TestMvvmExample2341 but that seems to duplicate the functionality of Prism 4 mechanisms.
Is there a an easy way to have CTRL+A invoke the Command3 in Prism4?
That's it, maybe your problem is related to the Focus in your view, try this:
At runtime set the focus over the Button and then apply the keystroke. Also take a look at these posts:
WPF MVVM KeyBinding not being recognized right away and not always working
http://joyfulwpf.blogspot.com/2009/05/mvvm-commandreference-and-keybinding.html

How to build a generic/re-usable modal dialog for WPF following MVVM

I would like to build a generic/re-usable modal dialog that I can use in our WPF (MVVM) - WCF LOB application.
I have a Views and associated ViewModels that I would like to display using dialogs. Bindings between Views and ViewModels are done using Type-targeted DataTemplates.
Here are some requirements that I have been able to draft:
I prefer this to be based on a Window instead of using Adorners and controls that act like a modal dialog.
It should get its minimum size from the content.
It should center on the owner window.
The window must not show the Minimize and Maximize buttons.
It should get its title from the content.
What is the best way to do this?
I usually deal with this by injecting this interface into the appropriate ViewModels:
public interface IWindow
{
void Close();
IWindow CreateChild(object viewModel);
void Show();
bool? ShowDialog();
}
This allows the ViewModels to spaw child windows and show them modally on modeless.
A reusable implementation of IWindow is this:
public class WindowAdapter : IWindow
{
private readonly Window wpfWindow;
public WindowAdapter(Window wpfWindow)
{
if (wpfWindow == null)
{
throw new ArgumentNullException("window");
}
this.wpfWindow = wpfWindow;
}
#region IWindow Members
public virtual void Close()
{
this.wpfWindow.Close();
}
public virtual IWindow CreateChild(object viewModel)
{
var cw = new ContentWindow();
cw.Owner = this.wpfWindow;
cw.DataContext = viewModel;
WindowAdapter.ConfigureBehavior(cw);
return new WindowAdapter(cw);
}
public virtual void Show()
{
this.wpfWindow.Show();
}
public virtual bool? ShowDialog()
{
return this.wpfWindow.ShowDialog();
}
#endregion
protected Window WpfWindow
{
get { return this.wpfWindow; }
}
private static void ConfigureBehavior(ContentWindow cw)
{
cw.WindowStartupLocation = WindowStartupLocation.CenterOwner;
cw.CommandBindings.Add(new CommandBinding(PresentationCommands.Accept, (sender, e) => cw.DialogResult = true));
}
}
You can use this Window as a reusable host window. There's no code-behind:
<Window x:Class="Ploeh.Samples.ProductManagement.WpfClient.ContentWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:self="clr-namespace:Ploeh.Samples.ProductManagement.WpfClient"
xmlns:pm="clr-namespace:Ploeh.Samples.ProductManagement.PresentationLogic.Wpf;assembly=Ploeh.Samples.ProductManagement.PresentationLogic.Wpf"
Title="{Binding Path=Title}"
Height="300"
Width="300"
MinHeight="300"
MinWidth="300" >
<Window.Resources>
<DataTemplate DataType="{x:Type pm:ProductEditorViewModel}">
<self:ProductEditorControl />
</DataTemplate>
</Window.Resources>
<ContentControl Content="{Binding}" />
</Window>
You can read more about this (as well as download the full code sample) in my book.
I'm answering my own question to help others find all answers I struggled to find in one place. What above seems like a straight forward problem, actually presents multiple problems that I hope to answer sufficiently below.
Here goes.
Your WPF window that will serve as the generic dialog can look something like this:
<Window x:Class="Example.ModalDialogView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ex="clr-namespace:Example"
Title="{Binding Path=mDialogWindowTitle}"
ShowInTaskbar="False"
WindowStartupLocation="CenterOwner"
WindowStyle="SingleBorderWindow"
SizeToContent="WidthAndHeight"
ex:WindowCustomizer.CanMaximize="False"
ex:WindowCustomizer.CanMinimize="False"
>
<DockPanel Margin="3">
<StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal" FlowDirection="RightToLeft">
<Button Content="Cancel" IsCancel="True" Margin="3"/>
<Button Content="OK" IsDefault="True" Margin="3" Click="Button_Click" />
</StackPanel>
<ContentPresenter Name="WindowContent" Content="{Binding}"/>
</DockPanel>
</Window>
Following MVVM, the right way to show a dialog is through a mediator. To use a mediator, you typically require some service locator as well. For mediator specific details, look here.
The solution I settled on involved implementing an IDialogService interface that is resolved through a simple static ServiceLocator. This excellent codeproject article has the details on that. Take note of this message in the article forum. This solution also solves the problem of discovering the owner window via the ViewModel instance.
Using this interface, you can call IDialogService.ShowDialog(ownerViewModel, dialogViewModel). For now, I'm calling this from the owner ViewModel, meaning I have hard references between my ViewModels. If you use aggregated events, you will probably call this from a conductor.
Setting the minimum size on the View that will eventually be displayed in the dialog doesn't automatically set the minimum size of the dialog. Also, since the logical tree in the dialog contains the ViewModel, you can't just bind to the WindowContent element's properties. This question has an answer with my solution.
The answer I mention above also includes code that centers the window on the owner.
Finally, disabling the minimize and maximize buttons is something WPF can't natively do. The most elegant solution IMHO is using this.

WPF: Composite Application with Page Navigation

I am currently writing an application to which the composite methodology fits like a glove.... almost!
I also need a way to navigate between views, including maintaining a journal for navigation backward and forward.
What is the best way to combine these two methodologies, on one hand the single Window based CAG shell with its UserControl derived views, and on the other hand the convenient NavigationWindow shell with its Page derived views and journal?
Thanks!
You can display anything in a NavigationWindow, not just Pages. A simple way to make it work is to define in the NavigationWindow's resources a DataTemplate for each ViewModel you want to display. Bind the Content property of the NavigationWindow to a property of your main ViewModel, and you're done : changing that property will update the NavigationWindow content, and the appropriate DataTemplate will be picked automatically
UPDATE
I just looked at the code of a project of mine where I used a NavigationWindow. Actually I was mistaken, it doesn't work by binding the Content (or maybe it works, but that's not what I did). Instead I created a INavigationService interface, implemented by my App class, which handles the navigation by calling the NavigationWindow.Navigate method. That way, the navigation history is maintained by the NavigationWindow.
Here's an extract from my project
MainWindow.xaml :
<NavigationWindow x:Class="MyApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="clr-namespace:MyApp.ViewModel"
xmlns:view="clr-namespace:MyApp.View"
Title="{Binding Content.DisplayName, RelativeSource={RelativeSource Self}, FallbackValue=The Title}"
Height="600" Width="800">
<NavigationWindow.Resources>
<DataTemplate DataType="{x:Type vm:HomeViewModel}">
<view:HomeView />
</DataTemplate>
<DataTemplate DataType="{x:Type vm:CustomerViewModel}">
<view:CustomerView />
</DataTemplate>
</NavigationWindow.Resources>
</NavigationWindow>
App.xaml.cs :
...
private void Application_Startup(object sender, StartupEventArgs e)
{
LoadConfig();
MyApp.MainWindow window = new MainWindow();
INavigationService navigationService = this;
HomeViewModel viewModel = new HomeViewModel(navigationService);
this.MainWindow = window;
window.Navigate(viewModel);
window.Show();
}
When I need to navigate to another view, I just call the Navigate method with the ViewModel as a parameter, and WPF automatically picks the appropriate DataTemplate from the resources.

Resources