Question

I’m basically trying to implement a popup on a button hover. When a user is hovered over the button I want the popup to appear. When they’re not, I want only the label to appear. It is kinda like a tooltip except that I don’t want the Popup going away after some amount of time passes. I kinda have it working using a ControlTemplate on the button with two caveats:

1. When I hover over the area below the button, the screen flickers between the popup and a label.
2. I want the Popup to be aligned bottom and center.

Xaml Code:

<Window>
    <Window.Resources>
        <Style x:Key="LabelStyle" TargetType="Label">
            <Setter Property="Margin" Value="0, 0, 0, 5" />
            <Setter Property="Width" Value="58" />
            <Setter Property="Height" Value="28" />
            <Setter Property="Padding" Value="1, 0, 1, 0" />
        </Style>

        <ControlTemplate x:Key="ButtonControlTemplate" TargetType="Button">
            <StackPanel>
                <Button Width="48" Height="48" Background="White" Name="ItemButton">
                    <ContentPresenter Content="{TemplateBinding Property=ContentControl.Content}" />
                </Button>
                <Label Style="{StaticResource LabelStyle}" VerticalContentAlignment="Top" HorizontalContentAlignment="Center" Name="ItemLabel">
                    <TextBlock TextWrapping="Wrap" TextAlignment="Center" FontSize="11" LineHeight="13" LineStackingStrategy="BlockLineHeight">
                        Hello World!
                    </TextBlock>
                </Label>
                <Popup Name="ItemPopup" Placement="Bottom" PlacementTarget="{Binding ElementName=ItemButton}">
                    <TextBlock Background="Red">Hello World!</TextBlock>
                </Popup>
            </StackPanel>
            <ControlTemplate.Triggers>
                <Trigger SourceName="ItemButton" Property="IsMouseOver" Value="True">
                    <Setter TargetName="ItemLabel" Property="Visibility" Value="Hidden" />
                    <Setter TargetName="ItemPopup" Property="IsOpen" Value="True" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Window.Resources>

    <StackPanel>
        <Button Background="Green" Template="{StaticResource ButtonControlTemplate}">
            <Image Source="http://leduc998.files.wordpress.com/2010/10/msft_logo.jpg" />
        </Button>
    </StackPanel>
</Window>

Edit: Fixed the flicker issue. Just need the placement of the Popup to be bottom and center.

Answer 1

I ended up having to write a converter that moved it down based on the height of the popup and the placement target.

Use a multibinding like this to pass the info into my converter for VerticalOffset:

<MultiBinding Converter="{StaticResource PopupVerticalAligner}">
    <Binding RelativeSource="{RelativeSource Self}" Path="PlacementTarget.ActualHeight" />
    <Binding RelativeSource="{RelativeSource Self}" Path="ActualHeight" />
</MultiBinding>