3

I'm making a windows universal 10 application with MVVM light.

But now I will, if I click on an item on the ShowWeatherPage be navigate to ShowWeatherDetailPage for more details about the clicked item. But I don't know how I can do this. Can you help me to do this?

Below you can find my code. I use IocContainers and for each page a viewmodel and only command bindings.

IocContainer

public class IocContainer { static IocContainer() { SimpleIoc.Default.Register<ApplicationViewModel>(false); SimpleIoc.Default.Register<ShowWeatherViewModel>(false); SimpleIoc.Default.Register<ShowWeatherPage>(false); SimpleIoc.Default.Register<ShowWeatherDetailPage>(false); SimpleIoc.Default.Register<ShowWeatherDetailViewModel>(false); } public static ShowWeatherPage ShowWeatherPage { get { return SimpleIoc.Default.GetInstance<ShowWeatherPage>(); } } public static ShowWeatherViewModel ShowWeatherViewModel { get { return SimpleIoc.Default.GetInstance<ShowWeatherViewModel>(); } } public static ApplicationViewModel ApplicationViewModel { get { return SimpleIoc.Default.GetInstance<ApplicationViewModel>(); } } public static ShowWeatherDetailPage ShowWeatherDetailPage { get { return SimpleIoc.Default.GetInstance<ShowWeatherDetailPage>(); } } public static ShowWeatherDetailViewModel ShowWeatherDetailViewModel { get { return SimpleIoc.Default.GetInstance<ShowWeatherDetailViewModel>(); } } }

View models

ApplicationViewModel

public class ApplicationViewModel: ViewModelBaseClass { private Page _currentPage = IocContainer.ShowWeatherPage; public Page CurrentPage { get { return _currentPage; } set { if (_currentPage != value) { _currentPage = value; OnPropertyChanged(); } } } public void Navigate(Page page, object attribs) { CurrentPage = page; } }

ShowWeatherViewModel

public class ShowWeatherViewModel: ViewModelBaseClass { #region variables private Item _selectedVillage = null; #endregion variables #region properties public Item SelectedVillage { get { return _selectedVillage; } set { if (_selectedVillage != value) { _selectedVillage = value; ShowDetailPage(); } } } #endregion properties #region constructor public ShowWeatherViewModel() { } #endregion constructor #region methodes private void ShowDetailPage() { ApplicationViewModel appVm = new ApplicationViewModel(); appVm.Navigate(IocContainer.ShowWeatherPage, SelectedVillage); } #endregion methodes }

ShowWeatherDetailViewModel

public class ShowWeatherDetailViewModel: ViewModelBaseClass { }

ViewModelBaseClass

public class ViewModelBaseClass: INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; protected void OnPropertyChanged([CallerMemberName] string propertyName = "") { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } }

Pages

MainPage

<Page x:Class="BALaboVoorbeeld.UWP.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:BALaboVoorbeeld.UWP" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" DataContext="{Binding Source={StaticResource ioc}, Path=ApplicationViewModel}" mc:Ignorable="d"> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Page Content="{Binding CurrentPage, Mode=TwoWay}" /> </Grid> </Page>

ShowWeatherPage

<Page x:Class="BALaboVoorbeeld.UWP.Pages.ShowWeatherPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:BALaboVoorbeeld.UWP.Pages" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" DataContext="{Binding Source={StaticResource ioc}, Path=ShowWeatherViewModel}" mc:Ignorable="d" Width="450"> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Grid.ColumnDefinitions> <ColumnDefinition Width="100" /> <ColumnDefinition Width="240" /> <ColumnDefinition Width="60" /> <ColumnDefinition Width="1*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="1" /> <RowDefinition Height="40" /> <RowDefinition Height="1*" /> <RowDefinition Height="40" /> </Grid.RowDefinitions> <TextBlock Text="Village:" HorizontalAlignment="Right" Margin="4" VerticalAlignment="Center" Grid.Row="1" Grid.Column="0" /> <Button HorizontalAlignment="Stretch" Margin="4" VerticalAlignment="Center" Grid.Row="1" Grid.Column="2" Command="{Binding ShowWeahter}" > <SymbolIcon Symbol="Find" /> </Button> <ListBox Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" ItemContainerStyle="{StaticResource lstidflt}" SelectedItem="{Binding SelectedVillage, Mode=TwoWay}" ItemTemplate="{StaticResource weatheritemdt}" ItemsSource="{Binding VillageList}" /> </Grid> </Page>

ShowWeatherDetailPage

<Page x:Class="BALaboVoorbeeld.UWP.Pages.ShowWeatherDetailPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:BALaboVoorbeeld.UWP.Pages" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <TextBlock Text="Yes we did it ☻"/> </Grid> </Page>

1 Answer 1

2

You can use MVVM Light's navigation service to navigate to another view.

http://www.mvvmlight.net/doc/nav1.cshtml

https://marcominerva.wordpress.com/2014/10/10/navigationservice-in-mvvm-light-v5/

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.