Prism navigation with tabcontrol

De Banane Atomic
Aller à la navigationAller à la recherche

Navigation

Injecting a view in the TabControl region will automatically create a new TabItem or select an existing TabItem.

MainWindow.xaml 
<Window x:Class="NavigationWPF.Views.MainWindow"
        xmlns:prism="http://prismlibrary.com/"
        prism:ViewModelLocator.AutoWireViewModel="True">

    <Window.Resources>
        <Style TargetType="TabItem">
            <Setter Property="Header"
                    Value="{Binding DataContext.Title}" />
        </Style>
    </Window.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal">
            <Button Command="{Binding NavigateCommand}"
                    CommandParameter="ItemsListView">
                Items
            </Button>
        </StackPanel>

        <TabControl Grid.Row="1"
                    prism:RegionManager.RegionName="TabRegion" />
    </Grid>
</Window>
MainWindowViewModel.cs 
public class MainWindowViewModel : BindableBase
{
    private readonly IRegionManager _regionManager;

    public DelegateCommand<string> NavigateCommand { get; }

    public MainWindowViewModel(IRegionManager regionManager)
    {
        _regionManager = regionManager;
        NavigateCommand = new DelegateCommand<string>(Navigate);
    }

    // ItemsListView is a command parameter passed as navigationPath
    void Navigate(string navigationPath)
    {
        // open/reuse a tab and inject a view that has the same name as the navigationPath
        _regionManager.RequestNavigate("TabRegion", navigationPath);
    }
}

Navigation configuration

App.xaml.cs 
protected override void RegisterTypes(IContainerRegistry containerRegistry)
{
    // register the views to allow RequestNavigate with the view name
    containerRegistry.RegisterForNavigation<ItemsListView>();
    containerRegistry.RegisterForNavigation<ItemView>();
}

Views and ViewModels

ItemsListView.xaml 
<UserControl x:Class="NavigationWPF.Views.ItemsListView"
             xmlns:mvvm="http://prismlibrary.com/"
             mvvm:ViewModelLocator.AutoWireViewModel="True">
    <ListBox ItemsSource="{Binding Items}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Name}">
                    <TextBlock.InputBindings>
                        <MouseBinding MouseAction="LeftDoubleClick"
                                      Command="{Binding DataContext.OpenItemCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListBox}}"
                                      CommandParameter="{Binding}" />
                    </TextBlock.InputBindings>
                </TextBlock>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</UserControl>
ItemsListViewModel.cs 
public sealed class ItemsListViewModel : BindableBase, IConfirmNavigationRequest
{
    private readonly IItemRepository _itemRepository;
    private readonly IRegionManager _regionManager;
    private string _title;

    public AdvancedObservableCollection<Item> Items { get; }

    public string Title
    {
        get => this._title;
        set => SetProperty(ref this._title, value);
    }

    public ICommand OpenItemCommand { get; }

    public ItemsListViewModel(IItemRepository itemRepository, IRegionManager regionManager)
    {
        this._itemRepository = itemRepository;
        this._regionManager = regionManager;

        Items = new AdvancedObservableCollection<Item>();
        Title = "Items";
        OpenItemCommand = new DelegateCommand<Item>(OpenItem);

        var items = this._itemRepository.GetItems();
        Items.AddRange(items);
    }

    private void OpenItem(Item item)
    {
        var navigationParameters = new NavigationParameters
        {
            { "item", item }
        };
        // pass the item while navigating to the ItemView
        this._regionManager.RequestNavigate("TabRegion", "ItemView", navigationParameters);
    }

    public bool IsNavigationTarget(NavigationContext navigationContext) => true; // always reuse the TabItem

    public void ConfirmNavigationRequest(NavigationContext navigationContext, Action<bool> continuationCallback)
    {
        // allow to navigate from this TabItem but not to close it (navigationContext.Uri == null)
        continuationCallback(navigationContext.Uri != null);
    }

    public void OnNavigatedFrom(NavigationContext navigationContext) { }
    public void OnNavigatedTo(NavigationContext navigationContext) { }
}
ItemView.xaml 
<UserControl x:Class="NavigationWPF.Views.ItemView"
             xmlns:mvvm="http://prismlibrary.com/"
             mvvm:ViewModelLocator.AutoWireViewModel="True">
    <Grid>
        <TextBlock Text="{Binding Name}"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   FontSize="48" />
    </Grid>
</UserControl>
ItemViewModel.cs 
public sealed class ItemViewModel : BindableBase, INavigationAware
{
    private string _name;
    private string _title;

    public string Name
    {
        get => _name;
        set => SetProperty(ref _name, value);
    }

    public string Title
    {
        get => _title;
        set => SetProperty(ref _title, value);
    }

    public Item Item { get; set; }

