4

私は基本的に、ボタンのホバーにポップアップを実装しようとしています。ユーザーがボタンにカーソルを合わせると、ポップアップが表示されます。そうでないときは、ラベルだけを表示したい。ある程度の時間が経過した後にポップアップが消えたくないことを除いて、ツールチップのようなものです。ボタンで ControlTemplate を使用して動作させるには、次の 2 つの注意事項があります。

  1. ボタンの下の領域にカーソルを合わせると、ポップアップとラベルの間で画面がちらつきます。
  2. ポップアップを下と中央に揃えたい。

Xaml コード:

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

編集：ちらつきの問題を修正しました。ポップアップの配置が下と中央になるようにするだけです。

4

5 に答える 5

2

ポップアップの高さと配置ターゲットに基づいて下に移動するコンバーターを作成する必要がありました。

このようなマルチバインディングを使用して、VerticalOffset のコンバーターに情報を渡します。

<MultiBinding Converter="{StaticResource PopupVerticalAligner}">
    <Binding RelativeSource="{RelativeSource Self}" Path="PlacementTarget.ActualHeight" />
    <Binding RelativeSource="{RelativeSource Self}" Path="ActualHeight" />
</MultiBinding>
于 2012-08-14T15:19:11.580 に答える
0

MouseEnterイベントを試しましたか？次に、DispatcherTimerでポップアップを開いて、もう一度閉じることができます。

于 2012-08-06T20:21:30.713 に答える
0

sohum's answerに追加して、ListView-Popup の下部を ToggleButton の下の中央に配置する方法を次に示します。リストビューの幅に応じて、水平方向に正しくオフセットされます。また、トグルボタンをもう一度クリックしてポップアップを非表示にするなど、トグルボタンに直感的な動作を与える小片も残しました。

<ToggleButton x:Name="ParentToggleButton" IsChecked="{Binding ToggleButtonStatus}" IsHitTestVisible="{Binding ElementName=ToggledPopup, Path=IsOpen, Converter={StaticResource BoolToInvertedBoolConverter}}" >
  <ToggleButton.Content>...</ToggleButton.Content>
</ToggleButton>
<Popup PlacementTarget="{Binding ElementName=ParentToggleButton}"  Placement="Bottom" StaysOpen="False" IsOpen="{Binding ToggleButtonStatus}" x:Name="ToggledPopup">
  <Popup.HorizontalOffset>
    <MultiBinding Converter="{StaticResource CenterToolTipConverter}">
      <Binding RelativeSource="{RelativeSource Self}" Path="PlacementTarget.ActualWidth"/>
      <Binding ElementName="INeedYourWidth" Path="ActualWidth"/>
    </MultiBinding>
  </Popup.HorizontalOffset>
  <ListView x:Name="INeedYourWidth" ItemsSource="{Binding ItemsSource}" >
    <ListView.ItemTemplate>
      <DataTemplate>...</DataTemplate>
    </ListView.ItemTemplate>
  </ListView>
</Popup>

BoolToInvertedBoolConverter は false の場合は true を返し、true の場合は false を返します (ユーザーが切り替えを解除しようとしたときにポップアップが折りたたまれるようにするため)。 CenterToolTipConverter は sohum のlinkにあります。

于 2014-07-29T21:27:55.893 に答える