WPF image next to text + mouse over

Question

Hi everyone,

I'm a noobie when it comes to WPF xaml so i'm hoping my question is so easy it can be answered in one line.

I'm looking for the best way to display an icon next to a block of text.

When a user hovers over the block of text or the icon i want to change the icon to another one.

Also, is it best practice to create one image with all my icons inside?? and move the background to the correct area?

Answer 1

One approach might be to bind the visibility of the image to the IsMouseOver property of the TextBlock, like this:

<StackPanel Orientation="Horizontal">
    <StackPanel.Resources>
        <BooleanToVisibilityConverter x:Key="BoolToVis" />
    </StackPanel.Resources>

    <Image 
        Source="foo.jpg" 
        Margin="0 0 5 0" 
        Visibility="{Binding IsMouseOver,ElementName=text,Converter={StaticResource BoolToVis}"
        />

    <TextBlock x:Name="text" Text="Mouse over me to show the image!" />
</StackPanel>

That's untested, but it should be sound. Let me know if it works for you.