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>
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?
CodePudding user response：
"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>
CodePudding user response：
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>
CodePudding user response：
Go to your button clicked event and try the following code..
void blackCounter6_Clicked(object sender, EventArgs args)
{
if (blackCounter6.BackColor == Color.Red)
{
blackCounter6.BackColor = Color.Blue;
}
else
{
blackCounter6.BackColor = Color.Red;
}
}