locked
Navigation via C# Code RRS feed

  • Question

  • Hi everybody,

    i would like to navigate between multible Screens in sketchflow.

    The navigation-goal should be triggered from a selection in a listbox.
    (If ListBoxItem A is selected, the application should navigate to ScreenB and if ListboxItem B is selected, the app should navigate to screen C)

    The navigation-start should be triggered by a clickevent on a button.
    (When the user clicks on that button, the selection of the listbox should be checked and based on that, the navigation should start)

    Does anybody know how to solve that Problem?
    Thanks!

    Here is the Code of the Button-Event:
    private void Btn_startNavigation_Click(object sender, System.Windows.RoutedEventArgs e)
    {
        ListBoxItem selectedItem = (myListBox.SelectedItem as ListBoxItem);
        String temp = (selectedItem.Content as string);
        if(temp.Equals("ListBoxItem A")){
              //Navigate to Screen B
      } else {
              //Navigate to Screen C
    }
    }
    
    
    Friday, January 22, 2010 2:43 PM

Answers

  • I have made a complete sample of xmal and C# code for you:

    Make a project called AppNavigator.


    MainPage.xaml:
    <UserControl
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	x:Class="AppNavigator.MainPage"
    	Width="320" Height="240">
    
    	<Grid x:Name="LayoutRoot" Background="White">
    		<Canvas x:Name="ContentHolder" Height="240" HorizontalAlignment="Left" VerticalAlignment="Top" Width="320">
    			<Button x:Name="buttonScreenA" Width="75" Content="Screen A" Canvas.Left="158" Canvas.Top="210" Click="buttonScreenA_Click"/>
    			<Button x:Name="buttonScreenB" Width="75" Content="Screen B" Canvas.Top="210" Canvas.Left="237" Click="buttonScreenB_Click"/>
    			<TextBlock Text="Main Screen" TextWrapping="Wrap" Width="320" Height="40" FontSize="26.667" TextAlignment="Center"/>
    		</Canvas>
    	</Grid>
    </UserControl>

    MainPage.xaml.cs:
    namespace AppNavigator
    {
    	public partial class MainPage : UserControl
    	{
    		public MainPage()
    		{
    			InitializeComponent();
    		}
    
    		private void buttonScreenA_Click(object sender, System.Windows.RoutedEventArgs e)
    		{
    			ContentHolder.Children.Add(new ScreenA(this));
    		}
    
    		private void buttonScreenB_Click(object sender, System.Windows.RoutedEventArgs e)
    		{
                            ContentHolder.Children.Add(new ScreenB(this));
    		}
    	}
    }

    ScreenA.xaml:
    <navigation:Page 
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    	mc:Ignorable="d"
    	xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
    	x:Class="AppNavigator.ScreenA" 
    	Title="ScreenA Page"
    	d:DesignWidth="320" d:DesignHeight="240" Width="320" Height="240">
    	
    	<Grid x:Name="LayoutRoot" Background="White" >
    		<Button x:Name="buttonBack" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="75" Content="Back" Click="buttonBack_Click" Margin="0,0,8,8"/>
    		<TextBlock Height="40" FontSize="26.667" Text="Screen A" TextAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Top"/>
    	</Grid>
    </navigation:Page>

    ScreenA.xaml.cs:
    namespace AppNavigator
    {
        public partial class ScreenA : Page
        {
            MainPage mainPage;
    
            public ScreenA(MainPage mainPage)
            {
                InitializeComponent();
    
                this.mainPage = mainPage;
            }
    
            // Executes when the user navigates to this page.
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
            }
    
            private void buttonBack_Click(object sender, System.Windows.RoutedEventArgs e)
            {
                mainPage.ContentHolder.Children.Remove(this);
            }
        }
    }
    ScreenB is the same as screen a. so, no need to add same exact code.
    • Edited by Owen P. Barker Thursday, January 28, 2010 7:46 AM spacing error
    • Marked as answer by _Markus Thursday, January 28, 2010 12:14 PM
    Thursday, January 28, 2010 7:44 AM

