0

我在 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"/>

现在它看起来像这样：

在此处输入图像描述

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

它应该看起来像这样

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

4

1 回答 1

0

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

    <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>

setters 值中的 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>

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

于 2012-12-14T07:16:05.353 回答