    public void OnNavigatedTo(NavigationContext navigationContext)
    {
        var item = navigationContext.Parameters.GetValue<Item>("item");
        this.Item = item;
        this.Title = item.Name;
        this.Name = item.Name;
    }

    public bool IsNavigationTarget(NavigationContext navigationContext)
    {
        var item = navigationContext.Parameters.GetValue<Item>("item");
        // reuse the TabItem if it is for the same item; otherwise create a new TabItem
        return item.Id == Item.Id;
    }

    public void OnNavigatedFrom(NavigationContext navigationContext) { }
}

RequestNavigateOnLoadedBehavior

Allow to inject a view into a region when the Window.Loaded event is raised.

MainWindow.xaml 
<Window x:Class="NavigationWPF.Views.MainWindow"
        xmlns:b="http://schemas.microsoft.com/xaml/behaviors">
    <b:Interaction.Behaviors>
        <behaviors:RequestNavigateOnLoadedBehavior RegionName="TabRegion"
                                                   ViewName="ItemsListView" />
    </b:Interaction.Behaviors>

    <Grid>
        <TabControl prism:RegionManager.RegionName="TabRegion" />
RequestNavigateOnLoadedBehavior.cs 
public sealed class RequestNavigateOnLoadedBehavior : Behavior<Window>
{
    public string RegionName
    {
        get => (string) GetValue(RegionNameProperty);
        set => SetValue(RegionNameProperty, value);
    }

    public static readonly DependencyProperty RegionNameProperty = DependencyProperty.Register(
        nameof(RegionName),
        typeof(string),
        typeof(RequestNavigateOnLoadedBehavior),
        new PropertyMetadata(null));

    public string ViewName
    {
        get => (string) GetValue(ViewNameProperty);
        set => SetValue(ViewNameProperty, value);
    }

    public static readonly DependencyProperty ViewNameProperty = DependencyProperty.Register(
        nameof(ViewName),
        typeof(string),
        typeof(RequestNavigateOnLoadedBehavior),
        new PropertyMetadata(null));

    protected override void OnAttached()
    {
        this.AssociatedObject.Loaded += OnLoaded;
    }

    protected override void OnDetaching()
    {
        this.AssociatedObject.Loaded -= OnLoaded;
    }

    private void OnLoaded(object sender, RoutedEventArgs e)
    {
        var regionManager = RegionManager.GetRegionManager(sender as DependencyObject);
        regionManager.RequestNavigate(RegionName, ViewName);
    }
}

Closing Tab items

MainWindow.xaml 
<Window.Resources>
    <Style TargetType="TabItem">
        <!-- redefine the header template with a button -->
        <Setter Property="HeaderTemplate">
            <Setter.Value>
                <DataTemplate>
                    <DockPanel>
                        <Button DockPanel.Dock="Right"
                                Style="{StaticResource TabCloseButton}">
                            <b:Interaction.Triggers>
                                <b:EventTrigger EventName="Click">
                                    <local:CloseTabAction />
                                </b:EventTrigger>
                            </b:Interaction.Triggers>
                        </Button>
                        <ContentControl Content="{Binding}"
                                        VerticalAlignment="Center" />
                    </DockPanel>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
Xaml.svg 
<Style x:Key="TabCloseButton"
       TargetType="Button"
       BasedOn="Button">
    <Setter Property="Height" Value="14" />
    <Setter Property="Foreground" Value="DarkGray" />
    <Setter Property="Margin" Value="4,0,-4,0" />
    <Setter Property="Template" Value="{StaticResource CrossButton}" />
</Style>

<ControlTemplate x:Key="CrossButton"
                 TargetType="{x:Type Button}">
    <Grid>
        <Rectangle x:Name="BackgroundRectangle" />
        <Path x:Name="ButtonPath"
              Margin="3"
              Stroke="{Binding Foreground, RelativeSource={RelativeSource TemplatedParent}}"
              StrokeThickness="1.5"
              StrokeStartLineCap="Square"
              StrokeEndLineCap="Square"
              Stretch="Uniform"
              VerticalAlignment="Center"
              HorizontalAlignment="Center">
            <Path.Data>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigure StartPoint="0,0">
                            <LineSegment Point="25,25" />
                        </PathFigure>
                        <PathFigure StartPoint="0,25">
                            <LineSegment Point="25,0" />
                        </PathFigure>
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
        </Path>
    </Grid>

    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter TargetName="BackgroundRectangle" Property="Fill" Value="LightGray" />
            <Setter TargetName="ButtonPath" Property="Stroke" Value="White" />
        </Trigger>
        <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Visibility" Value="Collapsed" />
        </Trigger>
        <Trigger Property="IsPressed" Value="true">
            <Setter TargetName="BackgroundRectangle" Property="Fill" Value="Gray" />
            <Setter TargetName="ButtonPath" Property="Stroke" Value="White" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>
