如何在 WPF XAML 中创建自定义工具提示模板

本文关键字：自定义 工具提示 创建 WPF XAML | 更新日期: 2023-09-27 18:32:00

我在窗体上有许多按钮（准确地说是devcomponents ButtonDropDown控件）。

我想为每个工具提示显示一个工具提示，其中包含顶部的标题，左侧的图像和右侧的说明。

标题需要绑定到ButtonDropDown.Header，图像要绑定到ButtonDropDown.Image。然后，我还需要在某处定义描述。

我只使用 WPF 几个星期，所以我没有设法通过搜索找到任何答案，尽管我已经研究了一些。

以下是我尝试创建一个实际上根本不起作用的模板：

<Style TargetType="dcr:ButtonDropDown">
    <Setter Property="OverridesDefaultStyle" Value="True"></Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="dcr:ButtonDropDown">
                <ContentControl>
                    <ContentControl.ToolTip>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition />
                                <RowDefinition />
                            </Grid.RowDefinitions>
                            <Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
                            Content="{TemplateBinding Header}" FontWeight="Bold" />
                            <Viewbox Grid.Row="1" Grid.Column="0" Width="64" Height="32" Margin="3">
                                <ContentControl Content="{TemplateBinding Image}" />
                            </Viewbox>
                            <Label Grid.Row="1" Grid.Column="1"
                            Content="{TemplateBinding ToolTip.Content}" />
                        </Grid>
                    </ContentControl.ToolTip>
                </ContentControl>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

然后，我定义一个按钮，如下所示：

<dcr:ButtonDropDown Header="-X" Command="{Binding MoveCommand}" CommandParameter="xMinus"
                    ImagePosition="Top" IsEnabled="{Binding UserConfiguration.Move.Visible}"
                    ToolTip="move x axis down">
    <dcr:ButtonDropDown.Image>
        <Viewbox Width="32" Height="32" Margin="3">
            <ContentControl Content="{StaticResource minusXImage}" />
        </Viewbox>
    </dcr:ButtonDropDown.Image>
</dcr:ButtonDropDown>

请有人告诉我如何做到这一点吗？

如何在 WPF XAML 中创建自定义工具提示模板

我已经回答了这个问题。

以下样式是为ToolTip定义的：

<Style TargetType="ToolTip">
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate  TargetType="ToolTip">
                <Border Background="GhostWhite" BorderBrush="Gainsboro" BorderThickness="1">
                <Grid Background="White">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
                           Content="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ToolTip}}, 
                           Path=PlacementTarget.(dcr:ButtonDropDown.Header)}" 
                           FontWeight="Bold" />
                    <Viewbox Grid.Row="1" Grid.Column="0" Width="64" Height="32" Margin="3">
                        <ContentControl Content="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ToolTip}}, 
                            Path=PlacementTarget.(dcr:ButtonDropDown.Image)}" />
                    </Viewbox>
                    <Label Grid.Row="1" Grid.Column="1"
                           Content="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ToolTip}},
                           Path=PlacementTarget.(dcr:ButtonDropDown.ToolTip)}" />
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

然后，我如上所述定义一个按钮，ToolTip文本和标题根据需要出现在ToolTip中。

关键是绑定：

Content="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type  ToolTip}}, 
Path=PlacementTarget.(dcr:ButtonDropDown.Header)}"

它将Tooltip视为Label的祖先，并将其PlacementTarget投射成ButtonDropDown

不起作用的是图像。这显示在ToolTip中，但从按钮中删除。

如果任何其他控件不是控件ButtonDropDown，这也将破坏它们的工具提示。

我开始认为我需要创建一些自定义控件，其中包含每个控件的ToolTip所需的信息。

相关文章：