Close tabs - RadTabControl + Prism

[George Bill]

Hello,

I'm a beginner in WPF and I need your help to do something.

I want to add a system to close tabs for users. But I can't do it !
I found a video here : http://tv.telerik.com/wpf/prism/introduction-prism-with-radcontrols-wpf and I use the same thing for RadTabControl. So I'm using MS Composite Application Guidance and the RegionManager.

So I have this code id my main project :

<telerik:RadTabControl Name="tabControlClient" DockPanel.Dock="Right" cal:RegionManager.RegionName="MainRegion" Margin="10 0 10 10" ScrollMode="Viewport" DropDownDisplayMode="Visible" DisplayMemberPath="Content">
            <telerik:RadTabControl.ItemContainerStyle>
               <Style TargetType="{x:Type telerik:RadTabItem}">
                    <Setter Property="Header" Value="{Binding DataContext.HeaderInfo}" />
                    <Setter Property="Height" Value="25" />
                    <Setter Property="IsSelected" Value="True" />
                </Style>
            </telerik:RadTabControl.ItemContainerStyle>
</telerik:RadTabControl>

In my Module Project I copy the code on the video :

public String HeaderInfo

{

get { return "Labs Module"; }

}

#region INotifyPropertyChanged Membres

public event PropertyChangedEventHandler PropertyChanged;

protected void OnPropertyChanged(String propertyName)

{

if (this.PropertyChanged != null)

{

this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

}

}

It work ! But now I want to add a close system. So I search the solution in this forum and I found this : How to Add Close Button to the Tab Headers
So I complete my code in my main project like this :

<telerik:RadTabControl Name="tabControlClient" DockPanel.Dock="Right" cal:RegionManager.RegionName="MainRegion" Margin="10 0 10 10" ScrollMode="Viewport" DropDownDisplayMode="Visible" DisplayMemberPath="Content">
            <telerik:RadTabControl.ItemContainerStyle>
               <Style TargetType="{x:Type telerik:RadTabItem}">

                    <Setter Property="Header" Value="{Binding DataContext.HeaderInfo}" />
                    <Setter Property="HeaderTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <Grid>
                                    <TextBlock Text="{Binding Header}"></TextBlock>
                                    <Button Grid.Column="1" Margin="3 0 0 0" Content="x" Width="16"
                                       Height="16" HorizontalAlignment="right"/>
                                </Grid>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Height" Value="25" />
                    <Setter Property="IsSelected" Value="True" />
                </Style>
            </telerik:RadTabControl.ItemContainerStyle>
        </telerik:RadTabControl>

But only close button appear and not the header text.
So how I can use this two solution to have "Header text + close button" please ?

If you need more informations or others, tell me.

Thank you in advance.
Best Regards

[Miroslav]

Hi George Bill,

My suggestion is more of a guess since I cannot test it in your project, but hopefully it will work:

<telerik:RadTabControl Name="tabControlClient" DockPanel.Dock="Right" cal:RegionManager.RegionName="MainRegion" Margin="10 0 10 10" ScrollMode="Viewport" DropDownDisplayMode="Visible" DisplayMemberPath="Content">
            <telerik:RadTabControl.ItemContainerStyle>
               <Style TargetType="{x:Type telerik:RadTabItem}">

                    <Setter Property="Header" Value="{Binding DataContext.HeaderInfo}" />
                    <Setter Property="HeaderTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <Grid>
                                    <TextBlock Text="{Binding}"></TextBlock>
                                    <Button Grid.Column="1" Margin="3 0 0 0" Content="x" Width="16"
                                       Height="16" HorizontalAlignment="right"/>
                                </Grid>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Height" Value="25" />
                    <Setter Property="IsSelected" Value="True" />
                </Style>
            </telerik:RadTabControl.ItemContainerStyle>
        </telerik:RadTabControl>

Since the Header property already has the value you need the HeaderTemplate property just needs to display this value, hence the empty {Binding}.

Hopefully this will work for you.

Kind regards,
Miroslav
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[George Bill]

Thanks for your reply !

It work ! I'm sorry about the simplicity of the solution but I'm really a newbie with WPF.
I have just a problem with the size of Header but I think I can fix it alone.

Now I'm going to find how to delete tabs when I click on the button !
I post again if I have another problem.

Thanks again Miroslav and Telerik Team.
You're doing a great job !

[Tina Stancheva]

Hi George Bill,

We are happy that we were able to help.

Please let us know if we can further assist you.

Sincerely yours,
Tina Stancheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[George Bill]

[EDIT] :

Finally I found a solution to close Tabs but not perfect.

I explain my solution (I don't know if it's a good solution or not, but for the moment it work) :

1/ In my Module Class (implements IModule - mymodule.cs), I add this method :

public static void remove(Object view)
{
     _regionManager.Regions["MainRegion"].Remove(view);
}

2/ In my View Class (extends UserControl - myview.xaml.cs), I add this method :

public void remove()
{
     ConfigurationModule.remove(this);
}

3/ In the Shell View (Shell.xaml.cs), I add this method :

private void TabCloseButton_Click(object sender, RoutedEventArgs e)

