locked
tabcontrol inside usercontrol RRS feed

  • Question

  • Hi,

    I have one main tabcontrol and many tabitems inside. I need to have more tabcontrols inside some of the tabitems to create a screen like this.

    but when i click on add tax, it is just displaying that screen for a moment and going back to chart of accounts screen. I tried to give .focus() to Add Tax tab, but it is not working. Can you please help me to solve this problem?

    Thank you very much

    Jo

    Thursday, August 23, 2012 11:37 PM

Answers

  • OK I got it. Your problem is the bubbling GotFocus event.

    Not only does the inner TabItem handle it, but it also bubbles up to the parent tab.

    When the parent tab gets the message it RELOADS the child control, hence you lose your selection, the whole child TabControl has been reloaded!

    Enough chat, here's the fix - "e.handled=true"

    private void tabTaxes_GotFocus(object sender, RoutedEventArgs e)
    {
        if (e.OriginalSource is TabItem)
        {
            tabTaxes.Content = new Taxes();
        }
        e.Handled = true;
    }

     

    Please mark ALL replies as helpful and the answer :)

     

    Best regards,
    Pete

     

    #PEJL

    • Marked as answer by s251984 Saturday, August 25, 2012 10:27 AM
    Friday, August 24, 2012 11:29 PM

All replies

  • I do not recognise the behaviour you describe.

    Below is an example of multi-layer tabs. Maybe you are doing something different?

    Else you will have to post a similar example demonstrating the behaviour.

    <Window x:Class="WpfApplication73.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="350" Width="525">
        <Grid>
            <TabControl>
                <TabItem Header="Tab 1">
                    <TabControl>
                        <TabItem Header="1.1"/>
                        <TabItem Header="1.2"/>
                        <TabItem Header="1.3"/>
                    </TabControl>
                </TabItem>
                <TabItem Header="Tab 2">
                    <TabControl>
                        <TabItem Header="2.1"/>
                        <TabItem Header="2.2"/>
                        <TabItem Header="2.3"/>
                    </TabControl>
                </TabItem>
            </TabControl>
        </Grid>
    </Window>

    Regards,
    Pete


    #PEJL


    • Edited by Pete LakerMVP Thursday, August 23, 2012 11:42 PM tweak code cut/paste error
    Thursday, August 23, 2012 11:42 PM
  • Hi,

    Thank you for your reply. I was trying to achieve something else. My main window is like this.

    <Grid>
            <TabControl Name="tabControlMain">
                <TabItem Name="tabHome" Header="Home"/>
                <TabItem Name="tabAccountSettings" Header="Account Settings" GotFocus="tabAccountSettings_GotFocus" />
                <TabItem Name="tabReport" Header="Reports"/>
            </TabControl>
        </Grid>

    I have made a usercontrol page for the tabAccountSettings which looks like this.

    <TabControl Name="tabControlCOA">
                <TabItem Name="tabChartofAccounts" Header="Chart of Accounts">
                    <Button Name="btnName" Content="COA" Width="100" Height="30"/>
                </TabItem>
                <TabItem Name="tabTaxes" Header="Add Tax" GotFocus="tabTaxes_GotFocus" />
                <TabItem Name="tabBank" Header="Bank" />
                <TabItem Name="tabCreditCard" Header="Credit Card"/>
            </TabControl>

    Now I have another user control for the tabitems in the tabcontrol 'tabControlCOA'. My idea is to make the pages cleaner and looking good. When I put it in debug mode I realised that if I click on the tab 'Account Settings', it is displaying the tabcontrol 'tabControlCOA' and showing the second level tabs. But thenafter if I click on bank or add tax tabs, it displays and go back to the tab 'tabChartofAccounts'. It looks like some focus problem or so. But I am not able to solve this problem. Please help!

    Thank you very much

    Jo

    Friday, August 24, 2012 8:06 AM
  • I believe the answer is probably whatever you are doing in your GotFocus event handler, that is causing your problems.

    I have recreated your example with the first grid in my MainWindow.xaml and the second snippet in a UserControl. I then include the UserControl into the main TabControl:

    <Grid>
        <TabControl Name="tabControlMain">
            <TabItem Name="tabHome" Header="Home"/>
        <TabItem Name="tabAccountSettings" Header="Account Settings" GotFocus="tabAccountSettings_GotFocus">
            <local:UserControl1/>
        </TabItem>
        <TabItem Name="tabReport" Header="Reports"/>
        </TabControl>
    </Grid>

    Again, the code worked flawlessly, so the only thing you are not showing and the event is based on, is the GotFocus event handler. Mine is empty, like this:

    private void tabAccountSettings_GotFocus(object sender, RoutedEventArgs e)
    {
    }

    I can imagine if some code in there fiddles with the TabControl's SelectedIndex, or causes the control to reload, you would see the effect you describe.
     

    Regards,
    Pete


    #PEJL


    Friday, August 24, 2012 8:08 PM
  • Hi,

    Thank you very much for the response. The code in the mainwindow is like this.private void tabAccountSettings_GotFocus(object sender, RoutedEventArgs e)
            {
                //MessageBox.Show(e.OriginalSource.ToString());
                if (e.OriginalSource is TabItem)
                {
                    tabAccountSettings.Content = new ChartofAccounts();
                }
            }

    and the chartofaccounts tab like this

    private void tabTaxes_GotFocus(object sender, RoutedEventArgs e)
            {
                if (e.OriginalSource is TabItem)
                {
                    tabTaxes.Content = new Taxes();
                }
            }

    if I uncomment the messagebox, it will display the messagebox and the content in the tax tab, then go back to chartof account tab. If I comment the messagebox, it is happening instantly. Am I writing something wrong in the gotfocus event? Please help me!

    Thank you very much

    Jo

    Friday, August 24, 2012 11:03 PM
  • OK I got it. Your problem is the bubbling GotFocus event.

    Not only does the inner TabItem handle it, but it also bubbles up to the parent tab.

    When the parent tab gets the message it RELOADS the child control, hence you lose your selection, the whole child TabControl has been reloaded!

    Enough chat, here's the fix - "e.handled=true"

    private void tabTaxes_GotFocus(object sender, RoutedEventArgs e)
    {
        if (e.OriginalSource is TabItem)
        {
            tabTaxes.Content = new Taxes();
        }
        e.Handled = true;
    }

     

    Please mark ALL replies as helpful and the answer :)

     

    Best regards,
    Pete

     

    #PEJL

    • Marked as answer by s251984 Saturday, August 25, 2012 10:27 AM
    Friday, August 24, 2012 11:29 PM
  • Hi Pete,

    Thank you so much. You have been so kind to spend your valuable time to solve the issue.

    Cheers,

    Jo

    Saturday, August 25, 2012 10:26 AM