wpf 实现combox 下拉展示和选中后的展示不同的效果

wpf样式代码

效果展示

image
image

样式代码
点击查看代码
<!-- 🔥 两列展示 + 可输入 + 无匹配保留 -->
        <Style x:Key="TwoColumnComboBoxStyle" TargetType="ComboBox"
               BasedOn="{StaticResource {x:Type ComboBox}}">

            <Setter Property="IsEditable" Value="True"/>
            <Setter Property="SelectedValuePath" Value="HgQydm"/>

            <!-- 下拉项两列 -->
            <Setter Property="ItemTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Grid Margin="5">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="130" />
                            </Grid.ColumnDefinitions>

                            <TextBlock Text="{Binding HgQydm}" />
                            <TextBlock Grid.Column="1"
                                       Text="{Binding ChangeDate, StringFormat=\{0:yyyy-MM-dd\}}" />
                        </Grid>
                    </DataTemplate>
                </Setter.Value>
            </Setter>

            <!-- 自定义外观 -->
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ComboBox">
                        <Grid>
                            <!-- 显示输入或选中的内容:用 Text -->
                            <Border Background="White"
                                    BorderBrush="#CCC"
                                    BorderThickness="1"
                                    CornerRadius="3"
                                    Padding="6">
                                <TextBlock Text="{Binding Text,
                                          RelativeSource={RelativeSource TemplatedParent}}" />
                            </Border>

                            <!-- ▼ 按钮 -->
                            <ToggleButton x:Name="ToggleButton"
                                          HorizontalAlignment="Right"
                                          Width="18"
                                          IsChecked="{Binding IsDropDownOpen,
                                                RelativeSource={RelativeSource TemplatedParent}}"
                                          ClickMode="Press"/>

                            <!-- Popup 保留 WPF 官方逻辑 -->
                            <Popup x:Name="PART_Popup"
                                   Placement="Bottom"
                                   AllowsTransparency="True"
                                   Focusable="False"
                                   IsOpen="{TemplateBinding IsDropDownOpen}">
                                <Border Background="White"
                                        BorderBrush="#CCC"
                                        BorderThickness="1">
                                    <ScrollViewer>
                                        <ItemsPresenter/>
                                    </ScrollViewer>
                                </Border>
                            </Popup>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
model 以及 viewmodel
点击查看代码
using System;
using System.Collections.ObjectModel;
using System.ComponentModel;
using WpfApp45;

public class MainViewModel : INotifyPropertyChanged
{
    private CompanyInfo _selectedCompany;
    private string _selectedHgQydm;
    private string _inputHgQydm;

    public ObservableCollection<CompanyInfo> CompanyList { get; set; }

    public CompanyInfo SelectedCompany
    {
        get => _selectedCompany;
        set
        {
            _selectedCompany = value;
            OnPropertyChanged(nameof(SelectedCompany));
        }
    }

    public string SelectedHgQydm
    {
        get => _selectedHgQydm;
        set
        {
            _selectedHgQydm = value;
            OnPropertyChanged(nameof(SelectedHgQydm));
        }
    }

    public string InputHgQydm
    {
        get => _inputHgQydm;
        set
        {
            _inputHgQydm = value;
            OnPropertyChanged(nameof(InputHgQydm));
        }
    }

    public MainViewModel()
    {
        CompanyList = new ObservableCollection<CompanyInfo>()
        {
            new CompanyInfo{ HgQydm="342341211", ChangeDate=DateTime.Parse("2025-11-11").ToString(), ChangeOperator="Tom"},
            new CompanyInfo{ HgQydm="888888888", ChangeDate=DateTime.Parse("2025-10-01").ToString(), ChangeOperator="Jerry"},
        };
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string name)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    }
}
点击查看代码
   public class CompanyInfo
    {
        public string HgQydm { get; set; }
        public string ChangeDate { get; set; }
        public string ChangeOperator { get; set; }
    }
posted @ 2026-01-08 13:52  dd12138  阅读(10)  评论(0)    收藏  举报