Why does my Region based navigation not work?

[andr9528]

I have asked about this on the Discord too, but didn't get any response so now i am trying here.

As far as i can tell i have setup my Region.Name and Region.Navigator just like it is in the Navigation.TabBarNavigationPage.xaml file from the samples. There is only very few minor differences between the sample and my code.

1. I am using a ListView for the navigation.
2. My UI is defined with C# Markup, instead of Xaml.

private ListView BuildNavigationListView(ModulesNavigationViewModel viewModel)
{
    var listView = new ListView();
    listView.Region(true);

    var listOptions = Modules.Select(module =>
    {
        var block = new TextBlock()
        {
            Text = module.GetModuleAsReadableString(),
            Margin = new Thickness(10, 0, 0, 0),
        };
        block.Region(name: module.GetModuleAsReadableString());

        return block;
    });

    listView.ItemsSource = listOptions;

    return listView;
}

private Grid BuildContentGrid(ModulesNavigationViewModel viewModel)
{
    var grid = new Grid
    {
        Background = new SolidColorBrush(Colors.AliceBlue),
    };
    grid.Region(attached: true, navigator: "Visibility");

    foreach (TrackerModule module in Modules)
    {
        var contentGrid = new Grid
        {
            HorizontalAlignment = HorizontalAlignment.Stretch,
            VerticalAlignment = VerticalAlignment.Stretch,
            Visibility = Visibility.Collapsed,
        };
        contentGrid.Region(name: module.GetModuleAsReadableString());
        contentGrid.Children.Add(module.GetModuleControl());

        grid.Children.Add(contentGrid);
    }

    return grid;
}

(Full file Here)

For some reason it doesn't work, and i can't figure out why. When clicking my menu options, the visibility of the regions with the matching name are not changed. I am developing for only WebAssembly, and have checked with F12 - the div's that should change visibility does not. When changing the visibility of the content grid manually to visible, then it displays correctly.

I suspect it is caused by the string supplied to the navigator argument, but as i have copied it strait from the sample, i don't see how. I hate magic strings -.-

I have also tried to add the attached argument to the contentGrid.Region(...) call, with no luck. Also generally tried to shift around one which UIElement the .Region(...) method is called. I might have missed the one combination that would work, which one i am not sure.

Don't fully understand, yet, if the region name needs to be defined during the routes.Register(...). I have the region name of my menu option one defined currently, which can be seen in this file. Options two and three are still WIP, so are not defined in the routes.

Any help would be highly appreciated.

[morning4coffe-dev]

Hey @andr9528,

Were you able to resolve the issue since posting? One option is to use the "Code-behind" method, which you can follow here. However, if you want to use UI navigation ("Navigate in XAML") with ListView, you need to use Navigation.Request and Navigation.Data, as the docs suggest. In CSM, it would look something like this:

Navigation.SetRequest(listView, "Second");
Navigation.SetData(listView, /*Some control to display*/ null);

Here, "Second" represents the name of the page you want to navigate to (which must be a registered route), and you can display some control/data by passing it with SetData.

Let me know, if this helps. I can provide a sample, if you need.

[andr9528]

No I have not managed to solve it.

The supplied code behind describes how to do it with UI defined with Xaml. Mine is defined with C# Markup.

Also I do not entirely understand why the Navigation calls are made on my listview.
As far as i understand that will limit my navigation to 1 page.
At the current moment i will want to navigate to 3 different pages from my listview, depending on the option clicked.

I did just try to assign the Request and Data as sugested on the assosiated listview option.
With not luck. I did already try to set the request before making my post.
In this case the whole page would navigate, which i do not want.
I only want the content of the specific region to change to another UserControl.

Perhabs given a sample i can beter understand what you are pointing towards.
I'd be extremly happy if said sample used C# Markup to define the user interface.

[andr9528]

Since my comment above, i have been trying to work around my issue, by attempting to control visibility of the grid(s) holding my content directly. However to do this i want to call a method on my ViewModel that updates which should be shown and not.

However as far as i understand, the ViewModel is null at all points during the call to this.DataContext(...), which is why you need to do a binding, and not just use a value from the ViewModel directly. This is propably also why when calling viewModel.ListViewOnSelectionChanged(...) in the following code, the call just fizzles.

    private ListView BuildNavigationListView(ModulesNavigationViewModel viewModel)
    {
        var view = new ListView();

        view.Region(true);

        var options = Modules.Select(module =>
        {
            var item = new TextBlock()
            {
                Text = module.GetModuleAsReadableString(),
                // Removed Irrelevant Styling
            };
            item.Region(name: module.GetModuleAsReadableString());

            return item;
        });

        view.SelectionChanged += (sender, args) => ListViewOnSelectionChanged(sender, args, viewModel);
        view.ItemsSource = options;

        return view;
    }

    private void ListViewOnSelectionChanged(
        object sender, SelectionChangedEventArgs e, ModulesNavigationViewModel viewModel)
    {
        Console.WriteLine($"Listview Selection Changed Called");
        viewModel.ListViewOnSelectionChanged(sender, e);
        // Not Fired...
        Console.WriteLine($"View Model Called");
    }

I am also at the moment creating an instance of my ViewModel, and giving that to the this.DataContext(...) call, instead of just giving it the type. I hoped that this would mean that there was an instance to call the method on, but nope the call still fizzles after making this change.

I am fairly certain that if i can just manage to call the method on my ViewModel, then it will work...
How do i succesfully call a method, with at least one argument, on the ViewModel?
Another detail that might be relevant is that i am using Mvvm.

[andr9528]

Not sure how good/bad it is to do this, but i changed the ViewModel reference used during building of my pages content to be the instance i created myself, instead of the one supplied as part of the this.DataContext(...) call.

That did make it so the method on the ViewModel gets called. Now i just need to get the Visibility to change correctly.

[andr9528]

I got changing of the visibility to work. I'd classicy what i did as a hack. I 'simply' saved the refences to the content grids, and depending the option clicked in my navigation list, the assosiated grid is shown, while hidding the others.

It, sadly, doesn't explain why the region based navigation does not work. But it works for what i want so /shrug/

[morning4coffe-dev]

Thank you for sharing the details, @andr9528.
That is one way of achieving this. However, region-based navigation is primarily designed for navigating between pages.

I shared the XAML docs as we currently don't have a specific page for CSM, but the same principles apply to both approaches.

When using a ListView with navigation its main purpose is to display the item that was clicked. A more typical way to handle you case could be to navigate to a Second page and provide the grid you want to display via uen:Navigation.Data.

If you are exploring alternatives, you might attempt to use uen:Navigation.Request directly on a ListViewItem, I am not 100% sure, if it will work, but this approach works with other controls like Button, so it might be worth testing. However, keep in mind that the navigation target still needs to be a page registered in RegisterRoutes.

Let me know if you'd like further help or examples.