How to display an Icon from XAML resource as a Header Image in TabItemExt ?

1 min read

We can set an Icon from XAML resource in TabItemExt header through Header Template. To achieve this, we can customize the header of each TabItemExt by its Header Template to bind the Icon in header of TabItemExt. The same has been demonstrated in the following code,

Resource file: (MetroIcon.xaml)

<ResourceDictionary.MergedDictionaries>
    <ResourceDictionary>
        <Viewbox x:Key="metro_archiveicon" x:Shared="false" 
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
                <Grid>
                    <Grid Width="256" Height="256" Visibility="Visible">
                     <Path Data="M50.5,4.7500001C25.232973,4.75 4.75,25.232973 4.7500001,50.5 4.75,75.767029 25.232973,96.25 50.5,96.25 75.767029,96.25 96.25,75.767029 96.25,50.5 96.25,25.232973 75.767029,4.75 50.5,4.7500001z M50.5,0C78.390381,0 101,22.609621 101,50.5 101,78.390381 78.390381,101 50.5,101 22.609621,101 0,78.390381 0,50.5 0,22.609621 22.609621,0 50.5,0z" 
                             Stretch="Fill" Fill="#FFB62D2D" Visibility="Visible" />
                    </Grid>
                    <Path Data="M11.099978,22.800002L11.099978,24.800002 19.199985,24.800002 19.199985,22.800002z M0,21.4L30.400001,21.4 30.400001,32.000001 0,32.000001z M11.000003,9.499997L11.000003,11.499998 19.099979,11.499998 19.099979,9.499997z M0,8.2000015L30.400001,8.2000015 30.400001,19.300002 27.699989,19.300002 26.799993,13.700002 7.5999773,19.200003 0,19.200003z M6.3999956,0L23.399999,0 29.099983,5.0000008 29.099983,6.0999993 1.2999883,6.0999993 1.1999822,5.0000008z" 
                          Stretch="Uniform" Fill="#FFEA0B0B" Width="138" Height="138"
                          Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
                        <Path.RenderTransform>
                            <TransformGroup>
                                <TransformGroup.Children>
                                    <RotateTransform Angle="1" />
                                    <ScaleTransform ScaleX="1" ScaleY="1" />
                                </TransformGroup.Children>
                            </TransformGroup>
                        </Path.RenderTransform>
                    </Path>
                </Grid>
       </Viewbox>
   </ResourceDictionary>
 </ResourceDictionary.MergedDictionaries>

App.xaml:

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="MetroIcon.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

MainPage.xaml:

<sync:TabControlExt ShowTabListContextMenu="False" CloseButtonType="Individual">
            <sync:TabItemExt>
                <sync:TabItemExt.HeaderTemplate>
                    <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                         <ContentControl Margin="5 0 0 0" Height="15" Width="15" 
                            Content="{StaticResource metro_archiveicon}"/>
                        <TextBlock Text="Item 1" Margin="5 0 0 0"/>
                    </StackPanel>
                    </DataTemplate>
                </sync:TabItemExt.HeaderTemplate>
            </sync:TabItemExt> 
</sync:TabControlExt>

Output:

$C:\Users\durga.rajan\Pictures\Saved Pictures\Capture_mrtro.PNG$

Did you find this information helpful?

Yes

Comments (0)

How to display an Icon from XAML resource as a Header Image in TabItemExt ?

Access denied