What does the '#1' mean in '/Content/LoremIpsum.xaml#1' of Modern UI for WPF?

Question

I am looking into ModernUI these days and I have a little problem modifying my code. The problem comes from a TabControl. The sample from MUI DOC is like:

<Grid Style="{StaticResource ContentRoot}">
  <mui:ModernTab SelectedSource="/Content/LoremIpsum.xaml#1" Layout="List">
    <mui:ModernTab.Links>
        <mui:Link DisplayName="Lorem Ipsum 1" Source="/Content/LoremIpsum.xaml#1" />
        <mui:Link DisplayName="Lorem Ipsum 2" Source="/Content/LoremIpsum.xaml#2" />
    </mui:ModernTab.Links>
  </mui:ModernTab>
</Grid>

Can anyone explain to me the usage of #1 in the code above?

Answer 1

In this situation is used the fragment navigation. It means that when you use the selected source binding in your ViewModel, you can just simply parse out everything after the # to find your index of the tab selected. You have to listen to the event the type of SourceChanged, to know which tab was selected by the user or using the OnFragmentNavigation event.

For this purpose used the following code:

namespace FirstFloor.ModernUI.Windows.Navigation

FragmentNavigationEventArgs.cs

/// <summary>
/// Provides data for fragment navigation events.
/// </summary>
public class FragmentNavigationEventArgs
    : EventArgs
{
    /// <summary>
    /// Gets the uniform resource identifier (URI) fragment.
    /// </summary>
    public string Fragment { get; internal set; }
}

namespace FirstFloor.ModernUI.Windows

IContent.cs

/// <summary>
/// Defines the optional contract for content loaded in a ModernFrame.
/// </summary>
public interface IContent
{
    /// <summary>
    /// Called when navigation to a content fragment begins.
    /// </summary>
    /// <param name="e">An object that contains the navigation data.</param>
    void OnFragmentNavigation(FragmentNavigationEventArgs e);
    ...
}

namespace FirstFloor.ModernUI.Windows.Navigation

NavigationHelper.cs

/// <summary>
/// Removes the fragment from specified uri and return it.
/// </summary>
/// <param name="uri">The uri</param>
/// <returns>The uri without the fragment, or the uri itself if no fragment is found</returns>
public static Uri RemoveFragment(Uri uri)
{
    string fragment;
    return RemoveFragment(uri, out fragment);
}

/// <summary>
/// Removes the fragment from specified uri and returns the uri without the fragment and the fragment itself.
/// </summary>
/// <param name="uri">The uri.</param>
/// <param name="fragment">The fragment, null if no fragment found</param>
/// <returns>The uri without the fragment, or the uri itself if no fragment is found</returns>
public static Uri RemoveFragment(Uri uri, out string fragment)
{
    fragment = null;

    if (uri != null) {
        var value = uri.OriginalString;

        var i = value.IndexOf('#');
        if (i != -1) {
            fragment = value.Substring(i + 1);
            uri = new Uri(value.Substring(0, i), uri.IsAbsoluteUri ? UriKind.Absolute : UriKind.Relative);
        }
    }

    return uri;
}

Also you can see an example where it is used navigation together with the IContent interface in this question:

Caliburn.Micro + MEF + Modern UI: IContent events