question

Hans-7463 avatar image
0 Votes"
Hans-7463 asked TimonYang-MSFT answered

How to draw a TabControl's tab exactly the same way winforms does?

Hi,

My form contains a tab control and I want to be able to adjust the colors and the font color of the tabs. This must depend on certain conditions. As a first step, I want to make with owner draw tabs exactly the same as if Drawmode = normal is set. I can't find anywhere how to do this. As soon as you get started with Drawmode = OwnerdrawFixed, the tabs get ugly.

This I have found so far:

 TabControlCharts.DrawItem += new DrawItemEventHandler(tabControl1_DrawItem_1);
        
     private void tabControl1_DrawItem_1(object sender, DrawItemEventArgs e)
     {
         var tabControl = sender as TabControl;
         var tabPage = tabControl.TabPages[e.Index];
        
         var format = new StringFormat
         {
             FormatFlags = StringFormatFlags.NoWrap,
             Trimming = StringTrimming.None
         };
        
         // DrawString
         //using (var brush = new SolidBrush(Color.Black))
         //    e.Graphics.DrawString(tabPage.Text, e.Font, brush, tabControl.GetTabRect(e.Index), format);
        
         // DrawText
         var flags = TextFormatFlags.HorizontalCenter | TextFormatFlags.VerticalCenter | TextFormatFlags.SingleLine;
         TextRenderer.DrawText(e.Graphics, tabPage.Text, e.Font, e.Bounds, Color.Black, flags); 
     }

Unfortunately, the result does not resemble Drawmode = OwnerdrawFixed.

Greetings










dotnet-csharpwindows-forms
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Except for the MouseOver, the TabControl is the same for me, OwnerDrawFixed or not (Windows 10, .NET .4.7.2)

0 Votes 0 ·

1 Answer

TimonYang-MSFT avatar image
0 Votes"
TimonYang-MSFT answered

TabControl in winform provides few modifiable items, and as you can see, modifying the text color in this way does not look pretty.

A possible alternative is to create a UserControl (WPF) and place a TabControl control, customizing its properties will be much more flexible.

 <UserControl x:Class="WindowsFormsApp1.MyTabControl"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
              xmlns:local="clr-namespace:WindowsFormsApp1"
              mc:Ignorable="d" 
              d:DesignHeight="100" d:DesignWidth="200">
     <UserControl.Resources>
         <Style x:Key="TabItemText" TargetType="{x:Type TextBlock}">
             <Style.Triggers>
                 <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="True">
                     <Setter Property="Foreground" Value="Black"/>
                 </DataTrigger>
                 <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="False">
                     <Setter Property="Foreground" Value="LightBlue"/>
                 </DataTrigger>
             </Style.Triggers>
         </Style>
     </UserControl.Resources>
     <Grid>
         <TabControl x:Name="tabControl" Background="LightBlue" HorizontalAlignment="Left" Height="100" Margin="2,3,0,0" VerticalAlignment="Top" Width="200">
             <TabItem  Background="LightBlue" >
                 <TabItem.Header>
                     <StackPanel Orientation="Vertical">
                         <TextBlock Text="Text" Margin="0,0,0,0" VerticalAlignment="Center" Foreground="Red" />
                     </StackPanel>
                 </TabItem.Header>
             </TabItem>
             <TabItem  Background="LightBlue" >
                 <TabItem.Header>
                     <StackPanel Orientation="Vertical">
                         <TextBlock Text="Text" Margin="0,0,0,0" VerticalAlignment="Center" Foreground="Blue" />
                     </StackPanel>
                 </TabItem.Header>
             </TabItem>
         </TabControl>
    
     </Grid>
 </UserControl>

Build the project, and then it will appear in the ToolBox.

72635-capture.png


If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


capture.png (15.7 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.