Question

我有一个具有以下样式的切换按钮，如下所示。事情就是当我点击按钮时图像变好了。只有当我将鼠标悬停在它上面时才会改变图像。请帮助我做错了什么。我也从代码behing中尝试过MouseEnter，但它仍然有效。

 <ToggleButton Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left"  Panel.ZIndex="140" Height="41" Width="35" FontSize="9" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
                            <ToggleButton.Style>
                                <Style TargetType="{x:Type ToggleButton}">
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate>
                                                <Border BorderThickness="0">
                                                    <Image Source="/AltusClient;component/Images/EasyLocate_open.png" Height="41" Width="35"></Image>
                                                </Border>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                    <Style.Triggers>
                                        <Trigger Property="ToggleButton.IsMouseOver" Value="True">
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate>
                                                        <Border BorderThickness="0">
                                                            <Image Source="/AltusClient;component/Images/EasyLocate_hover.png" Height="41" Width="35"></Image>
                                                        </Border>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Trigger>
                                        <Trigger Property="IsChecked" Value="True">
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate>
                                                        <Border BorderThickness="0">
                                                            <Image Source="/AltusClient;component/Images/EasyLocate_open.png" Height="41" Width="35"></Image>
                                                        </Border>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Trigger>

                                        <Trigger Property="IsChecked" Value="False">
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate>
                                                        <Border BorderThickness="0">
                                                            <Image Source="/AltusClient;component/Images/EasyLocate_closed.png" Height="41" Width="35"></Image>
                                                        </Border>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Trigger>
                                    </Style.Triggers>
                                </Style>
                            </ToggleButton.Style>
                            <!--<ToggleButton.Template>
                                <ControlTemplate TargetType="{x:Type ToggleButton}">
                                    <ControlTemplate.Triggers>

                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter Property="Content">
                                                <Setter.Value>
                                                    <Border BorderThickness="0">
                                                        <Image Source="/AltusClient;component/Images/EasyLocate_hover.png" Height="41" Width="35"></Image>
                                                    </Border>
                                                </Setter.Value>
                                            </Setter>
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </ToggleButton.Template>-->
                        </ToggleButton>

Answer 1

IsMouseOver效果非常好，您的Source Uri必定存在其他问题。

这也很好：<EventTrigger RoutedEvent="ToggleButton.MouseEnter">。

编辑＃1

阅读完评论后，我仔细研究了一下，发现了问题。 IsChecked属性优先，因此覆盖了IsMouseOver所做的任何更改。

您必须提供MultiTrigger来处理以下4个条件：

1. IsChecked : True, IsMouseOver : True

2. IsChecked : True, IsMouseOver : False

3. IsChecked : False, IsMouseOver : True

4. IsChecked : False, IsMouseOver : False

EG;

<MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition Property="IsChecked" Value="False"/>
        <Condition Property="IsMouseOver" Value="True"/>
    </MultiTrigger.Conditions>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Border BorderThickness="0">
                    <Image Source="C:\Users\Public\Pictures\Sample Pictures\koala.jpg" Height="41" Width="35"></Image>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</MultiTrigger>

删除您在<Style.Triggers>之外提供的模板。现在，所有内容都将保留在Style.Triggers和MultiTrigger内。

我检查了一切，它运作正常。

触发属性IsMouseOver不在ToggleButton上工作

1 个答案: