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