Not logged in▾
Log In Register
Forgot Password Resend Validation E-mail

Selector.IsSelected

Ribbon for WPF Forum

Posted 16 years ago by Andy Ver Murlen
Avatar
Why does setting Selector.IsSelected = true on a Tab in a ribbbon not quite work? I am trying to stick to my m-v-vm pattern using the ribbon control and frequently need to make a specific tab active from the viewmodel. I have a property on the viewmodel "IsMyTabSelected" and bound this property to a tab's Selector.IsSelected property.

However, when the property gets set to true, the tab indeed gets selected, but does not display it's contents. The previously selected tab is also selected, and it's contents are what is actually displayed. SO I end up with 2 tabs "selected" but the contents of the first being displayed.

Also, why doesn't this work to set the selected tab? Surely simple xaml binding should work? However, when the window is loaded, the File tab will be selected, not the Action tab. 

<ribbon:Ribbon 
            x:Name="uxRibbon_MainRibbon"
            DockPanel.Dock="Top"
            themes:ThemeManager.Theme="AeroNormalColor"
            SelectedTab={Binding ElementName=uxRibbonTab_Actions}"
            >           
           
            <ribbon:Tab x:Name="uxRibbonTab_File" Label="File" Id="File"/>
            
            <ribbon:Tab x:Name="uxRibbonTab_Edit" Label="Edit" Id="Edit"/>
            
            <ribbon:Tab x:Name="uxRibbonTab_Actions" Label="Actions" Id="Actions"/>
            
        </ribbon:Ribbon>
Thanks

[Modified at 03/03/2009 10:20 AM]

Comments (9)

Posted 16 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
Hi Andy,

For your first question, perhaps you could email over a simple sample project that shows it happening and we can debug it.

For the second, my guess would be that the SelectedTab property is being set before the ActiveTabs collection has been built and therefore it doesn't set the tab. If you include this in your sample that you send over we can check into it as well.

Actipro Software Support

Posted 16 years ago by Andy Ver Murlen
Avatar
Hi, I will send you a project for the first question because it takes a bit more code to reproduce. For the second question, simply create a new wpf project and use this code for "Window1" and compile it. You will see that tab one is selected when the window opens, not tab three as is specified in SelectedTab. 

<ribbon:RibbonWindow 
    x:Class="RibbonSample.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ribbon="http://schemas.actiprosoftware.com/winfx/xaml/ribbon"
    xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
    Title="Window1"
    >
    <DockPanel LastChildFill="True">
        <ribbon:Ribbon 
            DockPanel.Dock="Top" 
            TargetContentContainer="{Binding ElementName=MainGrid}"
            SelectedTab="{Binding ElementName=TabThree}"
            > 
            
            <ribbon:Tab x:Name="TabOne" Label="Tab One">
                
            </ribbon:Tab>    
            
            <ribbon:Tab x:Name="TabTwo" Label="Tab Two">
                
            </ribbon:Tab> 
            
            <ribbon:Tab x:Name="TabThree" Label="Tab Three">
                
            </ribbon:Tab> 
        </ribbon:Ribbon>
        <Grid x:Name="MainGrid">
               
        </Grid>
    </DockPanel>
</ribbon:RibbonWindow>
Posted 16 years ago by Andy Ver Murlen
Avatar
Actually, for the first question, simply modify the window above as follows. This essentially mimics what I am doing with my viewmodel, without the hassle of the viewmodel code.

You will see that both tabs 1 and 3 are selected, and only the contents of tab one are displayed. 

<ribbon:RibbonWindow 
    x:Class="RibbonSample.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ribbon="http://schemas.actiprosoftware.com/winfx/xaml/ribbon"
    xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
    Title="Window1"
    >
    <DockPanel LastChildFill="True">
        <ribbon:Ribbon 
            DockPanel.Dock="Top" 
            TargetContentContainer="{Binding ElementName=MainGrid}"
            > 
            
            <ribbon:Tab x:Name="TabOne" Label="Tab One">
                <ribbon:Group Label="Group For Tab One">
                    <ribbon:CheckBox Label="CheckBox in Tab One" />  
                </ribbon:Group>   
            </ribbon:Tab>    
            
            <ribbon:Tab x:Name="TabTwo" Label="Tab Two">
                <ribbon:Group Label="Group For Tab Two">
                    <ribbon:CheckBox Label="CheckBox in Tab Two" />   
                </ribbon:Group>  
            </ribbon:Tab> 
            
            <ribbon:Tab x:Name="TabThree" Label="Tab Three" Selector.IsSelected="True">
                <ribbon:Group Label="Group For Tab Three">
                    <ribbon:CheckBox Label="CheckBox in Tab Three" />   
                </ribbon:Group>   
            </ribbon:Tab> 
        </ribbon:Ribbon>
        <Grid x:Name="MainGrid">
               
        </Grid>
    </DockPanel>
