Navigate by Button

Feb 28, 2013 at 6:33 PM
Hi,

Can I navigate to other page by clicking button?
Or code behind in my MVVM model?
Coordinator
Feb 28, 2013 at 10:59 PM
Edited Feb 28, 2013 at 10:59 PM
Yes you can. In code you need to set the ModernFrame.Source, or bind the ModernFrame.Source to a viewmodel property.

In XAML you can use the NavigationCommands.GoToPage command like so;
<Button Command="NavigationCommands.GoToPage" CommandParameter="/Pages/MyPage.xaml" />
The CommandParameter is used to specify the target uri.
Mar 12, 2013 at 6:05 PM
Thanks.
Mar 24, 2013 at 11:19 AM
my doubt is not clear..

if i Click button on current page(MyPage-2.xaml) of mui:link-2 then i must able to jump to mui:link-1 where frame in mui:link-1 displays MyPage-1.xaml in its frame. not loading the MyPage-1.xaml in current frame of mui:link-2.
if i use above mentioned code then i can able to load or navigate to MyPage-1.xaml but it will be loaded in the current frame of mui:link-2 and highlighting mui:link-2 telling that i am still mui:link-2 only but the content is Myapage-1.
my target is "if i Click on Button on MyPage-2 Under mui:link-2 then mui:link-1 should become active"
Coordinator
Mar 24, 2013 at 12:45 PM
Edited Mar 24, 2013 at 12:51 PM
Couple of tips;

Links in the window main menu should have a unique Source. When two or more links have the same Source value, the menu will select the first link when navigating to the source.

Navigation using a button will navigate the current ModernFrame by default. The current ModernFrame is the frame instance hosting the button. If you want to navigate another ModernFrame instance, you need to specify the CommandTarget property. The following snippet demonstrates how to navigate the ModernFrame named 'MyFrame' instead of the current frame.
<mui:ModernFrame x:Name="MyFrame" />

<Button
  Command="NavigationCommands.GoToPage"
  CommandParameter="/Pages/MyPage.xaml"
  CommandTarget="{Binding ElementName=MyFrame}"/>
Hope this helps.
Mar 26, 2013 at 5:47 AM
here are my button xaml code
        <Button Command="NavigationCommands.GoToPage" CommandParameter="/Content/SerialSettings.xaml" x:Name="startButton" Content="Start" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="75"/>
With the latest release of mui, the button is disabled. Removing command enabled back the button. Button does not disable if using older release of mui.

thanks.
Coordinator
Mar 27, 2013 at 12:28 AM
Might be a bug, I'll check it.
Coordinator
Mar 31, 2013 at 1:33 PM
The bug has been fixed and is available in the latest source code checkin.
Mar 31, 2013 at 4:05 PM
thanks for the bug fix.
Apr 3, 2013 at 10:55 AM
Hey kozw, love the UI, but where can I get the latest version where the Navigate by Button bug is fixed.
Coordinator
Apr 3, 2013 at 11:00 AM
The fix is not available in a release yet. It is checked in and you can download and compile the latest source yourself.
Apr 3, 2013 at 3:42 PM
I think I have a slightly different scenario, but I am confused on how to accomplish my navigation in MVVM.

I understand that I can create a modernframe and bind the ContentSource to a property in my VM, but in my particular scenario I would like to perform an action in my VM, and then I want to simlply navigate back (doing exactly what would happen if the Back button was clicked).

Now I thought I could simply send a message to my MainWindow who upon receipt would be able to find the main frame that the ModernWindow has ("ContentFrame") and then do a Browse Back. I attempted the following code:

in my MainWindow
var f = NavigationHelper.FindFrame(null, this);
NavigationCommands.BrowseBack.Execute(null, f);
but the frame is never found.

How can I simply issue a browse back command, to the main frame, without knowing a a specific URI to navigate to (just simply go Back)
Coordinator
Apr 3, 2013 at 9:56 PM
The only way to access the ModernFrame 'ContentFrame' in your ModernWindow instance is by accessing it thru GetTemplateChild (preferrable executed in the OnApplyTemplate) like so:
public override void OnApplyTemplate()
{
  base.OnApplyTemplate();

  var frame = (ModernFrame)GetTemplateChild("ContentFrame");
}
ModernWindow itself doesn't implement NavigationCommands, but it might be a good idea to add it.

Alternatively you could implement your own navigation history and upon browse back set the source in your viewmodel.
Apr 3, 2013 at 10:15 PM
Excellent. This solved my issue. Thanks again.
Apr 24, 2013 at 10:45 PM
kozw wrote:
Yes you can. In code you need to set the ModernFrame.Source, or bind the ModernFrame.Source to a viewmodel property.

In XAML you can use the NavigationCommands.GoToPage command like so;
<Button Command="NavigationCommands.GoToPage" CommandParameter="/Pages/MyPage.xaml" />
The CommandParameter is used to specify the target uri.
I've tried using that code and it disables my button, the page does exist. Am I missing something?

