WPF实现TextBlock获焦转ComboBox、失焦还原的方案咨询

不用DataGrid的话，直接用ContentControl结合触发器切换模板就能实现需求，逻辑和DataGrid的CellTemplate/CellEditingTemplate完全一致，完美脱离DataGrid使用：

步骤1：定义显示和编辑模板 #

先在资源里分别定义用于显示的TextBlock模板（带文本省略）和用于编辑的ComboBox模板：

<Window.Resources>
    <!-- 非编辑状态：带文本省略的TextBlock -->
    <DataTemplate x:Key="DisplayTemplate">
        <TextBlock Text="{Binding}" 
                   TextTrimming="CharacterEllipsis"
                   Padding="2" Background="Transparent"/>
    </DataTemplate>

    <!-- 编辑状态：ComboBox -->
    <DataTemplate x:Key="EditTemplate">
        <ComboBox ItemsSource="{Binding YourOptionList}" 
                  SelectedItem="{Binding}"
                  IsDropDownOpen="True"
                  Focusable="True"/>
    </DataTemplate>
</Window.Resources>

步骤2：给ContentControl加样式触发器 #

通过触发器控制ContentControl在获焦/失焦时切换模板：

<Style TargetType="ContentControl">
    <Setter Property="ContentTemplate" Value="{StaticResource DisplayTemplate}"/>
    <Style.Triggers>
        <!-- 获焦时切换到编辑模板 -->
        <Trigger Property="IsKeyboardFocused" Value="True">
            <Setter Property="ContentTemplate" Value="{StaticResource EditTemplate}"/>
        </Trigger>
        <!-- 鼠标悬停显示编辑光标，提升交互体验 -->
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Cursor" Value="IBeam"/>
        </Trigger>
    </Style.Triggers>
</Style>

步骤3：使用控件 #

直接绑定数据即可：

<ContentControl Content="{Binding YourSelectedValue}" 
                Width="200" Height="30"/>

可选优化：点击直接进入编辑状态 #

如果需要点击控件就触发编辑，给ContentControl加鼠标事件处理：

<ContentControl Content="{Binding YourSelectedValue}" 
                Width="200" Height="30"
                MouseDown="ContentControl_MouseDown"/>

后台代码：

private void ContentControl_MouseDown(object sender, MouseButtonEventArgs e)
{
    (sender as ContentControl)?.Focus();
}

这个方案逻辑清晰，完全不需要修改TextBox的模板，也避开了TextBlock没有ControlTemplate的问题，完美满足你需要TextTrimming属性+编辑时用ComboBox的需求。

内容的提问来源于stack exchange，提问作者struggling-to-work