</ribbon:RibbonWindow>
Posted 16 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
Hi Andy,

Quick update, we're still working on this but I hope to have an update for you in the next couple days.

Actipro Software Support

Posted 16 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
Andy,

We've made a code change that should allow Selector.IsSelected to work. This will be in the next maintenance release.

As for the setting of SelectedTab via a binding, I believe the binding gets wiped out when the Ribbon's template is applied since the property is getting locally before the binding is realized. But regardless, you technically aren't permitted to do that per this item in the Microsoft Ribbon UI requirements:
"The leftmost tab (the “Home” Tab) MUST be selected every time the application is started."

Actipro Software Support

Posted 16 years ago by Andy Ver Murlen
Avatar
Thanks! It does now work. However, it does not work if the Tab is inside a ContextualTabGroup. In this senario, the old behavior is exhibited, where the tab will show selected, however the previously selected tab will also show selected, and the contents will be the previously selected tab's contents. Also, the Contextual tab will remain showing as selected, until you actually click on it, then click off of it.

Here is a simple window demonstrating. The contextual tab has Selector.IsSelected set to true, however you will see that Tab One and the COntextual tab are selected. As you click around the tabs, you will see that the contextual tab remains selected until you actually click it then click off of it. 

<ribbon:RibbonWindow 
    x:Class="RibbonSample.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ribbon="http://schemas.actiprosoftware.com/winfx/xaml/ribbon"
    xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
    Title="Window1"
    >
    <DockPanel LastChildFill="True">
        <ribbon:Ribbon 
            DockPanel.Dock="Top" 
            TargetContentContainer="{Binding ElementName=MainGrid}"
            > 
            
            <ribbon:Tab x:Name="TabOne" Label="Tab One">
                <ribbon:Group Label="Group For Tab One">
                    <ribbon:CheckBox Label="CheckBox in Tab One" />  
                </ribbon:Group>   
            </ribbon:Tab>    
            
            <ribbon:Tab x:Name="TabTwo" Label="Tab Two">
                <ribbon:Group Label="Group For Tab Two">
                    <ribbon:CheckBox Label="CheckBox in Tab Two" />   
                </ribbon:Group>  
            </ribbon:Tab> 
            
            <ribbon:Tab x:Name="TabThree" Label="Tab Three">
                <ribbon:Group Label="Group For Tab Three">
                    <ribbon:CheckBox Label="CheckBox in Tab Three" />   
                </ribbon:Group>   
            </ribbon:Tab> 
            <ribbon:Ribbon.ContextualTabGroups>
                <ribbon:ContextualTabGroup 
                    Label="Contextual Tab"
                    IsActive="True"
                    >
                     <ribbon:Tab
                        x:Name="uxTab_ContextTab"
                        Label="Contextual Tab"
                        Id="SelectedItem"
                        VariantSize="Large"
                        SnapsToDevicePixels="True"
                        Selector.IsSelected="True"
                        >
                    </ribbon:Tab>
                </ribbon:ContextualTabGroup>
            </ribbon:Ribbon.ContextualTabGroups>
        </ribbon:Ribbon>
        <Grid x:Name="MainGrid">
        </Grid>
    </DockPanel>
</ribbon:RibbonWindow>
[Modified at 03/09/2009 08:41 AM]
Posted 16 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
Andy,

It's due to the order things are defined. When the normal Tabs are loaded, they have already initialized the TabStrip before contextual tabs have loaded. If you flip it around so the contextual tab groups are defined before the normal tabs in XAML, it works how you want.

Actipro Software Support

Posted 16 years ago by Andy Ver Murlen
Avatar
Thanks for the reply, however, moving the contextual group before the tabs and setting Selector.IsSelected = true appears to only work, because the contextual group is now first. However, if you trigger Seelctor.IsSelected, it does not work. Take this example. When loaded, the contextual group will be selected and the toggle button will be checked. Click tab one, then click the toggle button and you'll see that the contextual tab gets selected, however tab one remains selected and tab one's content is displayed. 

