WPF中如何为同一UserControl实现可切换的多种布局模板

核心思路是用固定Grid容器+状态逻辑切换列属性，不要用多模板切换、动态增减控件的方案，性能更高、逻辑更易维护，同时完全兼容作为ItemTemplate在列表中使用的场景。

第一步：定义布局状态枚举 #

先定义强类型枚举表示三种布局，避免硬编码魔法值，后续绑定、逻辑判断都靠这个枚举：

public enum ContentLayoutMode
{
    /// <summary>
    /// 输入框居左、图片居右
    /// </summary>
    TextLeftImageRight,
    /// <summary>
    /// 图片居左、输入框居右
    /// </summary>
    ImageLeftTextRight,
    /// <summary>
    /// 输入框占满整行
    /// </summary>
    TextFullWidth
}

第二步：编写自定义UserControl #

不要用StackPanel、DockPanel这类需要调整子控件顺序的容器，直接用两列Grid作为根容器，两个控件（TextBox、Image）初始化时就加载完成，切换布局只需要改Grid列宽、子控件的Grid.Column附加属性、图片可见性，没有重复实例化控件的开销。

核心注意点 #

所有需要外部绑定的属性全部实现为依赖属性，绝对不要在UserControl构造函数里写this.DataContext = this，否则作为ItemTemplate使用时会破坏数据上下文继承，导致列表项绑定失效。
XAML核心结构参考：

<UserControl x:Class="YourApp.CustomControls.TextImageLayoutControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"
             xmlns:local="clr-namespace:YourApp.CustomControls">
    <UserControl.Resources>
        <!-- 拉取枚举所有值作为下拉选项源，不用手动硬编码ComboBox项 -->
        <ObjectDataProvider x:Key="LayoutModeOptions"
                            MethodName="GetValues"
                            ObjectType="{x:Type sys:Enum}">
            <ObjectDataProvider.MethodParameters>
                <x:Type TypeName="local:ContentLayoutMode"/>
            </ObjectDataProvider.MethodParameters>
        </ObjectDataProvider>
    </UserControl.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <!-- 布局切换下拉框 -->
        <ComboBox Grid.Row="0" Margin="4"
                  ItemsSource="{Binding Source={StaticResource LayoutModeOptions}}"
                  SelectedItem="{Binding LayoutMode, RelativeSource={RelativeSource AncestorType=local:TextImageLayoutControl}, Mode=TwoWay}"/>
        <!-- 内容区根Grid，切换布局只改这个Grid的属性 -->
        <Grid x:Name="ContentRootGrid" Grid.Row="1" Margin="4">
            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="LeftCol" Width="*"/>
                <ColumnDefinition x:Name="RightCol" Width="*"/>
            </Grid.ColumnDefinitions>
            <TextBox x:Name="InputTextBox" Margin="4"
                     Text="{Binding InputContent, RelativeSource={RelativeSource AncestorType=local:TextImageLayoutControl}, UpdateSourceTrigger=PropertyChanged}"/>
            <Image x:Name="DisplayImage" Margin="4" Stretch="UniformToFill"
                   Source="{Binding ImageSource, RelativeSource={RelativeSource AncestorType=local:TextImageLayoutControl}}"/>
        </Grid>
    </Grid>
</UserControl>

后台代码实现依赖属性和布局切换逻辑：

public partial class TextImageLayoutControl : UserControl
{
    public TextImageLayoutControl()
    {
        InitializeComponent();
    }

    /// <summary>
    /// 布局模式依赖属性
    /// </summary>
    public ContentLayoutMode LayoutMode
    {
        get => (ContentLayoutMode)GetValue(LayoutModeProperty);
        set => SetValue(LayoutModeProperty, value);
    }
    public static readonly DependencyProperty LayoutModeProperty =
        DependencyProperty.Register(nameof(LayoutMode), typeof(ContentLayoutMode), typeof(TextImageLayoutControl),
            new PropertyMetadata(ContentLayoutMode.TextLeftImageRight, OnLayoutModeChanged));

    /// <summary>
    /// 输入框文本依赖属性
    /// </summary>
    public string InputContent
    {
        get => (string)GetValue(InputContentProperty);
        set => SetValue(InputContentProperty, value);
    }
    public static readonly DependencyProperty InputContentProperty =
        DependencyProperty.Register(nameof(InputContent), typeof(string), typeof(TextImageLayoutControl), new PropertyMetadata(string.Empty));

    /// <summary>
    /// 图片源依赖属性
    /// </summary>
    public ImageSource ImageSource
    {
        get => (ImageSource)GetValue(ImageSourceProperty);
        set => SetValue(ImageSourceProperty, value);
    }
    public static readonly DependencyProperty ImageSourceProperty =
        DependencyProperty.Register(nameof(ImageSource), typeof(ImageSource), typeof(TextImageLayoutControl), new PropertyMetadata(null));

    /// <summary>
    /// 布局模式变更回调，直接调整Grid属性实现切换
    /// </summary>
    private static void OnLayoutModeChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var control = (TextImageLayoutControl)d;
        var currentMode = (ContentLayoutMode)e.NewValue;
        switch (currentMode)
        {
            case ContentLayoutMode.TextLeftImageRight:
                control.LeftCol.Width = new GridLength(1, GridUnitType.Star);
                control.RightCol.Width = new GridLength(1, GridUnitType.Star);
                control.DisplayImage.Visibility = Visibility.Visible;
                Grid.SetColumn(control.InputTextBox, 0);
                Grid.SetColumn(control.DisplayImage, 1);
                break;
            case ContentLayoutMode.ImageLeftTextRight:
                control.LeftCol.Width = new GridLength(1, GridUnitType.Star);
                control.RightCol.Width = new GridLength(1, GridUnitType.Star);
                control.DisplayImage.Visibility = Visibility.Visible;
                Grid.SetColumn(control.InputTextBox, 1);
                Grid.SetColumn(control.DisplayImage, 0);
                break;
            case ContentLayoutMode.TextFullWidth:
                control.LeftCol.Width = new GridLength(1, GridUnitType.Star);
                control.RightCol.Width = new GridLength(0);
                control.DisplayImage.Visibility = Visibility.Collapsed;
                Grid.SetColumn(control.InputTextBox, 0);
                break;
        }
    }
}

第三步：作为ItemTemplate使用的配置 #

因为所有属性都通过依赖属性暴露，且没有破坏DataContext继承，直接在列表的ItemTemplate里引用这个控件即可，新增项时只要给绑定的数据项设置对应属性值，控件会自动渲染成对应布局：

<ListBox ItemsSource="{Binding YourItemList}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <local:TextImageLayoutControl Margin="8"
                                          LayoutMode="{Binding ItemLayoutMode, Mode=TwoWay}"
                                          InputContent="{Binding ItemText, Mode=TwoWay}"
                                          ImageSource="{Binding ItemImage}"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

你的数据项ViewModel只要实现INotifyPropertyChanged，包含ItemLayoutMode（ContentLayoutMode类型）、ItemText（string类型）、ItemImage（ImageSource类型）三个属性即可，新增项时给ItemLayoutMode设默认值，控件加载时会自动触发布局回调，不需要额外写初始化逻辑。

可选优化 #

如果需要平滑的布局切换效果，可以给LeftCol、RightCol的Width属性加动画，切换模式时做宽度渐变，不需要修改核心切换逻辑。如果需要给ComboBox选项显示自定义中文文本，写一个简单的枚举描述转换器，给枚举值加Description特性即可，不用硬编码ComboBox子项。

内容的提问来源于stack exchange，提问作者Świętopeł Ziemowit