I have two png images, triple-checked to make sure they are properly transparent. Here is the button style code:
<Window.Resources>
<Style x:Key="TrackingButton" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
<Style.Triggers>
<!--Default Base-->
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Content">
<Setter.Value>
<Image Source="Resources/Start_Base.png"/>
</Setter.Value>
</Setter>
</Trigger>
<!--Hover-->
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Content">
<Setter.Value>
<Image Source="Resources/Start_Hover.png"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
<!--Default Style-->
<Style.Setters>
<Setter Property="Background">
<Setter.Value>
<SolidColorBrush Color="Transparent"/>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush">
<Setter.Value>
<SolidColorBrush Color="Transparent"/>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
</Window.Resources>
Here is the default state of the button: DefaultState
But when hovered over, the button loses its transparency and a white border appears around the areas that are supposed to be transparent: HoveredOver
I'm not sure what's going on here..
If you want to get rid of the chrome, you could define your own custom ControlTemplate:
<Style x:Key="TrackingButton" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Image x:Name="img" Source="Resources/Start_Base.png"/>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="img" Property="Source" Value="Resources/Start_Hover.png" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Related
My ListView should have following style:
no border around the whole ListView (achieved)
no highlighting when interacting with ListViewItem (achieved)
border around selected ListViewItem (missing)
My ListView:
<ListView DisplayMemberPath="Name" BorderThickness="0" >
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<!-- get rid of the highlighting -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
<!-- style selected item -->
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontSize" Value="20" />
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
</ListView>
I tried this and this, both doesn't work for me. I guess my problem is the template but I have no idea how to put a border around the selected ListViewItem.
Update
Working solution:
<ListView DisplayMemberPath="Name" BorderThickness="0" >
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<!-- get rid of the highlighting -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border x:Name="Border">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontSize" Value="20" />
<Setter Property="FontWeight" Value="Bold" />
<Setter TargetName="Border" Property="BorderBrush" Value="Black"/>
<Setter TargetName="Border" Property="BorderThickness" Value="2"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
Maybe this works. Add a Border around ContentPresenter an use controlTemplate Triggers
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border x:Name="Border">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontSize" Value="20" />
<Setter Property="FontWeight" Value="Bold" />
<Setter TargetName="Border" Property="BorderBrush" Value="Red"/>
<Setter TargetName="Border" Property="BorderThickness" Value="1"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
We use a custom image for buttons in our project. We apply this via a style but now have a need to 'disable' the buttons and are trying to swap out the image for a new one.
The first Trigger works 100% as expected. When the button's IsEnabled == True, the button is 'green'. When the button's IsEnabled == False, the Green is removed and the Foreground color changes BUT the Grey image will not load up.
Am I missing something???
<Style TargetType="{x:Type Button}" x:Key="GreenGreyButton">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="..\Images\UI\Buttons\green.png"/>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#FFA30046"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="..\Images\UI\Buttons\grey.png"/>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="Gray"/>
</Trigger>
</Style.Triggers>
</Style>
It's a pity that when the IsEnabled is false, the native style will override all settings (with the default gray background). You can however re-template the button like this:
<Style TargetType="{x:Type Button}" x:Key="GreenGreyButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}">
<ContentPresenter Content="{TemplateBinding Content}"
Margin="{TempateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="..\Images\UI\Buttons\green.png"/>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#FFA30046"/>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="..\Images\UI\Buttons\grey.png"/>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="Gray"/>
</Trigger>
</Style.Triggers>
</Style>
Add the image as content to the button & use DatatTrigger instead, like this:
<Button...
>
<StackPanel>
<Image>
<Image.Style>
<Style TargetType="Image">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsEnabled, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" Value="True">
<Setter Property="Source" Value="..\Images\UI\Buttons\green.png"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsEnabled, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" Value="False">
<Setter Property="Source" Value="..\Images\UI\Buttons\grey.png"/>
<Setter Property="Foreground" Value="Gray"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</StackPanel>
</Button>
You need to set default values for your properties
<Style TargetType="{x:Type Button}" x:Key="GreenGreyButton">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="..\Images\UI\Buttons\green.png"/>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#FFA30046"/>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="..\Images\UI\Buttons\grey.png"/>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="Gray"/>
</Trigger>
</Style.Triggers>
I have got this problem with styles in WPF.
I want every cells in row in red color.
When I use two styles for one cell MyCellStyle and RightCellStyle (based on MyCellStyle) the result is:
image
Here is may code for MyCellStyle and RightCellStyle
<Style x:Key="MyCellStyle" TargetType="DataGridCell">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridCell">
<Border Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{StaticResource SelectedRowColor}" />
<Setter Property="BorderBrush" Value="#FFDFE9F5" />
<Setter Property="BorderThickness" Value="1" />
</Trigger>
</Style.Triggers>
<Style x:Key="RightCellStyle" TargetType="DataGridCell" BasedOn="{StaticResource MyCellStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridCell">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Right" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
And here is part where I set red Color
<DataGrid.Style>
<Style TargetType="DataGrid" BasedOn="{StaticResource {x:Type DataGrid}}">
<Setter Property="CellStyle">
<Setter.Value>
<Style TargetType="DataGridCell" BasedOn="{StaticResource MyCellStyle}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsNew}" Value="True">
<Setter Property="Foreground" Value="Red" />
</DataTrigger>
</Style.Triggers>
</Style>
</Setter.Value>
</Setter>
</Style>
Here is my XAML:
<Style x:Key="ExpanderStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="IsEnabled" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Image Source="/Images/SHCalendarLeftArrow.tiff" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So what I want is so that if the item is expanded, then display a different image.
Nevermind. I used a trigger
<Trigger Property="ToggleButton.IsChecked" Value="False">
<Setter x:Name="Expander_Expanded"
TargetName="Expander_Normal" Property="Source"
Value="/Images/SHCalendarLeftArrow.tiff" />
</Trigger>
Here is my XAML:
<Style x:Key="ExpanderStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="IsEnabled" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Image Source="/Images/SHCalendarLeftArrow.tiff" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So how can I add a Trigger to that OnMouseOver the image in the ControlTemplate changes to a different image.
Try using a Trigger inside your template:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Image x:Name="PART_img" Source="/Images/SHCalendarLeftArrow.tiff" />
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="PART_img"
Property="Source"
Value="/Images/SomeOtherImage.tiff" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>