Navigating to a Page in VS2015 Windows 10 UWP using a Parameter

Question

I am using Visual Studio 2015 with Update 1. I have created a new UWP Windows 10 application with 2 Blank Pages. The first page has a GridView with an itemClick event. The object I am binding to the GridViewItem has a string field "Link" containing the name of the Page I will navigate to, when clicking on this GridViewItem.

private void GridView_ItemClick(object sender, ItemClickEventArgs e)
    {
        var link = (sender as Menu).Link;
        Frame.Navigate(typeof(link));
    }

But this is not possible... since "link" here is used like a type. Is there a way to cast it, and make it work?

Answer 1

First of all, when you use the ItemClick event, the "sender" is not your Menu class, it is the GridView control itself. So your code var link = (sender as Menu).Link; should get a null reference exception.

Here I can provider two ways to do this work, but all of these two ways are using the SelectionChanged event like this:

private void gridView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var link = (gridView.SelectedItem as Menu).Link;
    Frame.Navigate(link);
}

First one, define two properties in your Menu class like this:

public class Menu
{
    public Type Link { get; set; }
    public string Name { get; set; }
}

And use the GridView like this:

<GridView x:Name="gridView" ItemsSource="{x:Bind menu}" SelectionChanged="gridView_SelectionChanged">
    <GridView.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}" FontSize="25" />
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

the code behind to add data to GridView:

private ObservableCollection<Menu> menu = new ObservableCollection<Menu>();

public MainPage()
{
    this.InitializeComponent();
}

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    menu.Clear();
    menu.Add(new Menu { Link = typeof(Link1), Name = typeof(Link1).Name });
    menu.Add(new Menu { Link = typeof(Link2), Name = typeof(Link2).Name });
    menu.Add(new Menu { Link = typeof(Link3), Name = typeof(Link3).Name });
}

Second one, you can just define one property in the Menu class, but use a Converter to display the name of each page.

Menu class:

public class Menu
{
    public Type Link { get; set; }
}

the TypeToStringConverter converter:

public class TypeToStringConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value == null)
            return "Error";
        var link = (value as Menu).Link;
        return link.Name;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

And you can use this converter and the GridView in XAML like this:

<Page.Resources>
    <local:TypeToStringConverter x:Key="cvt" />
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <GridView x:Name="gridView" ItemsSource="{x:Bind menu}" SelectionChanged="gridView_SelectionChanged">
        <GridView.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Converter={StaticResource cvt} }" FontSize="25" />
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>
</Grid>

the code behind to add data to GridView:

private ObservableCollection<Menu> menu = new ObservableCollection<Menu>();

public MainPage()
{
    this.InitializeComponent();
}

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    menu.Clear();
    menu.Add(new Menu { Link = typeof(Link1) });
    menu.Add(new Menu { Link = typeof(Link2) });
    menu.Add(new Menu { Link = typeof(Link3) });
}