Button default style not applied if Triggers added - c#

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>

Related

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.

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>

Change button background color due to events and view model property

I have a button that can be at one of three modes:
Normal - No mouse hover and not selected
Hover - Mouse hover and not selected
Selected - A property at the view model (DataContext) called IsSelected equals true
This is my current code:
<Style x:Key="FlatButtonStyle" TargetType="Button">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Orange"/>
</Trigger>
<DataTrigger Binding="{Binding IsSelected}">
<Setter Property="Background" Value="Yellow"/>
</DataTrigger>
</Style.Triggers>
<Setter Property="Background" Value="Gray" />
<Setter Property="Foreground" Value="White"/>
<Setter Property="Width" Value="125"/>
<Setter Property="Height" Value="35"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border BorderThickness="0"
Background="{TemplateBinding Background}"
CornerRadius="12">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
However, only the Hover and normal states work.
I tried data triggers, visual state manager but I'm new to WPF and couldn't make it work.

Your IsSelected Trigger Value is missing. If you want to stick with a button use
<DataTrigger Binding="{Binding IsSelected}" Value="True">
<Setter Property="Background" Value="Yellow"/>
</DataTrigger>
I will recommend to use ToggleButton and Trigger on IsChecked Property
<ToggleButton IsChecked="{Binding IsSelected}" Style="{StaticResource FlatButtonStyle}"/>
<Style x:Key="FlatButtonStyle" TargetType="ToggleButton">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Orange"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="Yellow"/>
</Trigger>
</Style.Triggers>
<Setter Property="Background" Value="Gray" />
<Setter Property="Foreground" Value="White"/>
<Setter Property="Width" Value="125"/>
<Setter Property="Height" Value="35"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border BorderThickness="0"
Background="{TemplateBinding Background}"
CornerRadius="12">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Try useing Toggle Button instead of Button control. it has by default IsChecked state. Here is an exaple of how to use toggle button
http://miteshsureja.blogspot.ae/2011/12/wpf-toggle-button.html

WPF style button

I've tried to change style for mouseover event.
Here's my styles code:
<Window.Resources>
<Style x:Key="NavigationButton"
TargetType="{x:Type Button}">
<Setter Property="Background" Value="#295fa6"/>
<Setter Property="BorderBrush" Value="{x:Null}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"/>
<Setter Property="BorderBrush" Value="{x:Null}"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
and I used it in that way:
<Button x:Name="test"
Grid.Column="0""
Style="{StaticResource NavigationButton}">
<Image Source="Assets/imaaa.png" />
</Button>
and mouseover still has default color

you need to modify the ControlTemplate. To remove the default behaviour on the Button.
<Style x:Key="NavigationButton"
TargetType="{x:Type Button}">
<Setter Property="Background" Value="#295fa6"/>
<Setter Property="BorderBrush" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="#295fa6">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"/>
<Setter Property="BorderBrush" Value="{x:Null}"/>
</Trigger>
</Style.Triggers>
</Style>

Categories

Resources