WPF ListBox,ListView添加ToolTip显示当前选择项

     

今天碰到一个需求，使用ListBox显示多文字。因为每个选项文字较长，ListBoxItem的宽度有限，这时候为了体现界面友好，增加ToolTip是一个好的选择：代码如下：

MainWindow.xaml:

<Window x:Class="_20200116_MVVM.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:_20200116_MVVM"
        xmlns:mvvm="http://www.galasoft.ch/mvvmlight"
        xmlns:vm ="clr-namespace:_20200116_MVVM.ViewModel"
        xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
        mc:Ignorable="d"
        Title="MainWindow" Height="325" Width="400">
    <Window.Resources>
        <ToolTip x:Key="InforTip">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="Name：" />
                <TextBlock Text="{Binding Path=Name}"/>
                <TextBlock Text="Type：" />
                <TextBlock Text="{Binding Path=ClassDisplayText}"/>
            </StackPanel>
        </ToolTip>
        <ListBoxItem x:Key="Item">
            <TextBlock Text="{Binding Name}"></TextBlock>
        </ListBoxItem>
        <Style x:Key="InforTipStyle" TargetType="{x:Type ListViewItem}">
            <Setter Property="ToolTip" Value="{Binding Source={StaticResource InforTip}}" />
        </Style>
        <Style x:Key="ListBoxItem" TargetType="{x:Type ListBoxItem}">
            <Setter Property="ToolTip" Value="{Binding Source={StaticResource InforTip}}"></Setter>
        </Style>

    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <ListBox Grid.Column="0" ItemsSource="{Binding TestModel}" >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Border BorderThickness="1" Margin="5">
                        <TextBlock Text="{Binding Name}">
                            <TextBlock.ToolTip>
                                <TextBlock Text="{Binding Name}"></TextBlock>
                            </TextBlock.ToolTip>
                    </TextBlock>
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <ListView Grid.Column="1" Name="listDevice" ItemsSource="{Binding TestModel}" VirtualizingStackPanel.IsVirtualizing="False" ItemContainerStyle="{StaticResource InforTipStyle}">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="新闻1" DisplayMemberBinding="{Binding Path=Name}" Width="100">
                    </GridViewColumn>
                    <GridViewColumn Header="新闻2" DisplayMemberBinding="{Binding Path=ClassDisplayText}" Width="100"/>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
    

</Window>

vm:

using GalaSoft.MvvmLight;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace _20200116_MVVM.ViewModel
{
    public class PopupVM: ViewModelBase
    {

        private ObservableCollection<Model> _testModel;
        // 模拟数据绑定
  
        public ObservableCollection<Model> TestModel
        {
            get { return _testModel; }
            set
            {
                if (!Equals(_testModel, value))
                {
                    _testModel = value;
                    RaisePropertyChanged("TestModel");
                }
            }
        }

        public PopupVM()
        {
            TestModel = new ObservableCollection<Model>();
            TestModel.Add(new Model() { Name = "“12.35平米！84万！”市南区一套二手房成交信息连日来席卷岛城市民朋友圈。按网传信息，这套房子每平方米售价超过6.8万元。", ClassDisplayText = "6月28日，半岛记者实地走访了解到，这处二手房建成时间约为上世纪20年代，至今已近百年。" });
            TestModel.Add(new Model() { Name = "由于房源照片显示的房屋状态太过“老破小”，引发不少网友吐槽“真像个茅草房，风一吹，屋顶都能刮飞了”“这小平房真是寸砖寸金，可当古董收藏了”。", ClassDisplayText = "促成这套小房成交的中介工作人员向记者证实了网传成交价格的真实性，称房源为商品住宅，手续齐全" });       

        }
    }
    public class Model : ObservableObject
    {
        private string _name;
        private string _classDisplayText;

        public string Name
        {
            get { return _name; }
            set
            {
                if (!Equals(_name, value))
                {
                    _name = value;
                    RaisePropertyChanged("Name");
                }
            }
        }

        public string ClassDisplayText
        {
            get { return _classDisplayText; }
            set
            {
                if (!Equals(_classDisplayText, value))
                {
                    _classDisplayText = value;
                    RaisePropertyChanged("ClassDisplayText");
                }
            }
        }
    }   
}

窗口的左边是一个ListBox，右边是一个ListView,都是带有ToolTip的，看一下运行效果：

ListBox：

ListView：

代码工程路径：https://download.csdn.net/download/chulijun3107/12561687