Question

I’m having some issues with the wpf tab control. Not sure the title of the question is right I will refine it accoring to answers.

I want to create a simple panel system. I want to inject ot my “panel viewModel” 2 view model

• MainViewModel will be display as the main area
• PanelViewModel will be display as a panel on the right hand side of the view

the panelViewModel will be hidden by default and a button will display it on top of the main view model when needed

The view look like this:

<UserControl.Resources>
 <DataTemplate x:Key="MainWindowTemplate" DataType="{x:Type UserControl}">
  <ContentPresenter Content="{Binding DataContext.MainViewModel, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" />
 </DataTemplate>
</UserControl.Resources>

<Grid>

 <Grid Visibility="{Binding IsPanelHidden, Converter={StaticResource bool2VisibilityConverter}}">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="Auto"/>
  </Grid.ColumnDefinitions>

  <ContentControl Grid.Column="0" ContentTemplate="{StaticResource MainWindowTemplate}" />

  <Button Grid.Column="1" Content="{Binding PanelTitle}" Command="{Binding Path=ShowPanelCommand}">
    <Button.LayoutTransform>
      <RotateTransform Angle="90"/>
    </Button.LayoutTransform>
  </Button>
 </Grid>

<Grid Visibility="{Binding IsPanelHidden, Converter={StaticResource revertBool2VisibilityConverter}}">

  <ContentControl ContentTemplate="{StaticResource MainWindowTemplate}" />

  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="0.5*"/>
    </Grid.ColumnDefinitions>

    <Border Grid.Column="2" VerticalAlignment="Stretch" Background="Red" >
      <Grid>
        <Grid.RowDefinitions>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Border HorizontalAlignment="Stretch">
          <Grid HorizontalAlignment="Stretch">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*"/>
              <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0" Text="{Binding PanelTitle}" Margin="5,5,0,2" HorizontalAlignment="Left"></TextBlock>
            <StackPanel Grid.Column="1" Orientation="Horizontal" Margin="0,0,5,0" HorizontalAlignment="Right" >
              <Button Content="Minimze" Command="{Binding HidePanelCommand}"/>
            </StackPanel>
          </Grid>
        </Border>

        <ContentPresenter Grid.Row="1" Margin="2" Content="{Binding PanelViewModel}" VerticalAlignment="Top"/>
      </Grid>
    </Border>
  </Grid>
</Grid>

The view model look like that:

public class TestTabViewModel : ObservableObject
{
    #region private attributes

    #endregion

    public TestTabViewModel(string panelName, object panelViewModel, object mainViewModel)
    {
        IsPanelHidden = true;
        PanelTitle = panelName;
        PanelViewModel = panelViewModel;
        MainViewModel = mainViewModel;
        ShowPanelCommand = new DelegateCommand(() =>ManagePanelVisibility(true));
        HidePanelCommand = new DelegateCommand(() => ManagePanelVisibility(false));
    }

    #region properties


    public string PanelTitle { get; private set; }

    public bool IsPanelHidden { get; private set; }

    public object PanelViewModel { get; private set; }

    public object MainViewModel { get; private set; }

    public DelegateCommand ShowPanelCommand { get; private set; }

    public DelegateCommand HidePanelCommand { get; private set; }

    #endregion

    #region private methods

    private void ManagePanelVisibility(bool visible)
    {
        IsPanelHidden = !visible;
        RaisePropertyChanged(() => IsPanelHidden);
    }

    #endregion
}

So for so good, this system work fine I aslo added some pin command but I remove them from here to make it “simple”.

My problem come when the main view model hold a tab control. In this, case if I select a tab and “open” the panel, the tab selected is “changed”. In fact it’s not changed it’s just that I display another contentControl which is not synchronize with the previouse one. I guess that the view instance is not the same even if the viewmodel behind is.

So how do I share a view instance within a view (or have the selection process synchornized)? My first guest was to use the datatemplate (as show in the example) but it did not solve my problem.

By the way, I know some third-party handling panel docking pin … (eg avalon) but all the one I found are really too much for my simple need.

Thanks for the help

Answer 1

Your best bet would probably be to replace your two Grids with a single ContentControl, and switch the Template on button click or in a Trigger. This way your actual Content (the TabControl) will be the same, but the template used to display the Content will change

Here’s a quick example:

<Window.Resources>
    <ControlTemplate x:Key="Grid1Template" TargetType="{x:Type ContentControl}">
        <DockPanel>
            <Grid Background="CornflowerBlue" Width="100" DockPanel.Dock="Left" />
            <ContentPresenter Content="{TemplateBinding Content}" />
        </DockPanel>
    </ControlTemplate>

    <ControlTemplate x:Key="Grid2Template" TargetType="{x:Type ContentControl}">
        <DockPanel>
            <Grid Background="CornflowerBlue" Width="100" DockPanel.Dock="Right" />
            <ContentPresenter Content="{TemplateBinding Content}" />
        </DockPanel>
    </ControlTemplate>
</Window.Resources>

<DockPanel>
    <ToggleButton x:Name="btnToggle" Content="Toggle View" DockPanel.Dock="Top" />
    <ContentControl>
        <ContentControl.Style>
            <Style TargetType="{x:Type ContentControl}">
            <Setter Property="Template" Value="{StaticResource Grid1Template}" />
            <Style.Triggers>
                    <DataTrigger Binding="{Binding ElementName=btnToggle, Path=IsChecked}" Value="True">
                        <Setter Property="Template" Value="{StaticResource Grid2Template}" />
                </DataTrigger>
            </Style.Triggers>
            </Style>
        </ContentControl.Style>

        <TabControl>
            <TabItem Header="Tab1" />
            <TabItem Header="Tab2" />
            <TabItem Header="Tab3" />
        </TabControl>
    </ContentControl>

</DockPanel>