Develop Reference

Changing color of button when clicked in wpf

Searching through the site I found how to change a buttons color in WPF when button is pressed. What I am not sure about is how to make it to where it would change back when pressed again. this is the code I have:
<Button Margin="917,631,480.8,144.4" Background="Transparent" x:Name="blackCounter6" >
<Button.Resources>
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)" To="Black"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="50"/>
</Style>
</Button.Resources>
</Button>
Unpressed:
Pressed:
The first image shows the button before its pressed, the second after. Im trying to revert it back when pressed again. It is a control that sits behind the image, I used a button because I know how to make them round and fit right into place like it is. I also have C# script that can be used to achieve this. I assume I add some sort of function to revert it back to its original state maybe?

"it would change back when pressed again"?
I think you prefer a Checkbox instead of button.
you can add a trigger for Checkbox style as blow.
<Trigger Property="IsChecked" Value="True">
<Trigger Property="IsChecked" Value="False">
If you need Storyboard.Then the trigger IsChecked=False is unnecessary.
you can add <Trigger.ExitActions> after <Trigger.EnterActions>.
In addtion, <Trigger.ExitActions> and <Trigger.EnterActions> should be used as couple usually.
Code for CheckBox.
Especially,about the Template of Checkbox,you can access it from xaml view-> Document Outline->find Checkbox control->Right Click->Edit Template->Edit a copy->OK.you will get the full Template Code of CheckBox.
<ControlTemplate TargetType="{x:Type CheckBox}">
<Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
<Border x:Name="checkBoxBorder" CornerRadius="10" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid x:Name="markGrid">
<Ellipse x:Name="excontent" Margin="5" Panel.ZIndex="9" Fill="Blue" Stroke="{TemplateBinding Foreground}"/>
<Ellipse x:Name="content" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding Foreground}"/>
</Grid>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)" To="Black"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>

The simplest solution is to define a style and use the triggers that manage the various states.
<Button Margin="917,631,480.8,144.4" Background="Transparent" x:Name="blackCounter6" >
<Button.Resources>
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="Background" Value="{DynamicResource PrimaryApplicationColorBrush}"/> //Set your background
<Setter Property="Foreground" Value="{DynamicResource ApplicationForegroundColorBrush}"/> //Set your default foregraound color
<Setter Property="BorderBrush" Value="{StaticResource ButtonBorderBrush}"/> //Set your border brush color
<Setter Property="FontFamily" Value="{StaticResource FontNormal}"/> //Set your desired font
<Setter Property="FontSize" Value="{StaticResource FontSizeLarge}"/> //Set your font size
<Setter Property="Stylus.IsPressAndHoldEnabled" Value="False" />
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border CornerRadius="4"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<ContentPresenter RecognizesAccessKey="True"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{StaticResource ButtonPressedBackground}"/> //Set your background when the button is pressed
<Setter Property="BorderBrush" Value="{StaticResource ButtonPressedBorderBrush}" /> //Set your BorderBrush when the button is pressed
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="{StaticResource ButtonMouseOverBorderBrush}" /> /Set your BorderBrush when the mouse is over
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="{StaticResource ButtonBackgroundDisabled}"/> //Set your background when the button is disabled
<Setter Property="BorderBrush" Value="{StaticResource ButtonBorderBrushDisabled}" /> //Set your BorderBrush when the button is disabled
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Resources>

Transparent background and mouseEnter of a button - WPF

I have to create a button with an image and when I pass the cursor on it, the account icon has to change color, but I don't know how to do it, because for now when I pass on the button it changes the entire background.
Image without cursor
Image with cursor
There's my button's code:
<Style TargetType="{x:Type Button}" x:Key="TestAccountButton" BasedOn="{StaticResource Hoverless }" >
<Setter Property="WindowChrome.IsHitTestVisibleInChrome" Value="True"/>
<Setter Property="Padding" Value="10"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ButtonBase}">
<Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<!--MouseEnter-->
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="#3a3a3a" Duration="0:0:0.3" Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<!--MouseLeave-->
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="White" Duration="0:0:0.3" Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Hoverless button:
<Style TargetType="{x:Type Button}" x:Key="Hoverless">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Button Mouse-over to Change Images of buttons WPF

