S
S
Space Purr2019-02-06 23:13:30
WPF
Space Purr, 2019-02-06 23:13:30

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

1 answer(s)
R
Roman, 2019-02-07
@SpacePurr

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 question

Ask a Question

731 491 924 answers to any question