Question

我正在研究应用程序，其中一项要求是更改鼠标悬停时按钮的图像。

下面是我的按钮代码，

 <Grid Margin="0 20 0 0" Name="ButtonsGrid" Width="300">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
              <Button x:Name="AnswerButton" Style="{StaticResource hover2}"  Grid.Column="0" VerticalAlignment="Center" HorizontalContentAlignment="Center" Width="60" Height="60" Background="Transparent" IsEnabled="False" Click="AnswerButton_OnClick" BorderBrush="Transparent" BorderThickness="0" >
                <Image Source="/Training.Project.Demo;component/Images/Answer.PNG"  Stretch="UniformToFill"/>
            </Button>

下面是我正在应用的样式，

<Style x:Key="hover2" TargetType="Button">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center">
                        <ContentPresenter.Content>
                            <Border Name="border" 
                                      BorderThickness="0"                         
                                      BorderBrush="Transparent"                          
                                      Background="{TemplateBinding Background}">
                                <Image x:Name="ButtonImage1" Source="/Training.Project.Demo;component/Images/Answer.PNG" Height="17" Width="17" />
                            </Border>
                        </ContentPresenter.Content>
                    </ContentPresenter>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="border" Property="BorderBrush" Value="Black" />
                            <Setter TargetName="ButtonImage1" Property="Source" Value="/Training.Project.Demo;component/Images/answer-hover.PNG" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

我不确定我在做什么错，但是以上代码无法正常工作。

任何帮助将不胜感激

Answer 1

删除IsEnabled="True"，并在Border本身而不是ControlTemplate中定义ContentPresenter元素：

<Style x:Key="hover2" TargetType="Button">
    <Setter Property="OverridesDefaultStyle" Value="True"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Name="border" 
                        BorderThickness="0"                         
                        BorderBrush="Transparent"                          
                        Background="{TemplateBinding Background}">
                    <Image x:Name="ButtonImage1" Source="/Training.Project.Demo;component/Images/Answer.PNG" Height="17" Width="17" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="border" Property="BorderBrush" Value="Black" />
                        <Setter TargetName="border" Property="BorderThickness" Value="1" />
                        <Setter TargetName="ButtonImage1" Property="Source" Value="/Training.Project.Demo;component/Images/answer-hover.PNG" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

XAML：

<Button x:Name="AnswerButton" Style="{StaticResource hover2}"  Grid.Column="0" VerticalAlignment="Center" HorizontalContentAlignment="Center" Width="60" Height="60" Background="Transparent" Click="AnswerButton_OnClick" BorderBrush="Transparent" BorderThickness="0" >
    <Image Source="/Training.Project.Demo;component/Images/Answer.PNG"  Stretch="UniformToFill"/>
</Button>

如果要使用ContentPresenter，则应在触发器中替换其Content：

<ControlTemplate TargetType="Button">
    <Border Name="border" 
            BorderThickness="0"                         
            BorderBrush="Transparent"                          
            Background="{TemplateBinding Background}">
        <ContentPresenter x:Name="cp" />
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter TargetName="border" Property="BorderBrush" Value="Black" />
            <Setter TargetName="border" Property="BorderThickness" Value="1" />
            <Setter TargetName="cp" Property="Content">
                <Setter.Value>
                    <Image Source="/Training.Project.Demo;component/Images/answer-hover.PNG"  Stretch="UniformToFill"/>
                </Setter.Value>
            </Setter>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

如果禁用IsMouseOver，则true属性永远不会设置为Button。

更改MouseOver XAML（WPF）上按钮上的图像

1 个答案: