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

Question

我有这个组合框

<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 项目始终有一个图标。

Answer 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>