{      // tabControl is the Name of my RadTabControl

if (tabControl.SelectedItem != null)

{

StandardView view = (StandardView)tabControl.SelectedItem;

view.remove();

}

}

4/ In Shell View XAML (Shell.xaml), I use this button :

<telerik:RadButton Grid.Column="1" Margin="3 0 0 0" Content="X" Width="16"
               Height="16" HorizontalAlignment="right" BorderThickness="1"
               VerticalContentAlignment="Top" ForceCursor="False" FontSize="7.3" FontWeight="Bold"
               Click="TabCloseButton_Click" />

It's not a perfect solution, because when I click the Close Button, the Tab become the selectedItem. That's why it work !
So, after deleting, Tab #1 become the new Selected Item and we can see during few millisecond the tab that we want removing.

I don't delete my question below, so if anyone have a better solution, can you share it please !

----------------------------------------------------------------------------------------------------------------------

Hi all !

All this morning I tried to add the action "Close/Remove Tab" when I click on the button.
But It doesn't work and I have no more idea !

I tried to use the sample in RadControl Trial.
I tested with this : How to Add Close Button to the Tab Headers (WPF)
I understand the event and it work, but I have a problem with the model. Because I have two project (Main and Module).
I tested with _regionManager.Regions["MainRegion"].Remove(view); but it's a bad solution. It work just one time ! And after, an exception is raised.

You can download a little project here : Download

I really need some help with this action.

Thank you  in advance again.
Best Regards

[Tina Stancheva]

Hi George Bill,

It is better to move all your logic for removing the tabs in the Shell.xaml.cs file. You can modify the code like so:

public partial class Shell : Window
{
   public Shell()
   {
        InitializeComponent();
    EventManager.RegisterClassHandler(typeof(RadTabItem), RoutedEventHelper.CloseTabEvent, new RoutedEventHandler(OnCloseClicked));
   }

   private void WindowCloseButton_Click(object sender, RoutedEventArgs e)
   {
        Close();
   }

   private void WindowMinimizeButton_Click(object sender, RoutedEventArgs e)
   {
        WindowState = WindowState.Minimized;
   }

   private void OnCloseClicked(object sender, RoutedEventArgs e)
   {
    RadTabItem tabItem = sender as RadTabItem;
    (tabItem.DataContext as StandardView).remove();
   }
}

And then you can use the remove method you added to the View Class (StandardView.xaml.cs) :

public void remove()

{

     ConfigurationModule.remove(this);

}

Give this a try and let me know if this is what you had in mind.

Also, your initial problem was that when you are adding the class handler and the OnCloseClicked() method into the View Class (StandardView.xaml.cs), they are generated for each new tab thus causing the OnCloseClicked() method to be called multiple times thus trying to remove the same tab multiple times.

However, if you prefer to keep all your logic into the StandardView.xaml.cs file you can register the class handler in a static contructor and make the OnCloseClicked() method static:

public StandardView(StandardViewModel model)
        {
            InitializeComponent();
            this.DataContext = model;
        }
static StandardView()
    {
        EventManager.RegisterClassHandler(typeof(RadTabItem), RoutedEventHelper.CloseTabEvent, new RoutedEventHandler(OnCloseClicked));
    }

private static void OnCloseClicked(object sender, RoutedEventArgs e)
        {
        RadTabItem tabItem = sender as RadTabItem;
        ConfigurationModule.remove(tabItem.DataContext as StandardView);
        }

I attached a modified example demonstrating this approach. Let me know if you need more info.

Sincerely yours,
Tina Stancheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[George Bill]

Hi,

Thanks you very much for your reply !

[EDIT 3] :

Finally I use your first solution and I removing the tabs in the Shell.xaml.cs
But I change the OnCloseClicked method like this :

private void OnCloseClicked(object sender, RoutedEventArgs e)
{
     RadTabItem tabItem = sender as RadTabItem;
     IRegionManager rm = RegionManager.GetRegionManager(this);
     rm.Regions["MainRegion"].Remove(tabItem.DataContext);
}

For the moment it work. So I consider you resolv my problem and mark your reply as answer.
If I have other problems in the future, I hope you can continue to help me like that.

-------------------------------------------------------------------------------------------------------------

[EDIT 4] :

I add Focusable="False" on my CloseButton to not display the TabItem when we click on the CloseButton.
So the XAML code of the button is (Infos for others) :

<telerik:RadButton Grid.Column="1" Margin="3 0 0 0" Content="X" Width="16"
     Height="16" HorizontalAlignment="right" BorderThickness="1"
     VerticalContentAlignment="Top" ForceCursor="False" FontSize="7.3"
     FontWeight="Bold"
     common:RoutedEventHelper.EnableRoutedClick="True" Focusable="False" />

PS : common is my namespace of my asembly with the RoutedEventHelper Class.
(xmlns:common="clr-namespace:Common;assembly=Common")

-------------------------------------------------------------------------------------------------------------

Thank you very much Telerik Team !

Best regards,
BG

[Tina Stancheva]

Hello George Bill,

I am glad that I was able to help.

Don't hesitate to contact us againg if we can be of assistance.

Kind regards,
Tina Stancheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.