1. Home
  2. Forum
  3. WPF
  4. How do I set an image margin above text

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
UN Unknown Syncfusion Team 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. 

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 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.

UN Unknown Syncfusion Team 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. 


Regards, 
Niranjan Kumar 
 


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

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

I Hope It helps you!!

UN Unknown Syncfusion Team 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. 
 
Regards, 
Niranjan Kumar 
 


Loader.
Up arrow icon