Samuel
Samuel

Reputation: 75

WPF Databinding making a color selector

Hi I'm having a problem getting my WPF color selector to work. I think its because I'm suing Databinding in a wrong way but im not sure as I dont fully understand it.

What i want is a dropdown, that contains the colors in my list(contains as in shows the actual color not just text).

Heres my Code:

WPF:

<ComboBox Name="cb_farbe" Text="farbe" HorizontalContentAlignment="Center" IsEditable="True" Grid.Row="7" Grid.Column="1" VerticalAlignment="Center" Grid.ColumnSpan="2" Loaded="CbFarbe">

        <ComboBox.ItemTemplate>
            <DataTemplate>
                <Rectangle Grid.Column="0" Margin="5, 10" Fill="{Binding}"/>
            </DataTemplate>
        </ComboBox.ItemTemplate>

    </ComboBox>

c#:

private void CbFarbe(object sender, RoutedEventArgs e)
    {


        List<Color> colors = new List<Color>
        {
           Color.Blue,
           Color.Green,
           Color.LightBlue,
           Color.Black,
           Color.White,
           Color.Gray
        };

        var comboBox = sender as ComboBox;

        comboBox.ItemsSource = colors;

        comboBox.SelectedIndex = 1;

        this.DataContext = colors;

    }

Upvotes: 1

Views: 1565

Answers (3)

Clemens
Clemens

Reputation: 128136

Here's a pure XAML solution. Note that you'll also have to set the width and height of the Rectangle:

<ComboBox SelectedIndex="0">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <Rectangle Margin="5,10" Width="20" Height="20" Fill="{Binding}"/>
        </DataTemplate>
    </ComboBox.ItemTemplate>
    <SolidColorBrush>Blue</SolidColorBrush>
    <SolidColorBrush>Green</SolidColorBrush>
    <SolidColorBrush>LightBlue</SolidColorBrush>
    <SolidColorBrush>Black</SolidColorBrush>
    <SolidColorBrush>White</SolidColorBrush>
    <SolidColorBrush>Gray</SolidColorBrush>
</ComboBox>

Note that the ComboBox's SelectedItem property would return a SolidColorBrush. If you actually want to have a Color, set

<ComboBox ... SelectedValuePath="Color">

and get the color by the SelectedValue property.

Upvotes: 2

Matthew Walton
Matthew Walton

Reputation: 9969

The Fill property on Rectangle is of type System.Windows.Media.Brush. I suspect you'll see binding errors in your console output trying to bind System.Drawing.Color to it.

So what you need is a System.Windows.Media.Brush object instead. You'll have to either change the collection you're binding to, or you can construct the brush in the XAML:

<Rectangle>
  <Rectangle.Fill>
    <SolidColorBrush Color="{Binding}" />
  </Rectangle.Fill>
</Rectangle>

in which case you would bind to a List<System.Windows.Media.Color>.

Upvotes: 1

mm8
mm8

Reputation: 169380

You could set the Background of the ComboBoxItem to a SolidColorBrush:

<ComboBox Name="cb_farbe" Text="farbe" HorizontalContentAlignment="Center" IsEditable="True" Grid.Row="7" 
                  Grid.Column="1" VerticalAlignment="Center" Grid.ColumnSpan="2" Loaded="CbFarbe">
    <ComboBox.ItemContainerStyle>
        <Style TargetType="ComboBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Stretch" />
            <Setter Property="Background">
                <Setter.Value>
                    <SolidColorBrush Color="{Binding}" />
                </Setter.Value>
            </Setter>
        </Style>
    </ComboBox.ItemContainerStyle>
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}" />
        </DataTemplate>
    </ComboBox.ItemTemplate>

</ComboBox>

private void CbFarbe(object sender, RoutedEventArgs e)
{
    List<System.Windows.Media.Color> colors = new List<System.Windows.Media.Color>
            {
               System.Windows.Media.Colors.Blue,
               System.Windows.Media.Colors.Green,
               System.Windows.Media.Colors.LightBlue,
               System.Windows.Media.Colors.Black,
               System.Windows.Media.Colors.White,
               System.Windows.Media.Colors.Gray
            };

    var comboBox = sender as ComboBox;

    comboBox.ItemsSource = colors;

    comboBox.SelectedIndex = 1;

}

Upvotes: 1

Related Questions