Answer the question
In order to leave comments, you need to log in
How to change the background of the button on Click with the implemented new template?
Hello comrades.
I ran into a problem that I can not solve for a long time and I can not find detailed information on this issue.
I have xaml with one button implemented. The button has a LinearGradienBrush
gradient background .
Trigger on the IsPressed event in which it changes its background to a RadialGradientBrush while it is pressed.
Trigger on the MouseEnter event , which implements a looped animation to change the background gradient for one second when the mouse pointer is over the button.
Trigger on the MouseLeave event
, which implements a return to the initial values of the linear gradient within one second when leaving the mouse button area.
The button has a Click="AesButton_Click" method .
The task is to change the base colors of the gradients when the button is clicked. By clicking a second time, the colors should return to those that were when the program was launched.
I was able to partially solve this problem with button.Template.FindName, but the color only remains while the pointer is in the button area.
I think I need to achieve changing the default Color x:Key values in .xaml via a method in .cs, but I could be wrong as I have only two weeks experience in C#.
Thank you.
<Window x:Class="SxApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:SxApp"
mc:Ignorable="d"
Title="Aesthetic" Height="450" Width="450">
<Window.Background>
<ImageBrush
ImageSource="/SxApp;component/images/bck.jpg" Stretch="UniformToFill"/>
</Window.Background>
<Window.Resources>
<Color x:Key="vapor_1">#db2525</Color>
<Color x:Key="vapor_2">#a944ff</Color>
<Color x:Key="vaporBorder">#8c5791</Color>
<Color x:Key="vaporLime">#32CD32</Color>
<ControlTemplate x:Key="ButtonTemplate"
TargetType="Button">
<Border x:Name="Border"
CornerRadius="2000"
TextBlock.Foreground="pink"
TextBlock.FontSize="23"
TextBlock.FontStyle="Italic"
TextBlock.FontWeight="Bold"
Margin="10"
>
<Border.Background >
<LinearGradientBrush>
<GradientStopCollection>
<GradientStop Offset="0" Color="{StaticResource vapor_1}"/>
<GradientStop Offset="1" Color="{StaticResource vapor_2}"/>
</GradientStopCollection>
</LinearGradientBrush>
</Border.Background>
<ContentPresenter
RecognizesAccessKey="True"
VerticalAlignment="Center"
HorizontalAlignment="Center"
/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="Border" Property="Background">
<Setter.Value>
<RadialGradientBrush>
<GradientStop Color="{StaticResource vaporBorder}" Offset="1" />
<GradientStop Color="{StaticResource vaporLime}" Offset="0.2" />
</RadialGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border"
Storyboard.TargetProperty=
"Background.GradientStops[0].Color"
To="{StaticResource vapor_2}" Duration="0:0:1"
AutoReverse="True"
RepeatBehavior="Forever">
</ColorAnimation>
<ColorAnimation Storyboard.TargetName="Border"
Storyboard.TargetProperty=
"Background.GradientStops[1].Color"
To="{StaticResource vapor_1}" Duration="0:0:1"
AutoReverse="True"
RepeatBehavior="Forever">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border"
Storyboard.TargetProperty=
"Background.GradientStops[0].Color"
To="{StaticResource vapor_1}" Duration="0:0:1">
</ColorAnimation>
<ColorAnimation Storyboard.TargetName="Border"
Storyboard.TargetProperty=
"Background.GradientStops[1].Color"
To="{StaticResource vapor_2}" Duration="0:0:1">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
<Grid>
<Button
Name="aesButton"
Click="AesButton_Click"
Content="Aesthetic"
Width="200"
Height="200"
Template="{StaticResource ButtonTemplate}"/>
</Grid>
</Window>
using System;
using System.Windows;
namespace SxApp
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void AesButton_Click(object sender, RoutedEventArgs e)
{
}
}
}
Answer the question
In order to leave comments, you need to log in
To have button.Background = Brushes.Red; worked in the ControlTemplate for the Border, instead of a fixed color/gradient, use a binding to the button background:
But at the same time, the IsPressed trigger will still have a fixed color, so that it can also be changed, you need to find or create (attached) DependencyProperty for the button where this color is can be bound.
Also, TemplateBinding does not work in triggers, you should use the following binding instead:
{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PressedBackground}
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question