Develop Reference

How access embedded control in style from style trigger

I want to create style that can change embedded in him controls, like here I want to change "Source" of "ImageIco" but I get errors. Is it possible to make it inside style? Because all examples what I see use additional code or writing additional code in window itself.
Problematic part:
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="IcoImage" Property="Source" Value="{DynamicResource InfoIco.Red}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter TargetName="IcoImage" Property="Source" Value="{DynamicResource InfoIco.White}"/>
</Trigger>
</Style.Triggers>
All style code:
<Style BasedOn="{StaticResource {x:Type Button}}"
TargetType="{x:Type Button}"
x:Key="RedsInfoButton">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="{TemplateBinding Background}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}">
<Image Name="IcoImage"
Source="{DynamicResource InfoIco.White}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
</Style.Setters>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="IcoImage" Property="Source" Value="{DynamicResource InfoIco.Red}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter TargetName="IcoImage" Property="Source" Value="{DynamicResource InfoIco.White}"/>
</Trigger>
</Style.Triggers>
</Style>
<BitmapImage x:Key="InfoIco.White" UriSource="/WPFDesign/Data/Images/InfoWhite.ico"/>
<BitmapImage x:Key="InfoIco.Red" UriSource="/WPFDesign/Data/Images/InfoRed.ico"/>

WPF Overridden TabItem style can't click anything

I'm relatively new to WPF and XAML, and I'm trying to override the style of the TabItems in my TabControl. At the top of my xaml file I have this:
<Window.Resources>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border Name="Border" Margin="0,5,0,0" Background="Transparent"
BorderBrush="LightGray" BorderThickness="1,1,1,1">
<ContentPresenter x:Name="ContentSite" VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header" Margin="12,2,12,2"
RecognizesAccessKey="True">
</ContentPresenter>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="100"/>
<Setter TargetName="Border" Property="Background" Value="#EEE9ED"/>
<Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,1"/>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="IsEnabled" Value="False"/>
<Setter TargetName="Border" Property="Background" Value="LightGray"/>
<Setter TargetName="Border" Property="BorderBrush" Value="Black"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FontSize" Value="15"/>
<Setter Property="FontWeight" Value="Bold"/>
</Style>
</Window.Resources>
It applies the style to all TabItems, and that works. It all looks how I want it to. The problem is that now I can't click on any of them. It doesn't look like any of the style guides online have encountered this problem, so it's probably just something really stupid that I'm doing, but I really can't figure it out.

The problem is <Setter Property="IsEnabled" Value="False"/>. A TabItem with IsEnabled set to False cannot be selected. Since all non-selected TabItems are disabled by your Style, this prevents any of them from being selected.

Button default style not applied if Triggers added

I defined a default style for all my application Buttons in App.xaml :
<Style TargetType="{x:Type Button}">
<Setter Property="FontSize" Value="14"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border
x:Name="Border"
CornerRadius="2"
BorderThickness="1"
Background="{StaticResource WindowBorderColor}"
BorderBrush="{StaticResource WindowBorderColor}">
<ContentPresenter Margin="2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="{StaticResource InactiveBackgroundColor}"/>
<Setter Property="Foreground" Value="{StaticResource InactiveForegroundColor}"/>
<Setter Property="Opacity" Value="0.5"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource HeaderButtonOverColor}"/>
<Setter Property="Foreground" Value="{StaticResource HeaderForeHighlightColor}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{StaticResource HeaderButtonPressedColor}"/>
<Setter Property="Foreground" Value="{StaticResource WindowForeColor}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But when I want to add a Trigger to my Button, the default style is not taken in account anymore :
<Button Content="{x:Static p:Resources.Delete}" Click="DeleteMacro_Click" Margin="3" >
<Button.Style>
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<DataTrigger Binding="{Binding MacroLeft.Name, Mode=OneWay}" Value="">
<Setter Property="Button.IsEnabled" Value="False" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
I found that link, so I added TargetType="{x:Type Button}" in my WPF, but nothing changed.
Why is the default style not taken in account, and how can I solve that, without creating another specific style in my app.xaml?

You can make the styles defined in app.xaml as base in the following way
<Button.Style>
<Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
</Style>
</Button.Style>

How to make visible only button image?

I have "Save" button which has two states: invisible (when no changes) and visible: when some text changed.
So, I create XAML:
<Button x:Name="btnSaveText"
Grid.Column="0"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Margin="0,0,1,0" Width="22" Height="22" Padding="0"
BorderBrush="#EFF4FA"
Background="#EFF4FA" IsEnabled="False"
Style="{StaticResource stlButton}">
<Image Source="/UI.Resources;component/PNGImages/Save.png"
Style="{StaticResource stlButtonImage}" />
</Button>
<Style TargetType="{x:Type Image}" x:Key="stlButtonImage">
<Setter Property="Margin" Value="1" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Stretch" Value="None" />
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5" />
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type Button}" x:Key="stlButton">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5" />
<Setter Property="BorderBrush" Value="#EFF4FA"/>
<Setter Property="Background" Value="#EFF4FA"/>
</Trigger>
</Style.Triggers>
</Style>
But, when the button is disabled it looks like this:
How to make visible only button image?

Set the Buttons Background to Transparent :
<Setter Property="Background" Value="Transparent"/>
Full sample:
<Style TargetType="{x:Type Button}" x:Key="stlButton">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5" />
<Setter Property="BorderBrush" Value="#EFF4FA"/>
<Setter Property="Background" Value="Transparent"/>
</Trigger>
</Style.Triggers>
</Style>
If you also want to get rid of the Border you could link it to the Background that will make it invisible, too:
<Style TargetType="{x:Type Button}" x:Key="stlButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5" />
<Setter Property="Background" Value="Transparent"/>
</Trigger>
</Style.Triggers>
</Style>

How to get rid of the default blue color on hover over a button?

I've declared a style as follows.
<Style x:Key="RightButtonStyle"
TargetType="Button">
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Background"
Value="BlueViolet"></Setter>
</Trigger>
<Trigger Property="IsMouseOver"
Value="False">
<Setter Property="Background"
Value="Yellow" />
</Trigger>
</Style.Triggers>
</Style>
My button using the style does obey only the yellow part. For some reason it still gets bluish (default hover-over color) and not blue-violetish on hover. What am I missing? There are no other setters or styles that I'm aware of.

It's still using the default button template. You need to override it.
<Style Key="RightButtonStyle" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="BlueViolet"></Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Background" Value="Yellow" />
</Trigger>
</Style.Triggers>
</Style>