Forums Ultimate UI for WPF
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Eric
550
Picture Tab
posted

I am trying to replace the tab headers with a picture and a name.  I can replace each header no problem.  The issue is I need to change the text color when the tab is selected.

Here is my header content so far:

            <igWindows:TabItemEx >
                <igWindows:TabItemEx.Header>
                    <StackPanel Height="70" Width="70">
                        <Image Source="..\images\transactions.png" Height="48" Width="48" />
                        <TextBlock Text="Transactions"   HorizontalAlignment="Center" />
                    </StackPanel>
                </igWindows:TabItemEx.Header>
            </igWindows:TabItemEx>

Is there a way to do this as a style or a template and set the triggers to change the text block's foregound color?

Parents
  • 69686
    posted

            <Style TargetType="{x:Type igWindows:TabItemEx}">

                <Setter Property="Template">

                    <Setter.Value>

                        <ControlTemplate TargetType="{x:Type igWindows:TabItemEx}">

                            <StackPanel Height="70" Width="70">

                                <Image Source="{Binding Path=SomePath}" Height="48" Width="48" />

                                <TextBlock Text="{TemplateBinding Header}" Name="header"  HorizontalAlignment="Center" />

                            </StackPanel>

                            <ControlTemplate.Triggers>

                                <Trigger Property="IsSelected" Value="True">

                                    <Setter Property="Foreground" TargetName="header" Value="Red"/>

                                </Trigger>

                            </ControlTemplate.Triggers>

                        </ControlTemplate>

                    </Setter.Value>

                </Setter>

            </Style>

    Here is what you can use. The image you have to bind to some other property - for example, you can use the Tag property to store the path to the image.

Reply Children
  • 54937
    Verified Answer
    Offline posted in reply to Eric

    You could use the same approach I recommend here for adding an image to a tab using the HeaderTemplate and just add in a datatrigger based on the IsSelected of the tab item. e.g.

        <igWindows:XamTabControl>
            <igWindows:XamTabControl.Resources>
                <DataTemplate x:Key="tabItemHeader">
                    <DockPanel>
                        <igWindows:AutoDisabledImage 
                            DockPanel.Dock="Left"
                            Source="{Binding Path=Tag, 
                                RelativeSource={RelativeSource 
                                    AncestorType={x:Type igWindows:TabItemEx}}}" 
                            Margin="0,0,3,0" />
                        <TextBlock x:Name="txt" Text="{Binding}" VerticalAlignment="Center" />
                    </DockPanel>
                    <DataTemplate.Triggers>
                        <DataTrigger 
                            Binding="{Binding Path=IsSelected, 
                                RelativeSource={RelativeSource 
                                AncestorType={x:Type igWindows:TabItemEx}}}"
                            Value="True">
                            <Setter TargetName="txt" Property="Foreground" Value="Red" />
                        </DataTrigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </igWindows:XamTabControl.Resources>
            
            <igWindows:TabItemEx Header="Home" HeaderTemplate="{StaticResource tabItemHeader}">
                <igWindows:TabItemEx.Tag>
                    <BitmapImage UriSource="/Images/about_16.bmp" />
                </igWindows:TabItemEx.Tag>
            </igWindows:TabItemEx>
            <igWindows:TabItemEx Header="Other" HeaderTemplate="{StaticResource tabItemHeader}">
                <igWindows:TabItemEx.Tag>
                    <BitmapImage UriSource="/Images/about_16.bmp" />
                </igWindows:TabItemEx.Tag>
            </igWindows:TabItemEx>
        </igWindows:XamTabControl>