当鼠标悬停在按钮上时，带箭头的样式，wpf

Question

我在WPF中有这样的Image和Button：

<Image HorizontalAlignment="Left" Height="31.627" VerticalAlignment="Top" Width="32" Margin="21,80.373,0,0" Source="Images\computer.png"/>
<Button FontWeight="Bold" FontSize="12" Content=swethapilli" Height="31.627" VerticalAlignment="Top" Margin="57,80.373,95.296,0"/>

现在看来是这样的：

现在我的要求是将鼠标悬停在Image或Button上。当箭头图像与下图相同时，文本（swethapilli）应向右移动并突出显示。

如何获得这种风格可以帮助我找到解决方案。谢谢。

Answer 1

我认为最简单的方法是创建一个可以在鼠标结束时用作按钮背景的图像，如下所示：

    <Style x:Key="SwitchButtonStyle" TargetType="Button">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background">
                    <Setter.Value>
                        <ImageBrush ImageSource="yourimagepath.ending"></ImageBrush>
                    </Setter.Value>
                </Setter>
                <Setter Property="HorizontalContentAlignment" Value="Right"/>
            </Trigger>
         </Style.Triggers>
     </Style>

编辑：一种更灵活的内容定位方式如下：

将TextBlock作为按钮内容：

            <Button.Content>
                <TextBlock Text="YourTextOrBinding" Style="{DynamicResource ResourceKey=TextBlockOnButtonStyle}"></TextBlock>
            </Button.Content>

TextBlockOnButtonStyle：

    <Style x:Key="TextBlockOnButtonStyle" TargetType="TextBlock">
        <Style.Triggers>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type Button}}, Path=IsMouseOver}" Value="True">
                <Setter Property="Margin" Value="10,0,0,0"></Setter>
            </DataTrigger>
        </Style.Triggers>
    </Style>

setter值中的10是当鼠标悬停在按钮上时文本向右移动的像素数。

编辑2：如果你想使用矩形而不是整个图像作为按钮背景，你可以这样做：

        <DockPanel Width="100" Height="30">
            <Rectangle Visibility="{Binding ElementName=btnMain, Path=IsMouseOver, Converter={StaticResource ResourceKey=BoolToVis}}" Width="25">
                <Rectangle.Fill>
                    <whateveryouwanttousetofilltheimage>
                </Rectangle.Fill>
            </Rectangle>
            <Button Name="btnMain" Content="YourContentOrBinding"/>
        </DockPanel>

在这里，我将矩形的可见性绑定到按钮IsMouseOver-property，并使用BooleanToVisibilityConverter转换输出。