WPF/Xaml中TextBlock展开/收起符号实现及Tooltip切换方案咨询

嘿，这个需求挺典型的，我给你几个实用的方案来在TextBlock里搞定展开/收起符号，同时配合Tooltip的切换：

1. 直接用Unicode字符（最简单） #

不需要额外资源，用系统支持的Unicode箭头或符号就够了：

• 展开状态：用「▸」（U+25B8 黑右三角）或者「+」
• 收起状态：用「▾」（U+25BE 黑下三角）或者「-」

在XAML里，你可以把符号和文本放在同一个TextBlock的Inline元素里，比如：

<TextBlock>
    <Run Text="基础信息 "/>
    <Run x:Name="ToggleSymbol" Text="▸" Cursor="Hand" MouseLeftButtonDown="ToggleSymbol_MouseLeftButtonDown"/>
</TextBlock>

然后在后台代码或者ViewModel里切换符号文本：

private void ToggleSymbol_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    var run = sender as Run;
    if (run.Text == "▸")
    {
        run.Text = "▾";
        // 切换到Advanced Tooltip的逻辑，比如修改Tooltip的Content或者显示另一个Tooltip
    }
    else
    {
        run.Text = "▸";
        // 切回Simple Tooltip
    }
}

如果用MVVM，你可以绑定一个IsAdvancedVisible的布尔属性，再用IValueConverter把布尔值转成对应的符号：

public class BoolToToggleSymbolConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (bool)value ? "▾" : "▸";
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (string)value == "▾";
    }
}

2. 使用图标字体（更美观） #

如果你的项目里已经引入了像FontAwesome这样的图标字体，直接用对应的展开/收起图标会更美观：

• 展开：（右箭头）
• 收起：（下箭头）

XAML示例：

<TextBlock FontFamily="FontAwesome">
    <Run Text="基础信息 "/>
    <Run Text="&#xf054;" Cursor="Hand" 
         MouseLeftButtonDown="ToggleSymbol_MouseLeftButtonDown"/>
</TextBlock>

同样，你可以通过绑定切换Text属性的值来实现状态变化。

3. 自定义矢量图标（高度可控） #

如果需要完全自定义图标样式（比如颜色、大小、动画），可以用Path绘制矢量图形，放在TextBlock的InlineUIContainer里：

<TextBlock>
    <Run Text="基础信息 "/>
    <InlineUIContainer Cursor="Hand" MouseLeftButtonDown="ToggleSymbol_MouseLeftButtonDown">
        <Path x:Name="TogglePath" Width="12" Height="12" Fill="Black"
              Data="M4,0 L12,8 L4,16 Z"/> <!-- 右箭头路径 -->
    </InlineUIContainer>
</TextBlock>

切换状态时，给Path加个旋转动画或者直接修改Data：

private void ToggleSymbol_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    var path = TogglePath;
    if (path.Data.ToString().Contains("M4,0 L12,8 L4,16 Z"))
    {
        // 切换到下箭头
        path.Data = Geometry.Parse("M0,4 L8,12 L16,4 Z");
        // 切换Tooltip逻辑
    }
    else
    {
        // 切回右箭头
        path.Data = Geometry.Parse("M4,0 L12,8 L4,16 Z");
        // 切回Simple Tooltip
    }
}

关于Tooltip切换的小提示 #

你可以用两种方式实现Tooltip的切换：

• 单个Tooltip动态切换Content：绑定Tooltip的Content到ViewModel的一个属性，根据IsAdvancedVisible返回不同的内容模板。
• 两个Tooltip控制Visibility：定义SimpleTooltip和AdvancedTooltip两个控件，根据状态设置它们的Visibility为Visible/Collapsed。

内容的提问来源于stack exchange，提问作者Amibluesky