All replies

  • I have made a complete sample of xmal and C# code for you:

    Make a project called AppNavigator.


    MainPage.xaml:
    <UserControl
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	x:Class="AppNavigator.MainPage"
    	Width="320" Height="240">
    
    	<Grid x:Name="LayoutRoot" Background="White">
    		<Canvas x:Name="ContentHolder" Height="240" HorizontalAlignment="Left" VerticalAlignment="Top" Width="320">
    			<Button x:Name="buttonScreenA" Width="75" Content="Screen A" Canvas.Left="158" Canvas.Top="210" Click="buttonScreenA_Click"/>
    			<Button x:Name="buttonScreenB" Width="75" Content="Screen B" Canvas.Top="210" Canvas.Left="237" Click="buttonScreenB_Click"/>
    			<TextBlock Text="Main Screen" TextWrapping="Wrap" Width="320" Height="40" FontSize="26.667" TextAlignment="Center"/>
    		</Canvas>
    	</Grid>
    </UserControl>

    MainPage.xaml.cs:
    namespace AppNavigator
    {
    	public partial class MainPage : UserControl
    	{
    		public MainPage()
    		{
    			InitializeComponent();
    		}
    
    		private void buttonScreenA_Click(object sender, System.Windows.RoutedEventArgs e)
    		{
    			ContentHolder.Children.Add(new ScreenA(this));
    		}
    
    		private void buttonScreenB_Click(object sender, System.Windows.RoutedEventArgs e)
    		{
                            ContentHolder.Children.Add(new ScreenB(this));
    		}
    	}
    }

    ScreenA.xaml:
    <navigation:Page 
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    	mc:Ignorable="d"
    	xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
    	x:Class="AppNavigator.ScreenA" 
    	Title="ScreenA Page"
    	d:DesignWidth="320" d:DesignHeight="240" Width="320" Height="240">
    	
    	<Grid x:Name="LayoutRoot" Background="White" >
    		<Button x:Name="buttonBack" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="75" Content="Back" Click="buttonBack_Click" Margin="0,0,8,8"/>
    		<TextBlock Height="40" FontSize="26.667" Text="Screen A" TextAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Top"/>
    	</Grid>
    </navigation:Page>

    ScreenA.xaml.cs:
    namespace AppNavigator
    {
        public partial class ScreenA : Page
        {
            MainPage mainPage;
    
            public ScreenA(MainPage mainPage)
            {
                InitializeComponent();
    
                this.mainPage = mainPage;
            }
    
            // Executes when the user navigates to this page.
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
            }
    
            private void buttonBack_Click(object sender, System.Windows.RoutedEventArgs e)
            {
                mainPage.ContentHolder.Children.Remove(this);
            }
        }
    }
    ScreenB is the same as screen a. so, no need to add same exact code.
    • Edited by Owen P. Barker Thursday, January 28, 2010 7:46 AM spacing error
    • Marked as answer by _Markus Thursday, January 28, 2010 12:14 PM
    Thursday, January 28, 2010 7:44 AM
  • Wow, Thank You! :)
    Thursday, January 28, 2010 12:15 PM
  • Howdy,

    Whilst you have marked Owen solution as correct (which I am glad it works for your current scenario), I should point out that adding and removing child elements from the collection is not the best practice to "navigate" between screens in SketchFlow, especially when it gets more complex.

    It is worth you while understanding how the VSM works for this reason.

    Best of luck with it.

    Cheers

    Expression MVP

    my blog : http://x-coders.com/blogs/sneaky/default.aspx

    Thursday, January 28, 2010 11:39 PM
    Moderator
  • Well, you are right. Is marked it as a solution, because it answers my question.

    However i solved my problem on another way. I made it like this:

    System.Windows.Interactivity.EventTrigger clickTrigger = new System.Windows.Interactivity.EventTrigger("Click"); clickTrigger.Actions.Add(navigateAction); 
    System.Windows.Interactivity.TriggerCollection triggerCollection =System.Windows.Interactivity.Interaction.GetTrigger(this.ButtonA); 
    
    triggerCollection.Add(clickTrigger); 
    navigateAction.TargetScreen = "ScreenB"; 



    Thanks anyway.. :)

    cheers
    Friday, January 29, 2010 7:51 AM