I want to be able to set different images for the different tabItems for the IsSelected = true and IsSelected = false. I have this much so far:
<TabControl Margin="60,10,96,18" TabStripPlacement="Left">
<TabControl.Resources>
<DataTemplate x:Key="tabItemGeneralHeaderTemplate">
<StackPanel Orientation="Horizontal" Margin="0,-3,0,0" Height="51" Width="41">
<Image Name="tabGeneralImg" Source="C:\Users\myName\Documents\Visual Studio 2013\Projects\NetworkTools\NetworkTools\images\sidebar\homeUnselected.png" Width="41" Height="51"></Image>
</StackPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsSelected,RelativeSource={RelativeSource TemplatedParent}}" Value="True">
<Setter TargetName="tabGeneralImg" Property="Source" Value="C:\Users\myName\Documents\Visual Studio 2013\Projects\NetworkTools\NetworkTools\images\sidebar\homeSelected.png"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</TabControl.Resources>
<TabItem Name="tabItemGeneral" HeaderTemplate="{StaticResource tabItemGeneralHeaderTemplate}">
<Grid>
</Grid>
</TabItem>
<TabItem Name="tabItemGenera2" HeaderTemplate="{StaticResource tabItemGeneralHeaderTemplate}">
<Grid>
</Grid>
</TabItem>
</TabControl>
I was wondering if you'd have to create separate styles for each tabItem or is there a more efficient way of doing this?
A better way to do it would be a
UserControl
with two images. Bind the visibility of one image to be the inverse of the visibility of the other image, and bind the other visibility to a boolean on the control, maybe calledShowDisabled
. That way you simply have an instance of the 'TwinImage' with the correct normal and disabled images, and apply your style to flip theShowDisabled
and avoid the repetition.