<ribbon:RibbonWindow 
    x:Class="RibbonSample.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ribbon="http://schemas.actiprosoftware.com/winfx/xaml/ribbon"
    xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
    Title="Window1"
    >
    <DockPanel LastChildFill="True">
        <ribbon:Ribbon 
            DockPanel.Dock="Top" 
            TargetContentContainer="{Binding ElementName=MainGrid}"
            > 
            <ribbon:Ribbon.ContextualTabGroups>
                <ribbon:ContextualTabGroup 
                    Label="Contextual Tab"
                    IsActive="True"
                    >
                     <ribbon:Tab
                        x:Name="uxTab_ContextTab"
                        Label="Contextual Tab"
                        Id="SelectedItem"
                        VariantSize="Large"
                        SnapsToDevicePixels="True"
                        Selector.IsSelected="{Binding ElementName=ToggleButton, Path=IsChecked}"
                        >
                    </ribbon:Tab>
                </ribbon:ContextualTabGroup>
            </ribbon:Ribbon.ContextualTabGroups>
            <ribbon:Tab x:Name="TabOne" Label="Tab One">
                <ribbon:Group Label="Group For Tab One">
                    <ribbon:CheckBox Label="CheckBox in Tab One" />  
                </ribbon:Group>   
            </ribbon:Tab>    
            
            <ribbon:Tab x:Name="TabTwo" Label="Tab Two">
                <ribbon:Group Label="Group For Tab Two">
                    <ribbon:CheckBox Label="CheckBox in Tab Two" />   
                </ribbon:Group>  
            </ribbon:Tab> 
            
            <ribbon:Tab x:Name="TabThree" Label="Tab Three">
                <ribbon:Group Label="Group For Tab Three">
                    <ribbon:CheckBox Label="CheckBox in Tab Three" />   
                </ribbon:Group>   
            </ribbon:Tab> 
        </ribbon:Ribbon>
        <Grid x:Name="MainGrid">
            <ToggleButton
                Content="Click Me"
                IsChecked="True"
                x:Name="ToggleButton"
                />
        </Grid>
    </DockPanel>
</ribbon:RibbonWindow>
Now, make one small change and bind tab one's Selector.IsSelected to the toggle button and it works properly. When you leave tab one and then check the toggle button, tab one properly get's re-selected. 

<ribbon:RibbonWindow 
    x:Class="RibbonSample.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ribbon="http://schemas.actiprosoftware.com/winfx/xaml/ribbon"
    xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
    Title="Window1"
    >
    <DockPanel LastChildFill="True">
        <ribbon:Ribbon 
            DockPanel.Dock="Top" 
            TargetContentContainer="{Binding ElementName=MainGrid}"
            > 
            <ribbon:Ribbon.ContextualTabGroups>
                <ribbon:ContextualTabGroup 
                    Label="Contextual Tab"
                    IsActive="True"
                    >
                     <ribbon:Tab
                        x:Name="uxTab_ContextTab"
                        Label="Contextual Tab"
                        Id="SelectedItem"
                        VariantSize="Large"
                        SnapsToDevicePixels="True"
                        
                        >
                    </ribbon:Tab>
                </ribbon:ContextualTabGroup>
            </ribbon:Ribbon.ContextualTabGroups>
            <ribbon:Tab x:Name="TabOne" Label="Tab One" Selector.IsSelected="{Binding ElementName=ToggleButton, Path=IsChecked}">
                <ribbon:Group Label="Group For Tab One">
                    <ribbon:CheckBox Label="CheckBox in Tab One" />  
                </ribbon:Group>   
            </ribbon:Tab>    
            
            <ribbon:Tab x:Name="TabTwo" Label="Tab Two">
                <ribbon:Group Label="Group For Tab Two">
                    <ribbon:CheckBox Label="CheckBox in Tab Two" />   
                </ribbon:Group>  
            </ribbon:Tab> 
            
            <ribbon:Tab x:Name="TabThree" Label="Tab Three">
                <ribbon:Group Label="Group For Tab Three">
                    <ribbon:CheckBox Label="CheckBox in Tab Three" />   
                </ribbon:Group>   
            </ribbon:Tab> 
        </ribbon:Ribbon>
        <Grid x:Name="MainGrid">
            <ToggleButton
                Content="Click Me"
                IsChecked="True"
                x:Name="ToggleButton"
                />
        </Grid>
    </DockPanel>
</ribbon:RibbonWindow>
Posted 16 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
Hi Andy,

We found what was not bubbling up right so now your first example in the last post works well. This change will be in the next maintenance release.

Actipro Software Support

The latest build of this product (v24.1.3) was released 1 month ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.