locked
TabItem: placing close button to upper right corner RRS feed

  • Question

  • How to place close button (x) exactly to upper right corner of TabControl TabItem header ?

    I created control 

    <UserControl x:Class="MyApp.Controls.TabItemHeaderUserControl"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    >

    <StackPanel x:Name="LayoutRoot" Orientation="Horizontal" >

    <TextBlock x:Name="textBlock">Header text</TextBlock>

    <Button Content="x" Height="20" Margin="0,-15,0,0" Click="Button_Click"></Button>

    </StackPanel>

    </UserControl>

     

    but x button is in wrong position.

    How to force this control to position x to upper right corner for any header text like

    /--------------------|
    |                  x|
    | Header text  |
    ----------------------

     

    ?

     

    Andrus.

    Tuesday, March 10, 2009 1:04 PM

Answers

  • Hi Andrus,

    How to move button to upper right cornder of tab ? should I try negative margins or is it possible to set tab header propererties so that empty space does not appear ?

     Another issue:

    There is also empty space in tab item content and settign margins to 0 does not remove this. How to remove those margins so that usercontrol placed to tabitem content uses whole TabItem rectangle area ?

    I have copied your code and test it on a bland new application. The UserControl itself is ok.  The space is made by TabItem. The better way is to modify its template and make their outlook looks like the same.

    How to make close button visible only in active tab like in Internet Explorer ?

    We need to manually find the button and show/hide it.

    Best regards,

    Jonathan

    Monday, March 16, 2009 3:17 AM

All replies

  • Dont use StackPanel. use Grid with 2 columns

    1st column will have width of *

    2nd will be auto, verticalAlignment=top, HorizontalAlignment = right

    • Proposed as answer by MayurPaghdal Tuesday, August 26, 2014 9:37 AM
    Tuesday, March 10, 2009 1:25 PM
  •  Lee,

    Thank you. I tried layout below.

    Header text and x are truncated together. There is empty space between button and right and top border of tab header:

    Headertextx

    How to change this so that result looks better, like in Delphi control tab close button

                            x

    Header text

     

    or like in IE Tab header close button which is dispalyed only for active tab ?

    Andrus.

    <UserControl x:Class="Myapp.Controls.TabItemHeaderUserControl"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    >

    <Grid x:Name="LayoutRoot">

    <Grid.ColumnDefinitions>

    <ColumnDefinition Width ="*"/>

    <ColumnDefinition Width ="Auto"/>

    </Grid.ColumnDefinitions>

    <TextBlock x:Name="textBlock" Grid.Column="0"></TextBlock>

    <Button Content="x" Grid.Column="1" Click="Button_Click"

    Margin="0,0"

    HorizontalAlignment="Right"

    VerticalAlignment="Top"

    >

    </Button>

    </Grid>

    </UserControl>

    Tuesday, March 10, 2009 1:36 PM
  • You can use Grid like below:

        <Grid x:Name="LayoutRoot" Background="AliceBlue" >
            <Grid.RowDefinitions>
                <RowDefinition Height="20"></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="1" x:Name="textBlock">Header text</TextBlock>
            <Button Content="x" Margin="60,0,0,0" Width="20" Click="Button_Click"></Button>
        </Grid>
     

     

    Tuesday, March 10, 2009 1:38 PM
  • try giving some width for the Grid

    Tuesday, March 10, 2009 2:03 PM
  • Thank you.

    Issues:

    1. Header height is two lines:

                           x

    Header text 

    I need single line (or at most 10% greater) header height.

    2. There is empty space between close button and header border:

    -----------------|

                     |

             x      |

    how to remove this empty space so that close buttonwill appear in upper right corner:

    -----------------|

                  x |

     

    I set Margins to 0 in Tab add method using code below but this does not fix second issue.

    Andrus. 

    public static void AddTab(UserControl content)

    {

    TabItem tabItem = new TabItem();tabItem.Margin = new Thickness(0);

    tabItem.Content = content;

    TabItemHeaderUserControl header = new TabItemHeaderUserControl();

    header.Margin = new Thickness(0); 

    tabItem.Header = header;

    TabControl.Items.Add(tabItem);

    TabControl.SelectedItem = tabItem;

    content.Focus();

    }

     

     

    Tuesday, March 10, 2009 2:05 PM
  • I tried to specify column width. Now x and text are separated. 

    <UserControl x:Class="myapp.Controls.TabItemHeaderUserControl"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    >

    <Grid>

     

    <Grid.ColumnDefinitions>

    <ColumnDefinition Width ="*"/>

    <ColumnDefinition Width ="20"/>

    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>

    <RowDefinition Height="20" />

    </Grid.RowDefinitions>

    <TextBlock VerticalAlignment="Bottom"

    x:Name="textBlock" Grid.Column="0"></TextBlock>

    <Button Content="x" Grid.Column="1" Click="Button_Click"

    Margin="0,0"

    HorizontalAlignment="Right"

    VerticalAlignment="Top"

    >

    </Button>

    </Grid>

    </UserControl>

     How to move button to upper right cornder of tab ? should I try negative margins or is it possible to set tab header propererties so that empty space does not appear ?

     Another issue:

    There is also empty space in tab item content and settign margins to 0 does not remove this. How to remove those margins so that usercontrol placed to tabitem content uses whole TabItem rectangle area ?

    Andrus.

    Tuesday, March 10, 2009 2:20 PM
  • Also:

    How to make close button visible only in active tab like in Internet Explorer ?

    Tuesday, March 10, 2009 3:02 PM
  • Hi Andrus,

    How to move button to upper right cornder of tab ? should I try negative margins or is it possible to set tab header propererties so that empty space does not appear ?

     Another issue:

    There is also empty space in tab item content and settign margins to 0 does not remove this. How to remove those margins so that usercontrol placed to tabitem content uses whole TabItem rectangle area ?

    I have copied your code and test it on a bland new application. The UserControl itself is ok.  The space is made by TabItem. The better way is to modify its template and make their outlook looks like the same.

    How to make close button visible only in active tab like in Internet Explorer ?

    We need to manually find the button and show/hide it.

    Best regards,

    Jonathan

    Monday, March 16, 2009 3:17 AM