CloseTabAction 
public sealed class CloseTabAction : TriggerAction<Button>
{
    protected override void Invoke(object parameter)
    {
        var args = parameter as RoutedEventArgs;
        if (args == null)
            return;

        var tabItem = VisualTreeHelperPlus.GetParent<TabItem>(args.OriginalSource as DependencyObject);
        if (tabItem == null)
            return;

        var tabControl = VisualTreeHelperPlus.GetParent<TabControl>(tabItem);
        if (tabControl == null)
            return;

        var region = RegionManager.GetObservableRegion(tabControl).Value;
        if (region == null)
            return;

        if (region.Views.Contains(tabItem.Content))
            region.Remove(tabItem.Content);  // remove the view from the region
            // Prism will remove automatically the containing element (TabItem) from the hosting control (TabControl)
    }
}

Preventing close

CloseTabAction.cs 
protected override void Invoke(object parameter)
{
    // ...
    RemoveItemFromRegion(tabItem.Content, region);
}

private void RemoveItemFromRegion(object item, IRegion region)
{
    var navigationContext = new NavigationContext(region.NavigationService, null);
    if (CanRemove(item, navigationContext))
        region.Remove(item);
}

private bool CanRemove(object item, NavigationContext navigationContext)
{
    var canClose = true;

    // check if the VM implements IConfirmNavigationRequest
    if (item is FrameworkElement frameworkElement &&
        frameworkElement.DataContext is IConfirmNavigationRequest confirmNavigationRequest)
    {
        confirmNavigationRequest.ConfirmNavigationRequest(navigationContext, x => canClose = x);
    }

    return canClose;
}
ViewAViewModel.cs 
public sealed class ViewAViewModel : BindableBase, INavigationAware, IConfirmNavigationRequest
{
    // ...
    public void ConfirmNavigationRequest(NavigationContext navigationContext, Action<bool> continuationCallback)
    {
        continuationCallback(false);  // forbid to close
    }
}

Knowing when a TabItem is closing

CloseTabAction.cs 
private void RemoveItemFromRegion(object item, IRegion region)
{
    var navigationContext = new NavigationContext(region.NavigationService, null);
    if (CanRemove(item, navigationContext))
    {
        OnNavigatedFrom(item, navigationContext);
        region.Remove(item);
    }
}

private void OnNavigatedFrom(object item, NavigationContext navigationContext)
{
    if (item is FrameworkElement frameworkElement &&
        frameworkElement.DataContext is INavigationAware navigationAwareDataContext)
    {
        navigationAwareDataContext.OnNavigatedFrom(navigationContext);
    }
}
ViewAViewModel.cs 
public sealed class ViewAViewModel : BindableBase, INavigationAware, IConfirmNavigationRequest
{
    public void OnNavigatedFrom(NavigationContext navigationContext)
    {

    }
}

Child navigation

ItemView.xaml 
<!-- add a TabControl with a region named ChildRegion in the ItemView -->
<TabControl Grid.Row="1" mvvm:RegionManager.RegionName="ChildRegion" />

Problem is the region names have to be unique. So if I implement 2 instances of ItemView I will have 2 regions with the name ChildRegion.
Solution to this is to use scoped regions: 1 RegionManager per ItemView.

ScopedRegionNavigationContentLoader

ScopedRegionNavigationContentLoader.cs 
public sealed class ScopedRegionNavigationContentLoader : RegionNavigationContentLoader
{
    public ScopedRegionNavigationContentLoader(IContainerExtension container) : base(container)
    { }

    protected override void AddViewToRegion(IRegion region, object view)
    {
        region.Add(view, null, CreateRegionManagerScope(view));
    }

    private bool CreateRegionManagerScope(object view)
    {
        if (view is ICreateRegionManagerScope viewHasScopedRegions)
        {
            return viewHasScopedRegions.CreateRegionManagerScope;
        }

        if (view is FrameworkElement frameworkElement &&
            frameworkElement.DataContext is ICreateRegionManagerScope viewModelHasScopedRegions)
        {
            return viewModelHasScopedRegions.CreateRegionManagerScope;
        }

        return false;
    }
}
App.xaml.cs 
protected override void RegisterTypes(IContainerRegistry containerRegistry)
{
    // register the ScopedRegionNavigationContentLoader to be the IRegionNavigationContentLoader used by this App
    containerRegistry.RegisterSingleton<IRegionNavigationContentLoader, ScopedRegionNavigationContentLoader>();
}
Récupérée de « http://wiki.bananeatomic.fr/index.php?title=Prism_navigation_with_tabcontrol&oldid=26357 »