We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How do I set an image margin above text

Thread ID:





150881 Jan 22,2020 10:57 PM UTC Apr 2,2020 09:23 AM UTC WPF 5
Tags: TabControlExt
Mike Allred
Asked On January 22, 2020 10:57 PM UTC

I am new to WPF and Syncfusion. I am using the TabControlExt component and putting images above the text. The UI requirement tells me I need more space above the image that is currently shown. I really don't want to start editing images just put blank space in there.

Here's my code:

            <!-- HeaderMargin="0,10,0,0" only pushes text down, not the image -->
            <syncfusion:TabItemExt Name="pgtPartMaster" Header="Part Master"
                                   Width="150" Height="70"
                                   Image="Images/partmaster.png" ImageAlignment="AboveText" ImageHeight="30" ImageWidth="30" >

I do not see a margin option for the image. Is there? Am I just missing it?

HeaderMargin only gives the text extra space below the image. Increasing the ImageHeight just makes the image taller.


Niranjan Kumar Gopalan [Syncfusion]
Replied On January 23, 2020 11:15 AM UTC

Hi Mike, 

Thanks for contacting Syncfusion support. 

We have checked your query “Need to know how to change the margin of image in TabItemExt header”. We can change the image margin in TabItemExt header by using the IconMargin property as show in the below screenshot. 

<syncfusion:TabControlExt HorizontalAlignment="Left" Height="306" Margin="123,41,0,0" VerticalAlignment="Top" Width="577"> 
                Header="New TabItem1" IsNewTab="False" Height="40"  
                MinWidth="150" MinHeight="20" 
                ImageHeight="15" ImageWidth="15"  
                IconMargin="0 5 0 0"  

Niranjan Kumar Gopalan 

Mike Allred
Replied On January 23, 2020 02:31 PM UTC

Awesome, thanks.

I'm curious about why the images don't show in Visual Studio in the Design window (like they do on buttons). When I run my app, then they show, but only when my app is running.

Niranjan Kumar Gopalan [Syncfusion]
Replied On January 28, 2020 12:03 PM UTC

Hi Mike, 

Thanks for your patience. 

We have checked your query “Image in tab item should be loaded in designer similar to Button” and logged it as defect. The fix will be included in Volume 1 release. Please refer the feedback link below. 

Niranjan Kumar 

Harsh Shah
Replied On March 11, 2020 06:16 AM UTC

Hii Mike,
You can set image above text like this,

Xaml Code :

<syncfusion:TabControlExt x:Name="tabcontrol"> 
<syncfusion:TabItemExt  Header="Tab 1" Image="{Binding DisplayedImage}"  ImageAlignment="AboveText" x:Name="tabitem1" />
<syncfusion:TabItemExt Header="Tab 2"/>

C# Code :
public ImageSource DisplayedImage 
     return new BitmapImage(new Uri("pack://application:,,,/TabControlExtSample1;component/Image1.png"));

I Hope It helps you!!

Niranjan Kumar Gopalan [Syncfusion]
Replied On April 2, 2020 09:23 AM UTC

Hi Mike, 
Thanks for your update. 
We are glad to announce that our Essential Studio Volume 1, 2020 release (v18-1-0-42) is rolled out and is available for download under the following link. 
We thank you for your support and appreciate your patience in waiting for this release. We will provide patch in this version including all fixes provided to you by end of this week. Please get in touch with us if you would require any further assistance. 
Niranjan Kumar 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon