3
votes

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

1 Answers