How do I set an image margin above text

[Mike Allred]

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

[Unknown]

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 

[Mike Allred]

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.

[Unknown]

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. 

Link: https://www.syncfusion.com/feedback/11583/tabitem-image-does-not-load-in-designer-in-tabcontrolext  

Regards, 

Niranjan Kumar 

 

[Harsh Shah]

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

[Unknown]

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. 

 

https://www.syncfusion.com/forums/152921/essential-studio-2020-volume-1-release-v18-1-0-42-is-available-for-download 

 

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