The color of the active button is reset instead of remaining, why?

Question

I'm writing a style for buttons that will change color when hovering and clicking. Yes, when I click on the Foreground button, the color changes, but as soon as I move the cursor away from the button text, this active button returns to the same color (gray). How do I make the active button glow white and reset when another button is clicked? Is it worth using C# or Xaml code to implement the solution?

Here is an example of how it should look like

Here is an implementation attempt:

 <Button x:Name="razd_opt" Background="Transparent" BorderBrush="Transparent" Width="192" Height="31" VerticalAlignment="Top" HorizontalAlignment="Left" 
         Margin="26,22,0,0" Click="razd_opt_Click">
     
     <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="-62,0,0,0">
         <Image Source="{StaticResource Zap}" Width="18" Height="18" Margin="0,0,8,0"/>
         <TextBlock Text="Оптимизация" Foreground="#848386" FontFamily="{StaticResource Vela Sans M}" FontSize="16"/>
     </StackPanel>
     
 </Button>

<Button x:Name="crosshair" Background="Transparent" BorderBrush="Transparent" Width="192" Height="31" HorizontalAlignment="Left" VerticalAlignment="Top" 
        Margin="26,16,0,0">
    
    <StackPanel Orientation="Horizontal" Margin="-95,0,0,0">
        <Image Source="{StaticResource Crosshair}" Width="17" Height="17" Margin="0,0,8,0"/>
        <TextBlock Text="Прицел" Style="{StaticResource style_btn_panel}" FontFamily="{StaticResource Vela Sans M}" FontSize="16" Foreground="#848386"/>
    </StackPanel>
    
</Button>

<Style x:Key="style_btn_panel" TargetType="TextBlock" >
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation 
                    Storyboard.TargetProperty="Foreground.Color"
                    To="#F5F1FF" 
                    Duration="0:0:0.2" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>

            <Trigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation 
                    Storyboard.TargetProperty="Foreground.Color" 
                    To="#848386" 
                    Duration="0:0:0.2" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.ExitActions>
        </Trigger>
    </Style.Triggers>
</Style>

 private void razd_opt_Click(object sender, RoutedEventArgs e)
        {
           opt_txt.Foreground = Brushes.White;
        }

P.S. a window will be linked to each button, maybe this can be implemented by linking to each of the windows?

Basically, you don't have a button but a pushbutton then. IMHO, the button has no state based on which you could configure the style. — Thomas Weller
– Thomas Weller, Commented Apr 5 at 16:56
Have you considered a tab control rather than multiple windows? Users ten to lose windows. — Andy
– Andy, Commented Apr 6 at 7:45

EldHasp · Accepted Answer · 2025-04-06 11:23:08Z

I would recommend using a radio button instead of a standard button. You can customize the radio button style to match the look and feel you're aiming for. For your reference, I've created a sample radio button style. This style is defined in a Resource Dictionary. Please find the code below.

 <Style TargetType="RadioButton">
        <Setter Property="Foreground" Value="#848386"/>
        <Setter Property="Background" Value="#525254"/>
        <Setter Property="FontWeight" Value="DemiBold"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RadioButton">
                    <StackPanel x:Name="stk" Background="{TemplateBinding Background}" Orientation="Horizontal">
                        <Image Source="Add your source here!"/>
                        <TextBlock x:Name="txtContent" Margin="20 0 0 0" Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center"/>
                    </StackPanel>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Foreground" TargetName="txtContent" Value="White"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="Foreground" TargetName="txtContent" Value="White"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

You can add your image using the Image Source control. Additionally, you can customize the colors according to your requirements.

Happy coding !

foreground of selected button is shown in white color

As you set Foreground="{TemplateBinding Foreground}", it is not necessary to specify TargetName="txtContent" in Setter of Triggers.

Collectives™ on Stack Overflow

The color of the active button is reset instead of remaining, why?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related