带有 LivePreview 的 ComboBox 颜色选择器，在 ComboBox 设置 itemssource

Question

我喜欢在 ComboBox 和 LivePreview 的帮助下构建一些 ColorPicker 应用程序。我已经与第一个问题发生了冲突。 I ComboBox 我喜欢显示填充所选颜色的矩形和带有颜色名称的文本块。颜色将通过 RGB 调色板手动选择。

我的问题是 ComboBox 不显示任何颜色和文本。我在下面附上了代码，如果有任何问题，请询问。我相信我的问题出在 XAML 代码中？

现在 ComboBox 只显示“ColorPickerWithLivePreview.ButtonIlluminationViewModel+ColorItem” - 两行，因为我在 List 中有两种颜色。

视图模型：

public class ButtonIlluminationViewModel : ViewModelBase
{

    public string ButtonName
    {
        get
        {
            return "Button Illumination";
        }
    }

    public ButtonIlluminationViewModel()
    {
        ColorList = new List<ColorItem>()
        {
            new ColorItem() { ColorName = "AppleGreen", Color = Color.FromArgb(255,255,255,255)},
            new ColorItem() { ColorName = "AppleGreen", Color = Colors.Red },
        };
    }

    public IList<ColorItem> ColorList
    {
        get;
        private set;
    }

    public class ColorItem
    {
        public string ColorName
        {
            get;
            set;
        }

        public Color Color
        {
            get;
            set;
        }
    }
}

XAML：

<local:LivePreviewComboBox Grid.Column="1" Grid.Row="0" x:Name="liveBox" Width="200" SelectedIndex="0" ItemsSource="{Binding ColorList}" >
            <local:LivePreviewComboBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Rectangle Width="20" Height="20" Fill="{Binding }" Margin="1"/>
                        <TextBlock Height="20" Text="{Binding }" Margin="1"/>
                    </StackPanel>
                </DataTemplate>
            </local:LivePreviewComboBox.ItemTemplate>
        </local:LivePreviewComboBox>

实时预览组合框：

public class LivePreviewComboBox : ComboBox
{

    #region DependencyProperty LivePreviewItem

    /// <summary>
    /// Gets or sets the live preview item.
    /// </summary>
    /// <value>The live preview item.</value>
    public object LivePreviewItem
    {
        get { return GetValue(LivePreviewItemProperty); }
        set { SetValue(LivePreviewItemProperty, value); }
    }

    /// <summary>
    /// Dependency property to get or set the live preview item
    /// </summary>
    public static readonly DependencyProperty LivePreviewItemProperty =
        DependencyProperty.Register("LivePreviewItem", typeof(object), typeof(LivePreviewComboBox),
        new FrameworkPropertyMetadata(null));

    #endregion

    #region Construction

    /// <summary>
    /// Initializes a new instance of the <see cref="LivePreviewComboBox"/> class.
    /// </summary>
    public LivePreviewComboBox()
    {
        DependencyPropertyDescriptor.FromProperty(IsDropDownOpenProperty, typeof(LivePreviewComboBox))
                .AddValueChanged(this, OnDropDownOpenChanged);
    }

    #endregion

    #region Overrides

    /// <summary>
    /// See <see cref="ComboBox.OnSelectionChanged" />
    /// </summary>
    protected override DependencyObject GetContainerForItemOverride()
    {
        var container = base.GetContainerForItemOverride();
        var comboBoxItem = container as ComboBoxItem;
        if (comboBoxItem != null)
        {
            DependencyPropertyDescriptor.FromProperty(ComboBoxItem.IsHighlightedProperty, typeof(ComboBoxItem))
                .AddValueChanged(comboBoxItem, OnItemHighlighted);
        }
        return container;
    }

    /// <summary>
    /// See <see cref="ComboBox.OnSelectionChanged" />
    /// </summary>
    protected override void OnSelectionChanged(SelectionChangedEventArgs e)
    {
        LivePreviewItem = SelectedItem;
        base.OnSelectionChanged(e);
    }

    #endregion

    #region Private Helpers

    private void OnItemHighlighted(object sender, EventArgs e)
    {
        var comboBoxItem = sender as ComboBoxItem;
        if (comboBoxItem != null && comboBoxItem.IsHighlighted)
        {
            LivePreviewItem = comboBoxItem.DataContext;
        }
    }

    private void OnDropDownOpenChanged(object sender, EventArgs e)
    {
        if (IsDropDownOpen == false)
        {
            LivePreviewItem = SelectedItem;
        }
    }

    #endregion

}

Answer 1

您忘记将 Textblock Text 和 Rectangle Fill 绑定到 ColorItem 的实际属性。

您还需要将 Fill 属性绑定到 Brush 类型的属性而不是 Color。您可以用这样的颜色制作画笔：

new SolidColorBrush(System.Windows.Media.Colors.Blue);