WPF: How to bind and update display with DataContext

Question

I'm trying to do the following thing:

I have a TabControl with several tabs. Each TabControlItem.Content points to PersonDetails which is a UserControl Each BookDetails has a dependency property called IsEditMode

I want a control outside of the TabControl , named ToggleEditButton, to be updated whenever the selected tab changes.

I thought I could do this by changing the ToggleEditButton data context, by it doesn't seem to work (but I'm new to WPF so I might way off)

The code changing the data context:

    private void tabControl1_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (e.Source is TabControl)
        {
            if (e.Source.Equals(tabControl1))
            {
                if (tabControl1.SelectedItem is CloseableTabItem)
                {
                    var tabItem = tabControl1.SelectedItem as CloseableTabItem;
                    RibbonBook.DataContext = tabItem.Content as BookDetails;
                    ribbonBar.SelectedTabItem = RibbonBook;
                }
            }
        }
    }

The DependencyProperty under BookDetails:

    public static readonly DependencyProperty IsEditModeProperty =
        DependencyProperty.Register("IsEditMode", typeof (bool), typeof (BookDetails),
                                    new PropertyMetadata(true));
    public bool IsEditMode
    {
        get { return (bool)GetValue(IsEditModeProperty); }
        set
        {
            SetValue(IsEditModeProperty, value);
            SetValue(IsViewModeProperty, !value);
        }
    }

And the relevant XAML:

<odc:RibbonTabItem Title="Book" Name="RibbonBook">
    <odc:RibbonGroup Title="Details" Image="img/books2.png" IsDialogLauncherVisible="False">
        <odc:RibbonToggleButton Content="Edit"
            Name="ToggleEditButton"
            odc:RibbonBar.MinSize="Medium" 
            SmallImage="img/edit_16x16.png"
            LargeImage="img/edit_32x32.png"
            Click="Book_EditDetails"
            IsChecked="{Binding Path=IsEditMode, Mode=TwoWay}"/>
    ...

There are two things I want to accomplish, Having the button reflect the IsEditMode for the visible tab, and have the button change the property value with no code behind (if posible)

Any help would be greatly appriciated.

Answer 1

You can accomplish what you want by binding directly to the TabControl's SelectedItem using the ElementName binding:

<odc:RibbonTabItem Title="Book" Name="RibbonBook">
    <odc:RibbonGroup Title="Details" Image="img/books2.png" IsDialogLauncherVisible="False">
        <odc:RibbonToggleButton Content="Edit"
            Name="ToggleEditButton"
            odc:RibbonBar.MinSize="Medium" 
            SmallImage="img/edit_16x16.png"
            LargeImage="img/edit_32x32.png"
            Click="Book_EditDetails"
            IsChecked="{Binding ElementName=myTabControl, Path=SelectedItem.IsEditMode, Mode=TwoWay}"/>

Where myTabControl is the name of the TabControl (the value of the x:Name property). You shouldn't need to handle the SelectionChanged event anymore to update the DataContext of the button.