I want to show Image inside of the Title of header in TabControl
This question(WPF TabItem - Image Binding) seems is right, but I have using Triggers and it doesn't help on my code.
Here is what I have Providing:
<TabControl Name="MainTabControl" Margin="0,28,0,0" TabStripPlacement="Top" >
<TabControl.Resources>
<Image x:Key="imgProfile" Source="/Icons/red icons/profile.png" />
<Image x:Key="imgComment" Source="Icons/red icons/notification.png" />
<Style TargetType="TabItem" >
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<WrapPanel>
<TextBlock Text="{Binding}"
MouseDown="UIElement_OnMouseDown"
FontSize="18"
/>
<Image Height="25" Margin="4,0,4,0"
Source="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Tag.Source}" />
</WrapPanel>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Border Name="Border" BorderThickness="1,1,1,0" BorderBrush="Gainsboro" CornerRadius="0" Margin="2,0">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="5,2"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border" Property="BorderBrush" Value="Transparent" />
<Setter TargetName="Border" Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{DynamicResource TabItemNormal}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabItem Name="tiProfile" Header="a" Tag="{StaticResource imgProfile}"></TabItem>
<TabItem Name="tiComment" Header="b" Tag="{StaticResource imgComment}"></TabItem>
</TabControl>
the binding from TabItem.HeaderTemplate to the TabItem.Tag must be via FindAncestor of TabItem type.
instead create Images in Resources, create BitmapImage, and bind it the Image.Source.
so, Resources:
<BitmapImage x:Key="imgProfile" Source="/Icons/red icons/profile.png" />
<BitmapImage x:Key="imgComment" Source="Icons/red icons/notification.png" />
Header DataTemplate:
<Image Height="25" Margin="4,0,4,0"
Source="{Binding Tag, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabItem}}}" />
Related
I am trying to build a text filter for a list in a popup, and notify the user when the filter is active by changing the color of the button that opens the popup.
I am using an MVVM lite setup and a XAML style sheet to reference the desired styles. Up until this point I have created the popup and the controlling button, and I have been able to put a mouse over trigger on the button and have it work. However when I tried to have a datatrigger set to the value of the textbox in the popup, it does not respond at all.
Here is the XAML code in the View for the button and the popup:
<StackPanel Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Center" >
<TextBlock HorizontalAlignment="Center" Text="Filter Popup" />
<Button x:Name="PopUpControl" Tag="popup" Style="{StaticResource FilterButtonStyle}" Command="{Binding OpenPopupCommand}" IsEnabled="{Binding IsFilterEnabled, UpdateSourceTrigger=PropertyChanged}" Margin="2,1,2,1" VerticalAlignment="Top"/>
</StackPanel>
<Popup x:Name="textPopup" IsOpen="{Binding IsFilterPopupOpen, Mode=TwoWay}" PlacementTarget="{Binding ElementName=PopUpControl}" Placement="Bottom" Width="Auto" StaysOpen="False" Margin="2 2 2 2">
<TextBox x:Name="TextValue" Grid.Column="0" BorderThickness="1" Style="{StaticResource WatermarkedTextBox}" Margin="2,4" VerticalAlignment="Center" Tag="Text Filter" Text="{Binding FilterSearch, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}"
<Button Grid.Column="4" Style="{StaticResource SearchIconStyle}" IsEnabled="{Binding FilterEnabled, Mode=TwoWay}" Command="{Binding ApplyFilterCommand}" Margin="19,6" Grid.ColumnSpan="2" />
</Grid>
</Popup>
Here is the style for the button:
<Style x:Key="SortButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Width" Value="15"/>
<Setter Property="Height" Value="15"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="Margin" Value="4,0,4,0" />
<Setter Property="Tag" Value="Default" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
Padding="4,2"
CornerRadius="3"
Background="{DynamicResource PaleBlue}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
<Border.OpacityMask>
<VisualBrush Visual="{StaticResource appbar_filter}" />
</Border.OpacityMask>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="Background" Value="{DynamicResource ColumnHeaderFilterColor}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
What I would like to happen, is when the element "TextValue" has a value in the Text field, the primary background color for the "border" changes color. Any help would be greatly appreciated.
You could use a DataTrigger that binds to the FilterSearch source property and sets a property if returns an empty string or null:
<ControlTemplate TargetType="Button">
<Border Name="border"
Padding="4,2"
CornerRadius="3"
Background="Green">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
<Border.OpacityMask>
<VisualBrush Visual="{StaticResource appbar_filter}" />
</Border.OpacityMask>
</Border>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding FilterSearch}" Value="">
<Setter TargetName="border" Property="Background" Value="{DynamicResource PaleBlue}" />
</DataTrigger>
<DataTrigger Binding="{Binding FilterSearch}" Value="{x:null}">
<Setter TargetName="border" Property="Background" Value="{DynamicResource PaleBlue}" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
I am trying to set up a sort of menu using ListBox and buttons as ListBoxItems to trigger a command when selection changes, but the result is that some times the selected ListBoxItem is changed but the command is not triggered, other times the opposite. The XAML is the following:
<Window.Resources>
<DataTemplate DataType="{x:Type viewModels:TripViewModel}">
<views:TripView />
</DataTemplate>
<DataTemplate DataType="{x:Type viewModels:AddTripViewModel}">
<views:AddTripView />
</DataTemplate>
<Style TargetType="{x:Type Button}">
<Setter Property="Height"
Value="50" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border>
<Grid Background="Transparent">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Padding"
Value="3" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border BorderBrush="Transparent"
BorderThickness="0"
Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Background"
Value="DarkCyan" />
</Trigger>
<Trigger Property="IsSelected"
Value="True">
<Setter Property="Background"
Value="DarkCyan" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Window.Content>
<DockPanel Margin="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Height="Auto"
Width="Auto"
LastChildFill="True">
<!-- Left Panel -->
<Border BorderBrush="Black"
BorderThickness="0,0,1,0">
<StackPanel DockPanel.Dock="Left"
Margin="0"
Background="#555D6F">
<!-- First Row: Stacco Image -->
<Image Height="183"
Width="275"
Margin="3"
Source="/Media/stacco.png" />
<!-- Second Row: Buttons -->
<ScrollViewer CanContentScroll="True"
VerticalAlignment="Stretch"
VerticalScrollBarVisibility="Auto"
Margin="0,10,0,0">
<ListBox Name="MenuButtons"
ItemsSource="{Binding PageViewModels}"
Background="#555D6F"
IsSynchronizedWithCurrentItem="True">
<ListBox.ItemTemplate>
<ItemContainerTemplate>
<Button Content="{Binding Name}"
Command="{Binding DataContext.ChangePageCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
Margin="0" />
</ItemContainerTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</StackPanel>
</Border>
<!-- Control Area: Different View made by controls -->
<ContentControl DockPanel.Dock="Right"
Content="{Binding CurrentPageViewModel}" />
</DockPanel>
</Window.Content>
Am I doing right trying to insert a button in the ItemContainerTemplate? Would it be better to use the code behind to trigger the selection changed?
I am using an existed MVVM project and I did fine until now. I have a treeView code and I want
to release the node when it pressed. in other words, today if I click on any node, Its not selectable anymore (until you click another node). I want to be able to click thesame node as many times as I want. If I double click node , I have "IsExpended" property and it goes to this code section. I cant see where is the doubleclick bind, single click binding...
Here's the xaml
<UserControl x:Class="Envitech.Setup.Presentation.Views.TreeViewViews.StationTree" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:behaviour="clr-namespace:Envitech.Setup.Presentation.Extensions;assembly=Envitech.Setup.Presentation" xmlns:nodes="clr-namespace:Envitech.Setup.Presentation.ViewModels.TreeViewViewModels.Nodes" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="226" d:DesignWidth="227" xmlns:ml="clr-namespace:Envitech.Setup.Presentation.ml_resources">
<TreeView Margin="10 0 10 20" ItemsSource="{Binding Path=Root.Children}" VirtualizingStackPanel.IsVirtualizing="True" VirtualizingStackPanel.VirtualizationMode="Recycling">
<TreeView.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=TwoWay}"/>
<Setter Property="IsExpanded" Value="{Binding Path=IsExpanded, Mode=TwoWay}" />
</Style>
</TreeView.ItemContainerStyle>
<TreeView.Resources>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="HorizontalContentAlignment" Value="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
<Setter Property="VerticalContentAlignment" Value="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
<Setter Property="Padding" Value="1,0,0,0" />
<Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
<Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
<Setter Property="behaviour:TreeViewItemBehavior.IsBroughtIntoViewWhenSelected" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeViewItem}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="19" Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<ToggleButton x:Name="Expander" IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press" />
<Border Grid.Column="1" x:Name="Selection_Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" x:Name="PART_Header" ContentSource="Header" />
</Border>
<ItemsPresenter Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" x:Name="ItemsHost" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="false">
<Setter Property="Visibility" Value="Collapsed" TargetName="ItemsHost" />
</Trigger>
<Trigger Property="HasItems" Value="false">
<Setter Property="Visibility" Value="Hidden" TargetName="Expander" />
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" TargetName="Selection_Border" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true" />
<Condition Property="IsSelectionActive" Value="false" />
</MultiTrigger.Conditions>
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" TargetName="Selection_Border" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Style for the ToggleButton control used to expand/collapse a TreeViewItem control -->
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Focusable" Value="False" />
<Setter Property="Width" Value="19" />
<Setter Property="Height" Value="13" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Width="19" Height="13" Background="#00FFFFFF" x:Name="Border">
<Border Width="9" Height="9" x:Name="Border1" SnapsToDevicePixels="True" BorderBrush="#FF9495A2" BorderThickness="1,1,1,1" CornerRadius="1,1,1,1">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="#FFFFFFFF" Offset="0.4" />
<GradientStop Color="#FFC6CEDA" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<Path Fill="#FF000000" Margin="1,1,1,1" x:Name="ExpandPath" Data="M0,2L0,3 2,3 2,5 3,5 3,3 5,3 5,2 3,2 3,0 2,0 2,2z" />
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Data" Value="M0,2L0,3 5,3 5,2z" TargetName="ExpandPath" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate DataType="{x:Type nodes:MonitorNode}">
<StackPanel Orientation="Horizontal" Margin="0 2 0 0">
<Image Source="{Binding ImageSource}" Width="16" Height="16" Margin="0 0 3 0" />
<TextBlock Text="{x:Static ml:MultiLang._157}" x:Name="ML_0048" />
<TextBlock Text="{Binding ID}" />
<TextBlock Text="{x:Static ml:MultiLang._158}" x:Name="ML_0050" />
<TextBlock Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
<HierarchicalDataTemplate DataType="{x:Type nodes:StationNode}" ItemsSource="{Binding Children}">
<StackPanel Orientation="Horizontal" Margin="0 2 0 0">
<StackPanel.ContextMenu>
<ContextMenu HasDropShadow="True">
<MenuItem Header="{x:Static ml:MultiLang._160}" Command="{Binding CopyMonitorsCommand}" x:Name="ML_0055" />
<MenuItem Header="{x:Static ml:MultiLang._159}" Command="{Binding PasteMonitorsCommand}" x:Name="ML_0056" />
<MenuItem Header="{x:Static ml:MultiLang._162}" Command="{Binding CopyStationsCommand}" x:Name="ML_0057" />
<MenuItem Header="{x:Static ml:MultiLang._161}" Command="{Binding PasteStationsCommand}" x:Name="ML_0058" />
</ContextMenu>
</StackPanel.ContextMenu>
<Image Source="{Binding ImageSource}" Width="16" Height="16" Margin="0 0 3 0" />
<TextBlock Text="{x:Static ml:MultiLang._157}" x:Name="ML_0060" />
<TextBlock Text="{Binding ID}" />
<TextBlock Text="{x:Static ml:MultiLang._158}" x:Name="ML_0062" />
<TextBlock Text="{Binding Name}" />
</StackPanel>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type nodes:FilteringNode}" ItemsSource="{Binding Children}">
<StackPanel Orientation="Horizontal" Margin="0 2 0 0">
<Image Source="{Binding ImageSource}" Width="16" Height="16" Margin="0 0 3 0" />
<TextBlock Text="{Binding Name}" />
</StackPanel>
</HierarchicalDataTemplate>
</TreeView.Resources>
</TreeView>
</UserControl>
Thank you
When you double click a tree view item, it will be expanded. When it is expanded, your IsExpanded property will be changed due to your binding. Single clicking something that is NOT currently selected will change your IsSelected property. However, clicking it again (not double clicking) will NOT change the IsSelected property. Seems like what you want to do is to also add a 'Click' event handler. This way, each time it is clicked, you will be notified, not just when it is clicked for the first time when something else was selected.
To Accomplish this, add an for the 'MouseDoubleClick' event to your TreeViewItem style. If you want a single click, just do the same for the 'MouseDown' event:
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=TwoWay}"/>
<Setter Property="IsExpanded" Value="{Binding Path=IsExpanded, Mode=TwoWay}" />
<EventSetter Event="MouseDoubleClick" Handler="DoubleClickedItem"/>
</Style>
Once your XAML has the code above in it, right click your mouse on the word 'DoubleClickedItem' and select the 'NavigateToHandler' option and Visual Studio will generate a method stub for you in your code behind. You can then implement your double click behavior there.
This answer explains how to use the Interactivity extensions to remain fully MVVM.
WPF RightClick MouseBinding on release?
I've not been able to use the MouseLeftButtonDown event but MouseLeftButtonUp worked in my case (notification of a click on an already selected TreeViewItem).
I'm guessing that MouseLeftButtonDown is handled earlier in the event tree, so we never get to see it.
I have a TabControl containing TabItems. I overwrote their ItemTemplate to contain:
A TextBlock showing the caption of the TabItem
A Button (X) which closes the tab
Now I would like to make the "X"-Button only visible, when the TabItem is either selected or the mouse is over it.
This is my XAML code so far...
<TabControl x:Name="tabControl"
ItemsSource="{Binding OpenedItems}">
<TabControl.ItemTemplate>
<DataTemplate>
<Grid Name="grid" VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding TabCaption}"
Grid.Column="0"
Foreground="White"
HorizontalAlignment="Left"
Margin="3"
Name="label_TabTitle"
VerticalAlignment="Center" />
<Button Content="X"
Grid.Column="1"
Foreground="White"
HorizontalAlignment="Right"
Margin="3"
Name="button_close"
VerticalAlignment="Center"
Width="20"
Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
Visibility="Hidden"
Click="button_close_Click_1">
</Button>
</Grid>
<DataTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True" >
<Setter TargetName="button_close" Property="Visibility" Value="Visible"/>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ItemContainerStyle>
<Style TargetType="TabItem">
<Setter Property="Background" Value="#1C1C1C" />
<Setter Property="Content" Value="{Binding TabContentView}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid Name="Grid"
Background="{StaticResource GrayBrush}">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
RecognizesAccessKey="True">
</ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Grid" Property="Background" Value="{StaticResource BlueBrush}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Grid" Property="Background" Value="{StaticResource LightBlueBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.ItemContainerStyle>
</TabControl>
With the Trigger inside the DataTemplate it kind of works.. but: you have to hover the mouse directly over the Label in order to show the button. So basically, it is impossible to click the button, because it disappears again.
I would appreciate any help with these WPF Templates!
Thanks, Christian
It looks as though your TabItem does not have the background set so it is not catching the MouseOverEvent. Since the TextBlock has the foreground set and has text, it captures the MouseOverEvent. Try setting the Background child grid of the DataTemplate to Transparent and you should see that the MouseOverEvent will be caught and show the close button.
<TabControl x:Name="tabControl" ItemsSource="{Binding OpenedItems}">
<TabControl.ItemTemplate>
<DataTemplate>
<Grid Name="grid" VerticalAlignment="Center" Background="Transparent">
...
</Grid>
...
</DataTemplate>
</TabControl.ItemTemplate>
...
</TabControl>
If you set opacity instead of visibility it works. Removed all references to Visibility, changed to Opacity:
You may want to check my code edit. Not 100% sure it's a duplicate of what you had, but the idea works. Why? Not sure. :) I'm guessing the Hidden-Button was swallowing the MouseEnter events, but refusing to pass them on because it was hidden.
<TabControl x:Name="tabControl"
ItemsSource="{Binding OpenedItems}">
<TabControl.ItemTemplate>
<DataTemplate>
<Grid Name="grid" VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding TabCaption}"
Grid.Column="0"
Foreground="White"
HorizontalAlignment="Left"
Margin="3"
Name="label_TabTitle"
VerticalAlignment="Center" />
<Button Content="X"
Grid.Column="1"
Foreground="White"
HorizontalAlignment="Right"
Margin="3"
Name="button_close"
VerticalAlignment="Center"
Width="20"
Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
Opacity="0"
Click="button_close_Click_1">
</Button>
</Grid>
<DataTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True" >
<Setter TargetName="button_close" Property="Opacity" Value="1"/>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ItemContainerStyle>
<Style TargetType="TabItem">
<Setter Property="Background" Value="#1C1C1C" />
<Setter Property="Content" Value="{Binding TabContentView}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid Name="Grid"
Background="{StaticResource GrayBrush}">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
RecognizesAccessKey="True">
</ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Grid" Property="Background" Value="{StaticResource BlueBrush}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Grid" Property="Background" Value="{StaticResource LightBlueBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.ItemContainerStyle>
</TabControl>
I have bumped into a problem to which I am seeking the solution.
I have a tabControl with styles added to it.
I want to display only images on each TabItem.Header and when that tab is selected then hide the image from header and display text (the other, inactive headers will be showing images).
Can anybody provide any help?
<Window.Resources>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid Name="Borderer" Background="#FF777777" Height="70" Width="90">
<ContentPresenter x:Name="ContentTabItem" ContentSource="Header" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="#FF000000" />
<Setter TargetName="Borderer" Property="Background" Value="WhiteSmoke" />
<Setter Property="Header" >
<Setter.Value>
<Grid>
<ContentPresenter ContentSource="Tag" />
</Grid>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<TabControl Height="189" HorizontalAlignment="Left" Margin="94,123,0,0" Name="tabControl1" VerticalAlignment="Top" Width="500">
<TabItem Name="tabItem1" IsSelected="True" >
<TabItem.Tag>
<TextBlock Text="blab lab la" />
</TabItem.Tag>
<TabItem.Header>
<Image Source="images/img1.png" Width="35" Height="35" />
</TabItem.Header>
<TabItem.Content>
<Grid>
<TextBlock Name="aaa" />
</Grid>
</TabItem.Content>
</TabItem>
<TabItem >
<TabItem.Tag>
<TextBlock Text="la lab blab" />
</TabItem.Tag>
<TabItem.Header>
<Image Source="images/img2.png" Width="35" Height="35" />
</TabItem.Header>
<TabItem.Content>
<Grid>
<TextBlock Name="bbb" />
</Grid>
</TabItem.Content>
</TabItem>
</TabControl>
</Grid>
You can actually do this without replacing the whole ControlTemplate on the TabItem. You can just alter the TabItem's HeaderTemplate when the TabItem is selected, making your Style a lot shorter:
<DataTemplate x:Key="SelectedHeaderTemplate" >
<ContentControl Content="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=TabItem},
Path=Tag}" />
</DataTemplate>
<Style TargetType="{x:Type TabItem}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="HeaderTemplate" Value="{StaticResource SelectedHeaderTemplate}" />
</Trigger>
</Style.Triggers>
</Style>