admin管理员组文章数量:1344583
I have 4 buttons that should change their color when hovering, (from gray to white) when clicking on one of them, the color should remain the same. If I write the logic using C#, then the following problem arises: when hovering over the button, the text color changes to white, but if the mouse leaves, it does not turn back to gray, but turns gray as soon as the mouse leaves the button text, this happens even at the active button.
If I try to register this transition in xaml practically without using C#, then the Background of the button becomes a white-transparent color.
This is how it should look like
<Button x:Name="razd_opt" Background="Transparent" BorderBrush="Transparent" Width="192" Height="31" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="26,22,0,0" FontFamily="{StaticResource Vela Sans M}" FontSize="16" Click="razd_opt_Click" MouseEnter="Button_MouseEnter_big" >
<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="Оптимизация" Style="{StaticResource style_btn_panel}" Foreground="#848386"/>
</StackPanel>
</Button>
<Button x:Name="crosshair" Background="Transparent" BorderBrush="Transparent" Width="192" Height="31" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="26,16,0,0" Click="crosshair_Click" MouseEnter="Button_MouseEnter_big" >
<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>
<Button x:Name="stats" Background="Transparent" BorderBrush="Transparent" Width="192" Height="31" HorizontalAlignment="Left" VerticalAlignment="Top" FontFamily="{StaticResource Vela Sans M}" FontSize="16" TextElement.Foreground="#848386" Margin="26,16,0,0" Click="stats_Click" MouseEnter="Button_MouseEnter_big" >
<StackPanel Orientation="Horizontal" Margin="-83,0,0,0">
<Image Source="{StaticResource Stats}" Width="17" Height="17" Margin="0,0,8,0"/> <TextBlock Text="Статистика" Style="{StaticResource style_btn_panel}"/> </StackPanel>
</Button>
<Button x:Name="setting" Background="Transparent" BorderBrush="Transparent" Width="192" Height="31" HorizontalAlignment="Left" VerticalAlignment="Top"
FontFamily="{StaticResource Vela Sans M}" FontSize="16" Foreground="#848386" Margin="26,16,0,0"
Click="setting_Click" MouseEnter="Button_MouseEnter_big" MouseLeave="Button_MouseLeave_big">
<StackPanel Orientation="Horizontal" Margin="-83,0,0,0">
<Image Source="{StaticResource Settings}" Width="17" Height="17" Margin="0,0,8,0"/>
<TextBlock Text="Настройки" Style="{StaticResource style_btn_panel}"/>
</StackPanel>
</Button>
<StackPanel Orientation="Horizontal" Margin="-83,0,0,0">
<Image Source="{StaticResource Settings}" Width="17" Height="17" Margin="0,0,8,0"/>
<TextBlock Text="Настройки" Style="{StaticResource style_btn_panel}"/>
</StackPanel>
</Button>
private void razd_opt_Click(object sender, RoutedEventArgs e)
{
ColorButton (sender, e);
}
private void crosshair_Click(object sender, RoutedEventArgs e)
{
ColorButton(sender, e);
}
private void stats_Click(object sender, RoutedEventArgs e)
{
ColorButton(sender, e);
}
private void setting_Click(object sender, RoutedEventArgs e)
{
ColorButton(sender, e);
}
private void ColorButton(object sender, RoutedEventArgs e)
{
// Сброс цвета для всех кнопок
ResetButtonColors();
// Установка новой активной кнопки
activeButton2 = sender as Button;
// Изменение цвета текста активной кнопки
var textBlock = (activeButton2.Content as StackPanel).Children[1] as TextBlock;
if (textBlock != null)
{
textBlock.Foreground = new SolidColorBrush(Colors.White); // Цвет для активной кнопки
}
}
private void ResetButtonColors()
{
foreach (var child in optButtonsPanel.Children)
{
if (child is Button button && button != activeButton2) // Проверяем, что это не активная кнопка
{
var textBlock = (button.Content as StackPanel).Children[1] as TextBlock;
if (textBlock != null)
{
textBlock.Foreground = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#848386")); // Цвет для неактивной кнопки
}
}
}
}
private void Button_MouseEnter_big(object sender, MouseEventArgs e)
{
var button = sender as Button;
if (button != activeButton2) // Изменяем цвет только если не активная кнопка
{
var textBlock = (button.Content as StackPanel).Children[1] as TextBlock;
if (textBlock != null)
{
textBlock.Foreground = new SolidColorBrush(Colors.White); // Цвет при наведении
}
}
}
private void Button_MouseLeave_big(object sender, MouseEventArgs e)
{
var button = sender as Button;
if (button != activeButton2) // Возвращаем цвет только если не активная кнопка
{
var textBlock = (button.Content as StackPanel).Children[1] as TextBlock;
if (textBlock != null)
{
textBlock.Foreground = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#848386")); // Цвет для неактивной кнопки
}
}
}
I have 4 buttons that should change their color when hovering, (from gray to white) when clicking on one of them, the color should remain the same. If I write the logic using C#, then the following problem arises: when hovering over the button, the text color changes to white, but if the mouse leaves, it does not turn back to gray, but turns gray as soon as the mouse leaves the button text, this happens even at the active button.
If I try to register this transition in xaml practically without using C#, then the Background of the button becomes a white-transparent color.
This is how it should look like
<Button x:Name="razd_opt" Background="Transparent" BorderBrush="Transparent" Width="192" Height="31" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="26,22,0,0" FontFamily="{StaticResource Vela Sans M}" FontSize="16" Click="razd_opt_Click" MouseEnter="Button_MouseEnter_big" >
<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="Оптимизация" Style="{StaticResource style_btn_panel}" Foreground="#848386"/>
</StackPanel>
</Button>
<Button x:Name="crosshair" Background="Transparent" BorderBrush="Transparent" Width="192" Height="31" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="26,16,0,0" Click="crosshair_Click" MouseEnter="Button_MouseEnter_big" >
<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>
<Button x:Name="stats" Background="Transparent" BorderBrush="Transparent" Width="192" Height="31" HorizontalAlignment="Left" VerticalAlignment="Top" FontFamily="{StaticResource Vela Sans M}" FontSize="16" TextElement.Foreground="#848386" Margin="26,16,0,0" Click="stats_Click" MouseEnter="Button_MouseEnter_big" >
<StackPanel Orientation="Horizontal" Margin="-83,0,0,0">
<Image Source="{StaticResource Stats}" Width="17" Height="17" Margin="0,0,8,0"/> <TextBlock Text="Статистика" Style="{StaticResource style_btn_panel}"/> </StackPanel>
</Button>
<Button x:Name="setting" Background="Transparent" BorderBrush="Transparent" Width="192" Height="31" HorizontalAlignment="Left" VerticalAlignment="Top"
FontFamily="{StaticResource Vela Sans M}" FontSize="16" Foreground="#848386" Margin="26,16,0,0"
Click="setting_Click" MouseEnter="Button_MouseEnter_big" MouseLeave="Button_MouseLeave_big">
<StackPanel Orientation="Horizontal" Margin="-83,0,0,0">
<Image Source="{StaticResource Settings}" Width="17" Height="17" Margin="0,0,8,0"/>
<TextBlock Text="Настройки" Style="{StaticResource style_btn_panel}"/>
</StackPanel>
</Button>
<StackPanel Orientation="Horizontal" Margin="-83,0,0,0">
<Image Source="{StaticResource Settings}" Width="17" Height="17" Margin="0,0,8,0"/>
<TextBlock Text="Настройки" Style="{StaticResource style_btn_panel}"/>
</StackPanel>
</Button>
private void razd_opt_Click(object sender, RoutedEventArgs e)
{
ColorButton (sender, e);
}
private void crosshair_Click(object sender, RoutedEventArgs e)
{
ColorButton(sender, e);
}
private void stats_Click(object sender, RoutedEventArgs e)
{
ColorButton(sender, e);
}
private void setting_Click(object sender, RoutedEventArgs e)
{
ColorButton(sender, e);
}
private void ColorButton(object sender, RoutedEventArgs e)
{
// Сброс цвета для всех кнопок
ResetButtonColors();
// Установка новой активной кнопки
activeButton2 = sender as Button;
// Изменение цвета текста активной кнопки
var textBlock = (activeButton2.Content as StackPanel).Children[1] as TextBlock;
if (textBlock != null)
{
textBlock.Foreground = new SolidColorBrush(Colors.White); // Цвет для активной кнопки
}
}
private void ResetButtonColors()
{
foreach (var child in optButtonsPanel.Children)
{
if (child is Button button && button != activeButton2) // Проверяем, что это не активная кнопка
{
var textBlock = (button.Content as StackPanel).Children[1] as TextBlock;
if (textBlock != null)
{
textBlock.Foreground = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#848386")); // Цвет для неактивной кнопки
}
}
}
}
private void Button_MouseEnter_big(object sender, MouseEventArgs e)
{
var button = sender as Button;
if (button != activeButton2) // Изменяем цвет только если не активная кнопка
{
var textBlock = (button.Content as StackPanel).Children[1] as TextBlock;
if (textBlock != null)
{
textBlock.Foreground = new SolidColorBrush(Colors.White); // Цвет при наведении
}
}
}
private void Button_MouseLeave_big(object sender, MouseEventArgs e)
{
var button = sender as Button;
if (button != activeButton2) // Возвращаем цвет только если не активная кнопка
{
var textBlock = (button.Content as StackPanel).Children[1] as TextBlock;
if (textBlock != null)
{
textBlock.Foreground = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#848386")); // Цвет для неактивной кнопки
}
}
}
- There is not "activeButton2" in your xaml you refer to in your C# code. Also I assume "optButtonsPanel" is a Grid around all your buttons? – Neralem Commented 3 hours ago
1 Answer
Reset to default 0You should use triggers in XAML to style the visual appearance of elements.
The best thing to do is to change the button template.
You can see my recommendations here:
https://www.cyberforum.ru/wpf-silverlight/thread2608868.html#post14386675
https://www.cyberforum.ru/wpf-silverlight/thread2903292.html
Specifically for your task, you can use StackPaneх style triggers, although, as I wrote above, I still recommend changing the button template.
<....Resources>
<Style TargetType="StackPanel"
x:Key="sp.style.mouseover">
<Style.Triggers >
<DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource FindAncestor, AncestorType=Button}}"
Value="True">
<Setter Property="TextElement.Foreground" Value="White"/>
</DataTrigger>
</Style.Triggers >
</Style>
</....Resources>
<Button x:Name="setting" Background="Transparent" BorderBrush="Transparent" Width="192" Height="31" HorizontalAlignment="Left" VerticalAlignment="Top"
FontFamily="{StaticResource Vela Sans M}" FontSize="16" Foreground="#848386" Margin="26,16,0,0"
Click="setting_Click" MouseEnter="Button_MouseEnter_big" MouseLeave="Button_MouseLeave_big">
<StackPanel Orientation="Horizontal" Margin="-83,0,0,0"
Style="{StaticResource sp.style.mouseover}">
<Image Source="{StaticResource Settings}" Width="17" Height="17" Margin="0,0,8,0"/>
<TextBlock Text="Настройки" Style="{StaticResource style_btn_panel}"/>
</StackPanel>
</Button>
P.S. I am writing here in the message editor. Therefore, there may be minor errors in the code.
P.S.S. Similar triggers can be applied not to the StackPanel itself, but to its child elements. Or, instead of visualization in the Context property, use a data template in ContentTemplate and triggers of this template.
本文标签： cThere is a problem with the hover effects of the buttonsStack Overflow
版权声明：本文标题：c# - There is a problem with the hover effects of the buttons - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743765231a2535113.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论