Question

我正在编写一个WPF应用程序，用户可以在其中从Windows窗体颜色对话框中选择一种颜色，并且所选颜色显示在列表框中。所选颜色将显示为一个列表框项目，其中包含一个矩形（即所选颜色）和一个名为所选颜色的名称的字符串。但是，我无法显示矩形和颜色名称。当我在仅将矩形添加到列表框的情况下运行程序时，它将显示矩形。但是，当我添加颜色名称时，它将矩形显示为字符串。

C＃

private void addNewItem_Click(object sender, RoutedEventArgs e)
    {
        ColorDialog cd = new ColorDialog();
        if (cd.ShowDialog() == System.Windows.Forms.DialogResult.OK)
        {
            var itemsCount = lstControl.Items.Count;
            var colorName = cd.Color;
            //Create rectangle object
            System.Windows.Shapes.Rectangle myRect = new System.Windows.Shapes.Rectangle();
            myRect.Fill = new SolidColorBrush(System.Windows.Media.Color.FromArgb(colorName.A, colorName.R, colorName.G, colorName.B));
            myRect.Height = 10;
            myRect.Width = 10;

            var newItem = new ListBoxItem
            {

                Content = myRect + colorName.ToString()

            };
            lstControl.Items.Add(newItem);
        }
    }

WPF

<ListBox x:Name="lstControl"
             Width="300" Height="85" Margin="10 10 20 4">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal" Margin="0,3,0,0">
                    <StackPanel.Resources>
                        <Style TargetType="TextBlock">
                            <Setter Property="Margin" Value="5,0,0,0"/>
                        </Style>
                    </StackPanel.Resources>
                    <Rectangle Width="30" Fill="{Binding SampleBrush}"/>
                    <TextBlock Width="130" Text="{Binding ColorName}"/>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>e

Answer 1

我不用在后面编写代码，而是使用它创建了一个新创建的类ColorData的集合，我们将完全能够利用项目模板。

步骤1：-ColorData类的创建

public class ColorData
{
    public ColorData(Brush color, String colorName)
    {
        ColorBrush = color;
        ColorText = colorName;
    }
    public Brush ColorBrush { get; set; }
    public string ColorText { get; set; }
}

步骤2：-创建ColorData类的可观察集合，并在构造函数中启动它并支持绑定，我给出了 this.DataContext = this;

public ObservableCollection<ColorData> ColorCollection { get; set; }

public MainWindow()
{
    ColorCollection = new ObservableCollection<ColorData>();
    InitializeComponent();
    this.DataContext = this;
}

步骤3：-在集合中添加ColorBrush和颜色名称。

private void addNewItem_Click(object sender, RoutedEventArgs e)
{
    ColorDialog cd = new ColorDialog();
    if (cd.ShowDialog() == System.Windows.Forms.DialogResult.OK)
    {
        var itemsCount = lstControl.Items.Count;
        var colorName = cd.Color;
        //Create rectangle object
        System.Windows.Shapes.Rectangle myRect = new System.Windows.Shapes.Rectangle();
        myRect.Fill = new SolidColorBrush(System.Windows.Media.Color.FromArgb(colorName.A, colorName.R, colorName.G, colorName.B));

        ColorCollection.Add(new ColorData(new SolidColorBrush(System.Windows.Media.Color.FromArgb(colorName.A, colorName.R, colorName.G, colorName.B)), colorName.Name ));
    }
}

步骤4：-更改XAML（仅更改了绑定中的PropertyName）命名您的Window / UserControl。支持ElementBinding。在这种情况下，我使用了Window1

使用ColorBrush和ColorText代替Binding中的SampleBrush和ColorName属性。然后绑定属性。 ItemsSource="{Binding ElementName=Window1,Path=DataContext.ColorCollection}

<ListBox x:Name="lstControl" ItemsSource="{Binding ElementName=Window1,Path=DataContext.ColorCollection}"
             Width="300" Height="85" Margin="10 10 20 4">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Margin="0,3,0,0">
                        <StackPanel.Resources>
                            <Style TargetType="TextBlock">
                                <Setter Property="Margin" Value="5,0,0,0"/>
                            </Style>
                        </StackPanel.Resources>
                        <Rectangle Width="30" Fill="{Binding ColorBrush}"/>
                        <TextBlock Width="130" Text="{Binding ColorText}"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

备用如果您不想采用上述绑定方法并遵循相同的方法，那么我已经通过添加由矩形和Textblock组成的Grid布局作为Grid Layout的子元素来调整您的代码。

 private void addNewItem_Click(object sender, RoutedEventArgs e)
        {
            ColorDialog cd = new ColorDialog();
            if (cd.ShowDialog() == System.Windows.Forms.DialogResult.OK)
            {
                var itemsCount = lstControl.Items.Count;
                var colorName = cd.Color;
                //Create rectangle object
                System.Windows.Shapes.Rectangle myRect = new System.Windows.Shapes.Rectangle();
                myRect.Fill = new SolidColorBrush(System.Windows.Media.Color.FromArgb(colorName.A, colorName.R, colorName.G, colorName.B));

                myRect.Height = 10;
                myRect.Width = 50;

                TextBlock label = new TextBlock();
                label.Height = 10;
                label.Width = 50;

                Grid layout = new Grid();
                layout.Children.Add(myRect);
                layout.Children.Add(label);
                label.Text = colorName.Name;
                var newItem = new ListBoxItem
                {
                    Content = layout
                };

                lstControl.Items.Add(newItem);
            }
        }

由您决定要实现哪种方法，但是我建议您选择第一个方法（绑定）。

将用户选择的颜色显示为矩形和字符串WPF C＃

1 个答案: