Question

I had a Image and Button like this in WPF:

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

Now it appears like this:

Now my requirement is when mouse hover on the Image or Button. the text (swethapilli) should move to right and highlight when the arrow image appears same as like the below image.

How to get this style can any one please help me to find the solution. Thank you.

Answer 1

I think the easiest way is to create an image which you can use as button background when mouse is over, like so:

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

EDIT: A more flexible way to position your content is the following:

Take a TextBlock as buttons content:

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

The 10 in the setters value is the number of pixels which the text goes to the right if the mouse is over the button.

EDIT 2: If you want to use a rectangle instead of the whole image as buttons background, you can do it like so:

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

Here I bound the Visibility of the rectangle to the buttons IsMouseOver-property and converted the output with the BooleanToVisibilityConverter.