Event before user changes TabItem

Question

I have a WPF application with a TabControl and several TabItems containing one UserControl each. Users can change entries in the usercontrol contained in the TabItem, for example configuring the application.

<TabControl>
  <TabItem Header="Configuration">
    <views:ConfigurationView x:Name="ConfigurationView_Object" />
  </TabItem>
  <TabItem Header="Artist">
    ...
  </TabItem>
</TabControl>

I have a function that checks, wheter there are unsaved changes in the UserControl. Before the user changes the tab or closes the application, I want to give him the option to either save, discard or stay on the tab.

Is that possible and if yes, how? If it needs some other controls/structures than the TabControl, that wouls also work, cause I'm currently in the planning stage ...

Thanks in advance,
Frank

Answer 1

The TabControl doesn't have a TabChanging event. However, you can use the .Items.CurrentChanging event. This only works if you set IsSynchronizedWithCurrentItem="True" on the TabControl

XAML**

  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height='1*' />
      <RowDefinition Height='Auto' />
    </Grid.RowDefinitions>
    <TabControl x:Name='MainTab'
                IsSynchronizedWithCurrentItem='True'
                Grid.Row='0'>
      <TabItem x:Name='TabTickets'
               Header='Tickets'>
        
          <StackPanel Orientation='Horizontal' >
            <TextBlock Text='Provide some text:'
                       Margin='10,0' />
            <TextBox x:Name='ExampleTextBox'
                     VerticalAlignment='Top' MinWidth='90' />
          </StackPanel>
       
      </TabItem>
      <TabItem x:Name='TabCalendar'
               Header='Calendar' />
      <TabItem x:Name='TabAbout'
               Header='About' />
    </TabControl>

    <TextBlock x:Name='MessageTextBox'
               Grid.Row='1' />

  </Grid>

Code

   public TabChangingWindow() {
      InitializeComponent();

      MainTab.Items.CurrentChanging += Items_CurrentChanging;
    }

    void Items_CurrentChanging(object sender,
                               System.ComponentModel.CurrentChangingEventArgs e) {
      if (e.IsCancelable)
      {
        var fromElement = ((ICollectionView)sender).CurrentItem as FrameworkElement;
        var toElement = MainTab.SelectedItem as FrameworkElement;
        if (fromElement!= null && toElement!= null)
        {
          if (ExampleTextBox.Text.Length == 0)
          {
            e.Cancel = true;
            MessageTextBox.Text = "Example Text cannot be blank.";
            MainTab.SelectedItem = fromElement;
          }
          else
          {
            MessageTextBox.Text = 
             String.Format("Changing from {0} to {1}", fromElement.Name, toElement.Name);
          }
         
        }
        
      }

    }

Screenshots

Prevent move to another tab when data is incomplete.

---

Allow move to another tab when data is complete.

Answer 2

You can use interactivity with any event.This is MVVM solution.

<TabControl>
   <TabItem Header="Configuration">
   <views:ConfigurationView x:Name="ConfigurationView_Object" />
    <intr:Interaction.Triggers>
         <intr:EventTrigger EventName="MouseUp">
               <intr:InvokeCommandAction Command="{Binding Yourcommand}" CommandParameter="YourCommandParameter"/>
               </intr:EventTrigger>
         </intr:Interaction.Triggers>

Answer 3

If you want to do it via events, you can use SelectionChanged event for the TabControl and the Closing event for the Window. Something like this:

XAML:

<Window x:Class="Namespace.View"
        .....
        Closing="Window_Closing">
......

C#:

private void Window_Closing(object sender, System.ComponentModel.CancelEventArgs e)
{
    if (UnsavedChanges())
    {
        //save changes            
    }        
}

XAML:

<TabControl SelectionChanged="TabControl_SelectionChanged">
    <TabItem Header="Configuration">
    <views:ConfigurationView x:Name="ConfigurationView_Object" />
 </TabItem>
 <TabItem Header="Artist">
  ...
 </TabItem>
</TabControl>

C#:

private void TabControl_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (UnsavedChanges())
    {
        //save changes
    }
}

Answer 4

I finally resourt to implement a simple tabcontrol myself, because then I have control over everything.

<WrapPanel x:Name="WrapPanel_Main"> <!-- This is the TabControl -->
  <Border x:Name="Border_Configuration" Margin="5,5,0,0" BorderThickness="4,4,4,0"> <!-- This is the first tab -->
    <TextBlock x:Name="TextBlock_Configuration" Text="Configuration" Padding="5" MouseLeftButtonUp="TextBlock_Step_MouseLeftButtonUp"/>
  </Border>
  <Border Margin="5,5,0,0" BorderThickness="4,4,4,0"> <!-- This is the second tab -->
    <TextBlock x:Name="TextBlock_Artists" Text="Artists" Padding="5" MouseLeftButtonUp="TextBlock_Step_MouseLeftButtonUp" />
  </Border>
  <Border Margin="5,5,0,0" BorderThickness="4,4,4,0"> <!-- This is the third tab -->
    <TextBlock x:Name="TextBlock_ReleaseGroups" Text="Release Groups" Padding="5" MouseLeftButtonUp="TextBlock_Step_MouseLeftButtonUp"/>
  </Border>
</WrapPanel>

<Border x:Name="Border_Placeholder" Grid.Row="1" Margin="5,0,5,5"> <!-- placeholder for the content of each tab -->
  <ContentControl x:Name="ContentControl_Placeholder" Grid.Row="1" Padding="5" />
</Border>

And here the handler that takes care of the Mouse-Up-Event of the "Tabs". I created an interface, each usercontrol that is used as a content for the tab has to implement. This allows the user control to inform the "Tab Control" about unsaved changes and to take appropriate (user choice) action. After that, it loads the new content and changes the appearance of the "Tab-Headers". The amount of more code this causes is in my opinion acceptable to the full control regarding tab changes.

private void TextBlock_Step_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
  ICancelUnloading currentElement = ContentControl_Placeholder.Content as ICancelUnloading;
  if (currentElement != null)
  {
    if (currentElement.UnsavedChanges)
    {
      MessageBoxResult result = MessageBox.Show("Yes: Save, No: Discard, Cancel: Stay", "Unsaved Changes", MessageBoxButton.YesNoCancel, MessageBoxImage.Warning, MessageBoxResult.Cancel);
      if (result == MessageBoxResult.Cancel)
        return;
      if (result == MessageBoxResult.Yes)
        currentElement.Save();
    }
  }

  TextBlock textBlock = sender as TextBlock;
  if (textBlock != null)
  {
    switch (textBlock.Name)
    {
      case "TextBlock_Configuration":
        ContentControl_Placeholder.Content = new ConfigurationView();
        break;
      case "TextBlock_Artists":
        ContentControl_Placeholder.Content = new ArtistsView();
        break;
      case "TextBlock_ReleaseGroups":
        ContentControl_Placeholder.Content = new ReleaseGroupsView();
        break;
    }

    ActivateTab(textBlock);
  }
}