Here is my code:

<Window x:Class="WpfApp1.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:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <ComboBox ItemsSource="{Binding Paths}" HorizontalContentAlignment="Stretch" VerticalAlignment="Center" HorizontalAlignment="Center">
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                            <ColumnDefinition Width="auto"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding PathName}"></TextBlock>
                        <TextBlock Text="{Binding DiskFreeSpace}" Grid.Column="1"></TextBlock>
                    </Grid>
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>
    </Grid>
</Window>

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApp1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = this;
            Paths.Add(new PathModel() { PathName = @"C:\", DiskFreeSpace = "512G" });
            Paths.Add(new PathModel() { PathName = @"D:\", DiskFreeSpace = "255G" });
        }
        public ObservableCollection<PathModel> Paths { get; set; }=new ObservableCollection<PathModel>();
        public class PathModel { 
            public string PathName { get; set; }
            public string DiskFreeSpace { get; set; }
        }
    }
}

I want to hide the DiskFreeSpace when the value is selected, just like this:

When clicked and expand the popup, the DiskFreeSpace show again, just like this:

How can I achieve this?

CodePudding user response：

Something like this should work:

<ComboBox ItemsSource="{Binding Paths}" HorizontalContentAlignment="Stretch" VerticalAlignment="Center" HorizontalAlignment="Center">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding PathName}"></TextBlock>
        </DataTemplate>
    </ComboBox.ItemTemplate>
    <ComboBox.ItemContainerStyle>
        <Style TargetType="{x:Type ComboBoxItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                                <ColumnDefinition Width="auto"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <TextBlock Text="{Binding PathName}"></TextBlock>
                            <TextBlock Text="{Binding DiskFreeSpace}" Grid.Column="1"></TextBlock>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ComboBox.ItemContainerStyle>
</ComboBox>

CodePudding user response：

You could add a Style with a DataTrigger that hides the second TextBlock:

<ComboBox ItemsSource="{Binding Paths}" HorizontalContentAlignment="Stretch" 
          VerticalAlignment="Center" HorizontalAlignment="Center">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="auto"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding PathName}"></TextBlock>
                <TextBlock Text="{Binding DiskFreeSpace}" Grid.Column="1">
                    <TextBlock.Style>
                        <Style TargetType="TextBlock">
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ComboBoxItem}}" Value="{x:Null}">
                                    <Setter Property="Visibility" Value="Collapsed"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </TextBlock.Style>
                </TextBlock>
            </Grid>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>