Question

我有一个包含两个椭圆的按钮（外椭圆和内椭圆）椭圆）和这些椭圆的中心是我想要做的这个图像按钮像圆形按钮，我想在鼠标中更改图像在按钮和下面是我的xaml代码我是WPF和XAML中的新手我知道这不是完美的方式，但任何提示可以帮助我改善我的知识

  <Style x:Key ="roundButton" TargetType ="{x:Type Button}">
            <Setter Property ="Foreground" Value ="Black"/>
            <Setter Property ="FontWeight" Value ="Bold"/>

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Name="border" BorderThickness="0" Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" TargetName="border">
                                    <Setter.Value>
                                        <ImageBrush ImageSource="/Images/505050.png"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property ="Template">
                <Setter.Value>
                    <ControlTemplate TargetType ="{x:Type Button}">
                        <Grid>
                            <Ellipse Name ="OuterRing" Width ="30" Height ="30" Fill ="Black"/>
                            <Ellipse Name ="InnerRing" Width ="27" Height ="27" Fill ="WhiteSmoke"/>
                            <Image Name="im"/>
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property ="IsMouseOver" Value ="True">
                                <Setter TargetName ="OuterRing" Property ="Fill" Value ="black"/>
                                <Setter TargetName ="InnerRing" Property ="Fill" Value ="black"/>                                
                            </Trigger>
                            <Trigger Property ="IsPressed" Value ="True">
                                <Setter TargetName ="OuterRing" Property ="Height" Value ="33"/>
                                <Setter TargetName ="OuterRing" Property ="Width" Value ="33"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

当鼠标只有椭圆的颜色和大小时，它不起作用改变了，但是图像保持不变，即使它的工作也不是真的有用，因为我想在以前的许多按钮上使用这种风格代码我已经给它图像源，所以它没有帮助，下面是我的设计XAML代码

   <Grid Grid.Column="0">
                <Grid.RowDefinitions>
                <RowDefinition Height="60"/>
                <RowDefinition Height="4*"/>
            </Grid.RowDefinitions>

            <Grid Grid.Row="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <Border Grid.Row="0" Background="WhiteSmoke" Margin="10,10,10,0" CornerRadius="5">
                    <StackPanel Orientation="Horizontal">
                        <Button x:Name="btnDataBase" Margin="20,0,0,0" Style="{DynamicResource roundButton}">
                            <Image Source="/Images/5050.png" Width="20" Height="20"/>                              
                        </Button>
                    </StackPanel>
                </Border>
            </Grid>

正如我所说，我是XAML和WPF的新手，所有上述代码都来自很多在谷歌上搜索所以我不知道有什么更好的方法来做到这一点按钮，请帮帮我 this image for the rounded button when mouse is not over and this image for the rounded button when mouse is over

Answer 1

当IsMouseOver属性为true时，更改Image源的简单样式触发器应该有效。尝试这样的事情：

<Button Style="{DynamicResource roundButton}">
    <Image Style="{StaticResource btnImageStyle}" Width="20" Height="20"/>                              
</Button>

<Style TargetType="{x:Type Image}" x:Key="btnImageStyle">
    <Setter Property="Source" Value="Image1"/>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="true">
            <Setter Property="Source" Value="Image2"/>
        </Trigger>
    </Style.Triggers>
</Style>

如何在XAML中鼠标结束时更改Button的图像？

1 个答案: