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

How do I set an image margin above text

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.

Thanks,
Mike

5 Replies

NK Niranjan Kumar Gopalan Syncfusion Team January 23, 2020 06:15 AM

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. 

C#: 
<syncfusion:TabControlExt HorizontalAlignment="Left" Height="306" Margin="123,41,0,0" VerticalAlignment="Top" Width="577"> 
            <syncfusion:TabItemExt 
                Header="New TabItem1" IsNewTab="False" Height="40"  
                MinWidth="150" MinHeight="20" 
                Image="C:\Users\NiranjanKumarGopalan\Downloads\envelope.png" 
                ImageAlignment="AboveText"  
                ImageHeight="15" ImageWidth="15"  
                IconMargin="0 5 0 0"  
                /> 
        </syncfusion:TabControlExt> 

ScreenShot: 
 
Regards, 
Niranjan Kumar Gopalan 



MA Mike Allred January 23, 2020 09:31 AM

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.


NK Niranjan Kumar Gopalan Syncfusion Team January 28, 2020 07:03 AM

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. 


Regards, 
Niranjan Kumar 
 



HS Harsh Shah March 11, 2020 01:16 AM

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"/>
</syncfusion:TabControlExt

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

I Hope It helps you!!


NK Niranjan Kumar Gopalan Syncfusion Team April 2, 2020 04:23 AM

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. 
 
Regards, 
Niranjan Kumar 
 


Loader.
Live Chat Icon For mobile
Up arrow icon