Open new page in uwp

Question

Hello

I am trying to open a new uwp page wuen I click a button, becouse I am using mvvm, everything is handle by the ViewModel

So in my VM I have

[AddINotifyPropertyChangedInterface]  
    public class MainPageViewModel  
    {  
        public Command<int> AddCommand  
        {  
            get; set;  
        }  
  
        public MainPageViewModel()  
        {  
            AddCommand = new Command<int>(AddAction);  
        }  
  
        private async void AddAction(int NumButton)  
        {  
  
            await OpenPageAsWindowAsync(typeof(NewPropertyOrResident)); // When I press the button breaks  
        }  
  
        /// <summary>  
        /// Opens a page given the page type as a new window.  
        /// </summary>  
        /// <param name="t"></param>  
        private async Task<bool> OpenPageAsWindowAsync(Type t)  
        {  
            var view = CoreApplication.CreateNewView();  
            var id = 0;  
  
            await view.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>  
            {  
                var frame = new Frame();  
                frame.Navigate(t, null);  
                Window.Current.Content = frame;  
                Window.Current.Activate();  
                id = ApplicationView.GetForCurrentView().Id;  
            });  
  
            return await ApplicationViewSwitcher.TryShowAsStandaloneAsync(id);  
        }  

my UI first page

    <Page.DataContext>  
        <vm:MainPageViewModel />  
    </Page.DataContext>  
      
    <Border Padding="10" Background="{ThemeResource SystemControlAcrylicWindowBrush}">  
  
        <Grid Background="{ThemeResource SystemControlAcrylicWindowBrush}">  
  
            <Grid.RowDefinitions>  
                <RowDefinition Height="Auto" />  
                <RowDefinition Height="*" />  
            </Grid.RowDefinitions>  
  
            <Grid.ColumnDefinitions>  
                <ColumnDefinition Width="*" />  
                <ColumnDefinition Width="4*" />  
            </Grid.ColumnDefinitions>  
  
            <StackPanel Orientation="Horizontal">  
                <Button  
                    Background="Transparent"  
                    Command="{Binding AddCommand}"  
                    CommandParameter="1"  
                    UseSystemFocusVisuals="False">   
                    <StackPanel Orientation="Horizontal">  
                        <SymbolIcon Symbol="Home" />  
                        <TextBlock Margin="10,0,0,0" Text="New Property" />  
                    </StackPanel>  
                </Button>  
  
                <Button Background="Transparent">  
                    <StackPanel Orientation="Horizontal">  
                        <SymbolIcon Symbol="AddFriend" />  
                        <TextBlock Margin="10,0,0,0" Text="New Resident" />  
                    </StackPanel>  
  
                </Button>  
            </StackPanel>  
        </Grid>  
  
    </Border>  
  
</Page>  

UI second page

    <Grid>  
  
        <TextBlock Text="Heelooo" />  
  
    </Grid>  

Maybe I can send the page as a CommandParametter of the button?

I want my view model to be the one responsable for naviggating

Answer 1

Hello,
Welcome to Microsoft Q&A!

If you want to pass current page to the ViewModel by command parameter. you could bind current page like this.

1. Give your page a name in xaml

   <Page  
       x:Class="ListViewDrag.MainPage"  
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
       xmlns:Core="using:Microsoft.Xaml.Interactions.Core"  
       xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"  
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
       xmlns:local="using:ListViewDrag"  
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
       x:Name="MyPage"  
   

2. Make Button Command method in the ViewModel

   public class MainPageViewModel  
   {  
   public MainPageViewModel()  
   {  
   
   }  
   
   public ICommand ButonAddCommand  
   {  
       get  
       {  
           return new CommadEventHandler<Page>((s) =>  
           {  
                // s is current page instance  
           });  
       }  
   }  
   

   }
3. Bind current page with command parameter by using ElementName markup

   <Button  
       VerticalAlignment="Bottom"  
       Command="{Binding ButonAddCommand}"  
       CommandParameter="{Binding ElementName=MyPage}"  
       Content="Add" />  
   

Thank you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.