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

时间:2014-11-25 16:19:40

标签: c# wpf xaml

我在表单上有许多按钮(精确的组件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>

请有人能让我知道如何解决这个问题吗?

1 个答案:

答案 0 :(得分:0)

我已经在某种程度上回答了这个问题。

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中,但会从按钮中删除。

这也将打破任何其他控件&#39;工具提示,如果它们不是ButtonDropDown控件。

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