CODEWITHSUNDEEP
c#wpflayouttabcontrol
Evgeni
Evgeni

Reputation: 3343

How to right-align last TabControl tab?

Is there a way to make last tab on TabControl right-aligned ? Want to make the last one separate from the first few.

Thanks !

Upvotes: 5

Views: 4043

Answers (3)

Gopichandar
Gopichandar

Reputation: 2832

If you want to have two tabs at left and one at right, You can have the third invisible tab inbetween and width of the invisible tab can be calculated by subtracting the Width of all three visible tabs from the Actualwidth of the Window which gives us the remaining space.

Here is the sample code

<TabControl x:Name="_tabsLeft" GotFocus="OnTabFocused" >

    <!-- First tab -->
    <TabItem Header="1st" >
        <!-- First content... -->
    </TabItem>

    <!-- Second tab -->
    <TabItem Header="2nd" >
        <!-- Second content... -->
    </TabItem>

     <!-- Third invisible tab -->
    <TabItem Header="Im not visible in UI" Visibility="Hidden" x:Name="invisibletab" >
        <!-- I'm not visible in UI... -->
    </TabItem>

    <!-- Last tab -->
    <TabItem Header="Last one" >
        <!-- Last content... -->
    </TabItem>

</TabControl>

Backend Code:

public MainWindow()
{
    InitializeComponent();       
    this.SizeChanged += window_SizeChanged;
}
private void window_SizeChanged(object sender, SizeChangedEventArgs e)
{
    invisibletab.Width = this.ActualWidth - 550; // where the 550 is the sum of the actual width of visible tabs
}

Upvotes: -1

Sphinxxx
Sphinxxx

Reputation: 13017

This post may be old, but i stumbled across it while searching for an answer to the same question, so i thought I'd share the quick and dirty solution I ended up with.

I just put two TabControls on top of each other in a Grid, and right-aligned the TabPanel on one of them (thanks go out to Meleak):

 <Grid>
    <TabControl x:Name="_tabsRight" GotFocus="OnTabFocused" >
        <TabControl.Resources>
            <Style TargetType="TabPanel">
                <Setter Property="HorizontalAlignment" Value="Right"/>
            </Style>
        </TabControl.Resources>

        <TabItem x:Name="JustAHiddenTabItemToDeselectTheRealOne" Visibility="Hidden" />

        <!-- Last tab -->
        <TabItem Header="Last one" >
            <!-- Last content... -->
        </TabItem>

    </TabControl>
    <TabControl x:Name="_tabsLeft" GotFocus="OnTabFocused" >

        <!-- First tab -->
        <TabItem Header="1st" >
            <!-- First content... -->
        </TabItem>

        <!-- Second tab -->
        <TabItem Header="2nd" >
            <!-- Second content... -->
        </TabItem>

    </TabControl>
</Grid>

Then, in the OnTabFocused event handler, we need to bring the bottom-most TabControl to the front when the user clicks a TabItem:

private int _zIncrementor = 0;
/// <summary>
/// Hack to make two TabControls act as one.
/// </summary>
private void OnTabFocused(object sender, RoutedEventArgs e)
{
    var tab = (TabControl)sender;
    var otherTab = (tab == _tabsLeft) ? _tabsRight : _tabsLeft;

    Grid.SetZIndex(tab, ++_zIncrementor);
    otherTab.SelectedItem = null;
}

Upvotes: 4

N_A
N_A

Reputation: 19897

Here is an example project on templating the TabControl tabs. I would probably use a Grid with three columns of width "Auto", * and "Auto" and put a StackPanel in the first column to hold the first set of tabs and then just the last tab by itself in the last column with the middle column being empty and just taking up the remaining space.

Upvotes: 3

Related Questions