Apologies if i miss anything out I am new to this, also the state of my code(Jr Developer in the making). I am trying to create a style in the resource dictionary that will do the following:
Be able to apply to all buttons.
Change from a white icon png to blue icon png.
and have this done ideally in the resource dictionary but open to other ways.
Any help would be greatly appreciated :)
here is my app.xaml code;
<Style x:Key="SideMenuButton" TargetType="{x:Type Button}">
<Setter Property="Background" Value="{StaticResource bmBlue}" />
<Setter Property="BorderBrush" Value="White"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontFamily" Value="Cairo"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Padding" Value="5"/>
<Setter Property="Margin" Value="10 20 10 0" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="5" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Background="{TemplateBinding Background}" >
<StackPanel Orientation="Horizontal">
<Image x:Name="image1" Visibility="Visible" MaxHeight="25" HorizontalAlignment="Center" RenderOptions.BitmapScalingMode="HighQuality" Source="C:\Users\PaulR\source\repos\eSuiteVer10\eSuiteVer10\Icons\BackIconBWblue.png"/>
<ContentPresenter Grid.Column="1" x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Button.IsMouseOver" Value="true">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.3" Storyboard.TargetProperty="BorderBrush.Color" To="#005389" />
<ColorAnimation Duration="0:0:0.3" Storyboard.TargetProperty="Background.Color" To="#fff"/>
<ColorAnimation Duration="0:0:0.3" Storyboard.TargetProperty="Foreground.Color" To="#005389" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.3" Storyboard.TargetProperty="BorderBrush.Color" To="#fff" />
<ColorAnimation Duration="0:0:0.3" Storyboard.TargetProperty="Background.Color" To="#005389"/>
<ColorAnimation Duration="0:0:0.3" Storyboard.TargetProperty="Foreground.Color" To="#fff" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
Here is the button Xaml;
<Button Click="NewQuote_Click" Style="{StaticResource SideMenuButton}" >
<StackPanel Orientation="Horizontal">
<Image Grid.Column="0" MaxHeight="25" HorizontalAlignment="Center" RenderOptions.BitmapScalingMode="HighQuality" Source="C:\Users\PaulR\source\repos\eSuiteVer10\eSuiteVer10\Icons\NewIconBlueWhitewhite.png"/>
<TextBlock Text="New" Grid.Column="1" HorizontalAlignment="Center" />
</StackPanel>
</Button>

Try this:
<Style x:Key="TransparentStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border>
<Border.Style>
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource= "\Images\ButtonImages\Image.png" Stretch="Uniform"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<Grid Background="Transparent">
<ContentPresenter></ContentPresenter>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

WPF TabControl How to remove line when tabItem is selected

Designers hate developers that why they create so weard designs!))
So my task is to create xaml UI from psd file. I'm finishing it but I don't know how to remove line in selected tabItem. Lood at the pictures.
That's what I need to get.
That's what I got.
How can I remove this this line? Is It possible without hard-coding?
Here's code of my tab control.
<TabControl.Resources>
<Style TargetType="TabControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border
Name="Border"
Grid.Row="0"
BorderBrush="{StaticResource SolidBrush_Blue}"
BorderThickness="{TemplateBinding BorderThickness}"
KeyboardNavigation.TabNavigation="Local"
KeyboardNavigation.DirectionalNavigation="Contained"
KeyboardNavigation.TabIndex="2" >
<ContentPresenter
Name="PART_SelectedContentHost"
ContentSource="SelectedContent">
</ContentPresenter>
</Border>
<TabPanel
Name="HeaderPanel"
Grid.Row="1"
Panel.ZIndex="1"
HorizontalAlignment="Center"
IsItemsHost="True"
KeyboardNavigation.TabIndex="1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- SimpleStyles: TabItem -->
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid
x:Name="grid">
<Border
Name="Border"
Margin="5,0,5,0"
Padding="30 15 30 15"
CornerRadius="0 0 3 3"
BorderBrush="{StaticResource SolidBrush_Blue}"
BorderThickness="2 0 2 2" >
<ContentPresenter
x:Name="contentPresenter"
VerticalAlignment="Center"
ContentSource="Header"
TextBlock.Foreground="White"
TextBlock.FontFamily="{StaticResource FontFamilyRegular}"
RecognizesAccessKey="True">
</ContentPresenter>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border"
Property="Background"
Value="White" />
<Setter TargetName="contentPresenter"
Property="TextBlock.FontFamily"
Value="{StaticResource FontFamilyBold}"/>
<Setter TargetName="contentPresenter"
Property="TextBlock.Foreground"
Value="{StaticResource SolidBrush_Blue}"/>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource SolidBrush_Blue}" />
<Setter TargetName="contentPresenter"
Property="TextBlock.Background"
Value="White"/>
<Setter TargetName="contentPresenter"
Property="TextBlock.FontFamily"
Value="{StaticResource FontFamilyRegular}"/>
<Setter TargetName="contentPresenter"
Property="TextBlock.Foreground"
Value="White"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>

in TabItem Template for border Border set Margin="5,-1,5,0". The border will move up and hide a borderline of TabControl with default thickness of 1

ControlTemplate working correctly in Blend but not in actual application

I created a custom button, nothing too fancy, just an extension of the mahApps SquareButton with a little colored marker at the left side.
I designed it in Blend, and copied the code into my real application in Visual Studio. When starting in Blend it's working just fine, when starting in Visual Studio the marker is not visible and also the Text gets left aligned, the button is looking nearly like a normal SquareButton. What am I doing wrong?
The XAML I put copied from Blend:
<Style x:Key="MarkerButtonStyle" TargetType="{x:Type Button}">
<Setter Property="MinHeight" Value="25"/>
<Setter Property="FontFamily" Value="{DynamicResource DefaultFont}"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="Background" Value="{DynamicResource WhiteBrush}"/>
<Setter Property="BorderBrush" Value="{DynamicResource BlackBrush}"/>
<Setter Property="Foreground" Value="{DynamicResource TextBrush}"/>
<Setter Property="Padding" Value="5,6"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement">
<SplineDoubleKeyFrame KeyTime="0" Value="0.7"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PART_ContentPresenter">
<EasingDoubleKeyFrame KeyTime="0" Value="0.3"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="Valid"/>
<VisualState x:Name="InvalidFocused"/>
<VisualState x:Name="InvalidUnfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{x:Null}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<Rectangle Fill="#FFAA2222" HorizontalAlignment="Left" Width="15" Margin="{Binding BorderThickness, ElementName=Background}" StrokeThickness="0" IsHitTestVisible="False"/>
<Rectangle x:Name="DisabledVisualElement" Fill="{DynamicResource ControlsDisabledBrush}" IsHitTestVisible="False" Opacity="0"/>
<Custom:ContentControlEx x:Name="PART_ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{DynamicResource GrayBrush8}"/>
<Setter Property="Foreground" Value="{DynamicResource BlackBrush}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{DynamicResource BlackBrush}"/>
<Setter Property="Foreground" Value="{DynamicResource WhiteBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Just the custom part of the button:
<Rectangle Fill="#FFAA2222" HorizontalAlignment="Left" Width="15" Margin="{Binding BorderThickness, ElementName=Background}" StrokeThickness="0" IsHitTestVisible="False"/>
And the code i put around to get it into VS:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:view="clr-namespace:MyApplication.View">
<Style x:Key="MarkerButtonStyle" TargetType="{x:Type view:MarkerButton}">
...
</Style>
<Style TargetType="{x:Type view:MarkerButton}" BasedOn="{StaticResource MarkerButtonStyle}"/>
</ResourceDictionary>
Then I used the button like this:
<view:MarkerButton MarkerColor="{Binding Color}" Content="{Binding Name}" MarkerWidth="15" .... />
With Punker76's solution of extending the button I get this:
The positioning is broken, but the xaml seems to be right....
Fixed my old solution, the problem was my width: I declared it as uint instead of double. Still, the button appears different to the normal square style (different border, focus rect, text alignment) and I don't know why.

First you show us this
<Style x:Key="MarkerButtonStyle" TargetType="{x:Type Button}">
And then this
<Style x:Key="MarkerButtonStyle" TargetType="{x:Type view:MarkerButton}">
If the MarkerButton is a button, then this should work if you use the first style that targets to the Button
<Style TargetType="{x:Type view:MarkerButton}"
BasedOn="{StaticResource MarkerButtonStyle}">
<Setter Property="MarkerColor" Value="#FFAA2222" />
<Setter Property="MarkerWidth" Value="15" />
</Style>
<Button Content="Test" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" />
EDIT
You can also use attached properties and inherited style instead createing a new button class.
public static class ButtonsHelper
{
public static readonly DependencyProperty MarkerColorProperty
= DependencyProperty.RegisterAttached("MarkerColor", typeof(Brush), typeof(ButtonsHelper), new FrameworkPropertyMetadata(Brushes.Transparent));
public static void SetMarkerColor(DependencyObject obj, Brush value)
{
obj.SetValue(MarkerColorProperty, value);
}
public static Brush GetMarkerColor(DependencyObject obj)
{
return (Brush)obj.GetValue(MarkerColorProperty);
}
public static readonly DependencyProperty MarkerWidthProperty
= DependencyProperty.RegisterAttached("MarkerWidth", typeof(double), typeof(ButtonsHelper), new FrameworkPropertyMetadata(15d));
public static void SetMarkerWidth(DependencyObject obj, double value)
{
obj.SetValue(MarkerWidthProperty, value);
}
public static double GetMarkerWidth(DependencyObject obj)
{
return (double)obj.GetValue(MarkerWidthProperty);
}
}
usage
<Style x:Key="MarkerButtonStyle" BasedOn="{StaticResource SquareButtonStyle}" TargetType="{x:Type Button}">
<Setter Property="ButtonsHelper.MarkerColor" Value="#FFAA2222"/>
<Setter Property="ButtonsHelper.MarkerWidth" Value="15"/>
<Setter Property="Padding" Value="2"/>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Grid HorizontalAlignment="Stretch">
<Rectangle Width="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=(ButtonsHelper.MarkerWidth), Mode=OneWay}"
HorizontalAlignment="Left"
Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=(ButtonsHelper.MarkerColor), Mode=OneWay}"
IsHitTestVisible="False"
StrokeThickness="0" />
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="{Binding Mode=OneWay}" />
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<Style BasedOn="{StaticResource MarkerButtonStyle}" TargetType="{x:Type Button}" />
You can now change your color in XAML like this
<Button Content="Test" ButtonsHelper.MarkerColor="YellowGreen" />