ComboBox Color Picker with LivePreview，在 ComboBox 设置 itemssource

Question

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

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

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

视图模型：

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>

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);

ComboBox Color Picker with LivePreview，在 ComboBox 设置 itemssource

ComboBox Color Picker with LivePreview, set up itemssource at ComboBox

c#

wpf

combobox

mvvm

itemssource