Cheers,
Shawn
Coordinator
Apr 27, 2013 at 6:48 PM
Is the button placed in a user control hosted in a ModernFrame? That is a requirement for NavigationCommand.GoToPage to work.
Aug 20, 2013 at 10:51 AM
hi kozw I want to use navigation page with in Click button method like this
private void btnNavigate_Click(){
          // Some command before navigate such as check with if for navagate or not navigate
          // Some code for navigate modern frame to other page.
}
plz suggest me , thk.
Aug 20, 2013 at 2:32 PM
migkie wrote:
hi kozw I want to use navigation page with in Click button method like this
private void btnNavigate_Click(){
          // Some command before navigate such as check with if for navagate or not navigate
          // Some code for navigate modern frame to other page.
}
plz suggest me , thk.
try this code

NavigationCommands.GoToPage.Execute("/Pages/Home.xaml", this);
Aug 20, 2013 at 4:40 PM
jenose wrote:
migkie wrote:
hi kozw I want to use navigation page with in Click button method like this
private void btnNavigate_Click(){
          // Some command before navigate such as check with if for navagate or not navigate
          // Some code for navigate modern frame to other page.
}
plz suggest me , thk.
try this code

NavigationCommands.GoToPage.Execute("/Pages/Home.xaml", this);
Thk jenose but if only navigate in modernframe , Is it possible ?
Aug 20, 2013 at 4:43 PM
migkie wrote:
jenose wrote:
migkie wrote:
hi kozw I want to use navigation page with in Click button method like this
private void btnNavigate_Click(){
          // Some command before navigate such as check with if for navagate or not navigate
          // Some code for navigate modern frame to other page.
}
plz suggest me , thk.
try this code

NavigationCommands.GoToPage.Execute("/Pages/Home.xaml", this);
Thk jenose but if only navigate in modernframe , Is it possible ?
OK, I done. Just change "this" to "ModernFrame_name" and it worked ! Thanks jenose
Aug 21, 2013 at 10:24 AM
Can I pass value to target page whenever navigate to it ?
Ex: navagate page to page2.xaml , I want to pass value such as "StringValue" to page2.xaml
Sep 3, 2013 at 7:20 AM
I have same problem like migkie. If I pass parameter to page like that: "/Pages/Home.xaml?paramStr" - menu link not activating.
Sep 25, 2013 at 7:29 AM
I want to navigate to another user control from my login user control button click.
The button click first authenticates user then loads another user control.How can I do this with mui,tried Navigation Commands getting the runtime error that "Object ref is not set to instance of object."
Please suggest
Mar 13, 2014 at 8:27 AM
Looks like there is no way of doing the simple thing. Assume there is an empty project created from a standard template, and some content added to 'Settings' page. An user is presented with some controls and two buttons 'Cancel' and 'Apply'. No matter which buttons is pressed, after performing some actions in VW (save, or restore old values), the user should be taken back to the 'Home.xaml' page, just like after pressing the 'Back' button. It is not possible in such a scenario, am I right?
Mar 14, 2014 at 3:36 PM
kozw wrote:
Couple of tips;

Links in the window main menu should have a unique Source. When two or more links have the same Source value, the menu will select the first link when navigating to the source.

Navigation using a button will navigate the current ModernFrame by default. The current ModernFrame is the frame instance hosting the button. If you want to navigate another ModernFrame instance, you need to specify the CommandTarget property. The following snippet demonstrates how to navigate the ModernFrame named 'MyFrame' instead of the current frame.
<mui:ModernFrame x:Name="MyFrame" />

<Button
  Command="NavigationCommands.GoToPage"
  CommandParameter="/Pages/MyPage.xaml"
  CommandTarget="{Binding ElementName=MyFrame}"/>
Hope this helps.
Thanks for this :)

Just wanted to know, how do I get the reference to the top most frame here? Just like with BBCode, we can do something like:

<mui:BBCodeBlock BBCode="[url=/Pages/MyPage.xaml|_top]go to my page[/url]" />
Mar 16, 2014 at 1:51 PM
What I did at the end is getting a reference to the MainWindow in the OnApplyTemplate() and storing it in the static variable, so I can reference it in a command like below:
NavigationCommands.GoToPage.Execute("/Pages/Home.xaml", MainWindow.frame);
where frame is:
public override void OnApplyTemplate()
{
            base.OnApplyTemplate();
            frame = (ModernFrame)GetTemplateChild("ContentFrame");
}
taken from a post here.
Mar 20, 2014 at 2:55 PM
Of course my solution is kind of rubbish as I missed that there is browsing history that is not rewound so to say, so consecutive presses of the ''BACK" button gives some funny effects. So again, navigation by a button seems not to be possible.
Aug 21, 2014 at 9:19 AM
migkie wrote:
migkie wrote:
jenose wrote:
migkie wrote:
hi kozw I want to use navigation page with in Click button method like this
private void btnNavigate_Click(){
          // Some command before navigate such as check with if for navagate or not navigate
          // Some code for navigate modern frame to other page.
}
plz suggest me , thk.
try this code

NavigationCommands.GoToPage.Execute("/Pages/Home.xaml", this);
Thk jenose but if only navigate in modernframe , Is it possible ?
OK, I done. Just change "this" to "ModernFrame_name" and it worked ! Thanks jenose
what is ModernFrame_name?