Prism navigation with tabcontrol

De Banane Atomic
Aller à la navigationAller à la recherche

Navigation

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

    <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="ViewA">
                Navigate A
            </Button>
            <Button Command="{Binding NavigateCommand}"
                    CommandParameter="ViewB">
                Navigate B
            </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; set; }

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

    // ViewA and ViewB are command parameters 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<ViewA>();
    containerRegistry.RegisterForNavigation<ViewB>();
}

View to inject

ViewA.xaml 
<UserControl x:Class="NavigationWPF.Views.ViewA"
             xmlns:mvvm="http://prismlibrary.com/"
             mvvm:ViewModelLocator.AutoWireViewModel="True">
    <Grid>
        <TextBlock Text="View A"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   FontSize="48" />
    </Grid>
</UserControl>
ViewAViewModel.cs 
public class ViewAViewModel : BindableBase, INavigationAware
{
    private string title;

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

    public ViewAViewModel()
    {
        Title = "View A";
    }

    public bool IsNavigationTarget(NavigationContext navigationContext) => true;

    public void OnNavigatedFrom(NavigationContext navigationContext)
    { }

    public void OnNavigatedTo(NavigationContext navigationContext)
    { }
}

Closing Tab items

MainWindow.xaml 
<Window.Resources>
    <Style TargetType="TabItem">
        <Setter Property="Header" Value="{Binding DataContext.Title}" />
        <Setter Property="HeaderTemplate">
            <Setter.Value>
                <DataTemplate>
                    <DockPanel>
                        <Button DockPanel.Dock="Right"
                                Foreground="DarkGray"
                                Height="14"
                                Margin="4,0,-4,0"
                                Template="{StaticResource CrossButton}" />
                        <ContentControl Content="{Binding}"
                                        VerticalAlignment="Center" />
                    </DockPanel>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
Xaml.svg 
<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>
Récupérée de « http://wiki.bananeatomic.fr/index.php?title=Prism_navigation_with_tabcontrol&oldid=26284 »