数据模板中的用户控件未显示

Posted 2023-02-15

【中文标题】数据模板中的用户控件未显示

【英文标题】：User control in Data template not shown

【发布时间】：2022-01-07 23:11:56

【问题描述】：

我有这个组合框

<ComboBox x:Name="Renderer" ItemsSource="Binding RendererItems" 
      ItemTemplate="StaticResource DropDownItemTemplate" SelectedIndex="0">
      <i:Interaction.Triggers>
          <i:EventTrigger EventName="SelectionChanged">
            <ei:CallMethodAction TargetObject="Binding" 
             MethodName="RendererItemsSelectionChanged"/>                               
          </i:EventTrigger>
      </i:Interaction.Triggers>
</ComboBox>

还有这个项目的数据模板

        <DataTemplate x:Key="DropDownItemTemplate">
            <StackPanel Orientation="Horizontal">
                <UserControl Content="Binding Icon" Width="24" Height="24"/>
                <TextBlock Text="Binding Text" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10,0"/>
            </StackPanel>
        </DataTemplate>

而数据来自：

public ObservableCollection<ComboBoxItemModel> RendererItems  get; set;  = new ObservableCollection<ComboBoxItemModel>();
        public MainWindowViewModel()
        
            RendererItems.Add(new ComboBoxItemModel()  Icon = new RenderedIcon(), Text = "Rendered" );
            RendererItems.Add(new ComboBoxItemModel()  Icon = new WireframeIcon(), Text = "Wireframe" );
            RendererItems.Add(new ComboBoxItemModel()  Icon = new ShadedIcon(), Text = "Shaded" );
            RendererItems.Add(new ComboBoxItemModel()  Icon = new HiddenLinesIcon(), Text = "Hidden Lines" );
        

ComboBoxItemModel 类的定义如下：

    public class ComboBoxItemModel
    
        public UserControl Icon  get; set; 
        public string Text  get; set;         
    

我第一次点击 Combo 时显示如下：

如您所见，所选项目没有图标

我第二次点击 Combo 时显示如下：

现在我选择的项目没有图标。但我希望 Combo 项目始终有一个图标。

【问题讨论】：

为什么你的视图模型属性被声明为你的用户控件的一个实例？它应该被声明为可以分配给用户控件的Content 属性的类型。

【参考方案1】：

一个 UIElement - 就像你的UserControl Icon - 只能有一个父元素，因此只能在可视树中出现一次。您根本不应该将 UIElement 作为视图模型数据项。

为了对图标建模，请在 DrawingImage 中使用位图或绘图：

public class ComboBoxItemModel

    public ImageSource Icon  get; set;  // assign a DrawingImage
    public string Text  get; set;         

与

<DataTemplate x:Key="DropDownItemTemplate">
    <StackPanel Orientation="Horizontal">
        <Image Source="Binding Icon" Width="24" Height="24"/>
        <TextBlock Text="Binding Text" .../>
    </StackPanel>
</DataTemplate>

---

使用 UserControl 图标的替代方法可能是使用 VisualBrush 填充 Rectangle：

<DataTemplate x:Key="DropDownItemTemplate">
    <StackPanel Orientation="Horizontal">
        <Rectangle Width="24" Height="24">
            <Rectangle.Fill>
                <VisualBrush Visual="Binding Icon"/>
            </Rectangle.Fill>
        </Rectangle>
        <TextBlock Text="Binding Text" .../>
    </StackPanel>
</DataTemplate>

【讨论】：

但是“图标”不是图像而是用户控件，里面有很多东西。我如何使用用户控件来做到这一点？

查看编辑后的答案，了解如何使用 UserControl 图标完成此操作。

行得通！谢谢