wpf xaml按钮与图片，改变颜色鼠标如何响应触发器？
wpf xaml按钮与图片，改变颜色鼠标如何响应触发器？
提问于 2021-05-05 14:08:46
在wpf，xaml中，我一直试图弄清楚如何在鼠标结束时提高图像和按钮的高度。我遇到了一些麻烦
它是一个导航栏的组合，有文字和图像。
它应该是这样的。
黑暗背景，当鼠标结束时会改变颜色。我正在使用devexpress，一个已经尝试了不同的方法使它工作..。
( a)网格解决了一个网格，之后有一个图像和一个简单的文本按钮。尺寸固定..。
- ，但当鼠标结束时，该按钮会改变颜色，而不是图像.
- (如果我(或用户)单击该图像，则不会在视图模型上调用任何命令。
)
<Grid.Resources>
<Style x:Key="navigationButtons" TargetType="StackPanel">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#000000"/>
</Trigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<Image Source="..png" OpacityMask="White" Width="24" Height="24" Margin="32 20 16 20"/>
<dx:SimpleButton />
</StackPanel>
( b)由图像和文本组成的堆叠板。
堆栈面板可能会被鼠标切换触发，而用户clicking.
- but则需要设置按钮的样式，以避免显示对鼠标过关的任何影响，因为面板应该被样式化以处理
。
( c)带有按钮的堆栈面板，其中包含图像和文本。
- 按钮看起来不太好，因为图像和文本很难放在严格的位置上。
<dx:SimpleButton Grid.Row="7" Width="328" Height="64">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="72"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="../Properties/Images/Home.png" OpacityMask="White"/>
<Label Grid.Column="1" Content="{x:Static res:Resource.Home}" />
</Grid>
</dx:SimpleButton>
这也不能解决我的问题..。有人有线索吗？-让我朝正确的方向走。我一直在研究风格，认为它们有一个解决方案。
谢谢一群古鲁的。
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-05-05 14:22:15
使用以下代码
<dx:SimpleButton Grid.Row="7" Width="328" Height="64">
<StackPanel Grid.Row="0" Orientation="Horizontal">
<Image Source="../Properties/Images/Home.png" OpacityMask="White" Width="24" Height="24"/>
<Label Content="{x:Static res:Resource.Home}" />
</StackPanel>
</dx:SimpleButton>如果无法从上述代码中获得所需的结果，请使用以下代码。Containers没有mouseover触发器，您应该使用eventtrigger。
<dx:SimpleButton Grid.Row="7" Width="328" Height="64">
<Grid>
<Grid.Style>
<Style TargetType="Grid">
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.200" From="Transparent" Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)" FillBehavior="HoldEnd" To="#FF11FF22" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.200" From="#FF11FF22" Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)" FillBehavior="HoldEnd" To="Transparent" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<Image Source="../Properties/Images/Home.png" OpacityMask="White" Width="24" Height="24"/>
<Label Content="{x:Static res:Resource.Home}" />
</StackPanel>
</Grid>
</dx:SimpleButton>Stack Overflow用户
发布于 2021-05-05 14:28:56
看起来你的问题是当你被鼠标悬停时，它的默认颜色使它无法读懂。你可以做这样的事
<Button Content="Button">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Black"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>您必须设置适合您的设计的Setter属性背景和前景色。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67402977
复制相关文章
相似问题
腾讯云开发者
