Doesn't work close button on the TabItem

Question

0.00/5 (No votes)

See more:

Hello, all

i'm using WPF and MVVM pattern and I try to create closeable tabitem control. But my binded method CloseCommand on the button in template of the tabitem doesn't work. And works on any button in the window. I dont understand, why? Below code of the test project.

Thanks.

ViewModel

C#

namespace CloseableTabControl.ViewModel
{
    public class CloseableTabControlVM
    {
        private RelayCommand _closeCommand;
        public ICommand CloseCommand
        {
            get {
                if (_closeCommand == null )
                _closeCommand = new RelayCommand(param => this.closeButton_Execute());

                return _closeCommand;
            }
        }
        
        private ObservableCollection<IPageBase> _pages;

        public ObservableCollection<IPageBase> Pages
        {
            get { return _pages; }
            set { _pages = value; }
        }


        public CloseableTabControlVM()
        {
            _pages = new ObservableCollection<IPageBase>();
            _pages.Add(new TabItem1VM());
            _pages.Add(new TabItem2VM());
            _pages.Add(new TabItem1VM());
        }

        private bool closeButton_canExecute() { return true; }

        private void closeButton_Execute() 
        {
            MessageBox.Show("Click me!");
        }
    }
}

Commands

C#

namespace CloseableTabControl.Command
{
    public class RelayCommand : ICommand
    {

        #region Fields
        private readonly Predicate<object> _canExecute;
        private readonly Action<object> _execute;
        #endregion

        #region Constructor
        public RelayCommand(Action<object> execute):this(null, execute) { }

        public RelayCommand(Predicate<object> canExecute, Action<object> execute)
        {
            if (execute == null) throw new ArgumentNullException("execute");
            _execute = execute;
            _canExecute = canExecute;
        }
        #endregion

        [DebuggerStepThrough]
        public bool CanExecute(object param)
        {
            return _canExecute == null ? true : _canExecute(param); 
        }

        public void Execute(object param)
        {
            _execute(param);
        }

        public event EventHandler CanExecuteChanged
        {
            add { CommandManager.RequerySuggested += value; }
            remove { CommandManager.RequerySuggested -= value; }
        }
    }
}

MainWindow Code

C#

namespace CloseableTabControl
{
    public partial class MainWindow : Window
    {
        private CloseableTabControlVM _closeTab;
        public CloseableTabControlVM CloseTab
        {
            get { return _closeTab; }
            set { _closeTab = value; }
        }

        public MainWindow()
        {
            _closeTab = new CloseableTabControlVM();
            InitializeComponent();
        }
    }
}

And MainVindow XAML

XML

<Window x:Class="CloseableTabControl.MainWindow"
        x:Name="MainWindowInstance"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:v="clr-namespace:CloseableTabControl.View"
        xmlns:vm="clr-namespace:CloseableTabControl.ViewModel"
        DataContext="{Binding CloseTab,ElementName=MainWindowInstance}"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <DataTemplate DataType="{x:Type vm:TabItem1VM}">
            <v:TabItem1/>
        </DataTemplate>
        <DataTemplate DataType="{x:Type vm:TabItem2VM}">
            <v:TabItem2/>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <TabControl 
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Margin="10,10,10,10"
            Width="500"
            Height="300"
            ItemsSource="{Binding Pages}">
            <TabControl.ItemContainerStyle>
                <Style TargetType="TabItem">
                    <Setter Property="HeaderTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding Header}"/>
                                    <Button Content="x" Margin="0" Command="{Binding CloseCommand}" Width="16" Height="16"/>
                                </StackPanel>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </TabControl.ItemContainerStyle>
        </TabControl>
    </Grid>
</Window>

Posted 31-Jan-13 2:47am

Andrey A. Eroshenko

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Pete O'Hanlon · Accepted Answer · 2013-01-31T03:23:00

If you look in your Output window when debugging, you'll see that you have binding errors in there relating to the CloseCommand, stating that it doesn't belong to the relevant VM. That's because your command isn't defined at the VM level - rather, it's defined at the container level. To fix this, use the relative source to find the tab item that contains this - and bind to that DataContext, like this:

XML

<Button Content="x" Margin="0" Command="{Binding DataContext.CloseCommand, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Width="16" Height="16"/>