CODEWITHSUNDEEP
c#wpfxaml
user11537642
user11537642

Reputation:

Changing Button Color using Listbox

I need to change background color of Button using ListBox. I have 3 ListBoxItems for 3 colors ( green, yellow and red). I am not sure how to do this. Any help will be greatly appreciated.

<StackPanel Grid.Column="1" Grid.Row="3">
  <ToggleButton Height="50" Content="Change!" Name="button">
   </ToggleButton>
    <Popup  IsOpen="{Binding IsChecked, ElementName=button}"   StaysOpen="False">
     <Border Background="LightYellow">
       <ListBox>
        <ListBoxItem>Green</ListBoxItem>
         <ListBoxItem>Yellow</ListBoxItem>
        <ListBoxItem>Red</ListBoxItem>
      </ListBox>    
    </Border>
  </Popup>
</StackPanel>

Upvotes: 1

Views: 350

Answers (5)

Avinash Reddy
Avinash Reddy

Reputation: 937

You can also do something like this with DataTrigger

<StackPanel Grid.Row="2">
            <Popup IsOpen="{Binding IsChecked, ElementName=button}"  StaysOpen="False">
                <Border Background="LightYellow">
                    <ListBox x:Name="ColorPicker" >
                        <ListBoxItem>Green</ListBoxItem>
                        <ListBoxItem>Yellow</ListBoxItem>
                        <ListBoxItem>Red</ListBoxItem>
                    </ListBox>
                </Border>
            </Popup>
            <ToggleButton Name="button"
                  Height="50">
                <TextBlock Text="Change!" >
                    <TextBlock.Style>
                        <Style TargetType="TextBlock">
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding ElementName=ColorPicker,Path=SelectedIndex}"  Value="0">
                                    <Setter Property="Background" Value="Green"></Setter>
                                </DataTrigger>
                                <DataTrigger Binding="{Binding ElementName=ColorPicker,Path=SelectedItem}"  Value="1">
                                    <Setter Property="Background" Value="Yellow"></Setter>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </TextBlock.Style>

                </TextBlock>

            </ToggleButton>
        </StackPanel>

Upvotes: 0

Muthukumar K
Muthukumar K

Reputation: 331

Use SelectionChanged event handler in ListBox control as like below,

    private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        var listBoxItem = ((sender as ListBox).SelectedItem as ListBoxItem);
        button.Background = (SolidColorBrush)new BrushConverter().ConvertFromString(listBoxItem.Content.ToString());
    }

Upvotes: 0

Charles May
Charles May

Reputation: 1763

Here's a solution that uses no code-behind. It binds with the listbox. It shows better without the popup as you will have to remove focus from the button to see the change with the popup. 

   <StackPanel Grid.Column="1" Grid.Row="3">
        <ToggleButton  Height="50" Content="Change!" Name="button">
            <ToggleButton.Background>
                <Binding ElementName="lb" Path="SelectedItem.Content" />
            </ToggleButton.Background>
        </ToggleButton>
        <Popup  IsOpen="{Binding IsChecked, ElementName=button}"   StaysOpen="False">
            <Border Background="LightYellow">
                <ListBox Name="lb" >
                    <ListBoxItem>Green</ListBoxItem>
                    <ListBoxItem>Yellow</ListBoxItem>
                    <ListBoxItem>Red</ListBoxItem>
                </ListBox>
            </Border>
        </Popup>
    </StackPanel>

Remove the <Popup IsOpen="{Binding IsChecked, ElementName=button}" StaysOpen="False"> and </Popup> lines which will put the listbox directly under the button. This will show the color change immediately.

Upvotes: 3

yawnobleix
yawnobleix

Reputation: 1342

Here is my solution using a Converter. The converter will take receive the string value and then return a colour, see below.

public class StringToColorConverter : IValueConverter
{

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var listItem = value as ListBoxItem;
        if (listItem != null)
        {
            var text = listItem.Content;
            switch (text)
            {
                case "Green":
                    return new SolidColorBrush(Colors.Green);
                case "Yellow":
                    return new SolidColorBrush(Colors.Yellow);
                case "Red":
                    return new SolidColorBrush(Colors.Red);
            }
        }
        return new SolidColorBrush(Colors.Transparent);
    }

    public object ConvertBack(object value, Type targetType,
        object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

You made a mistake in your xaml because you cannot directly change the background of a togglebutton. Below is how to use the converter with your actual code. Please note it will only change the background of the textblock. to make the button look better Please see here

<StackPanel>
    <Popup IsOpen="{Binding IsChecked, ElementName=button}" StaysOpen="False">
        <Border Background="LightYellow">
            <ListBox x:Name="ColorPicker">
                <ListBoxItem>Green</ListBoxItem>
                <ListBoxItem>Yellow</ListBoxItem>
                <ListBoxItem>Red</ListBoxItem>
            </ListBox>
        </Border>
    </Popup>
    <ToggleButton Name="button"
                  Height="50"
                  >
        <TextBlock Text="Change!" Background="{Binding Source={x:Reference ColorPicker}, Path=SelectedValue, Converter={StaticResource StringToColorConverter}}"/>
    </ToggleButton>
</StackPanel>

Upvotes: 1

Hammas
Hammas

Reputation: 1214

Give your ListBox a name and attach an event handler SelectionChanged. 

<ToggleButton Height="50" Content="Change!" Name="button">
<ListBox x:Name="myListBx" SelectionChanged="MyListBx_OnSelectionChanged">
    <ListBoxItem>Green</ListBoxItem>
    <ListBoxItem>Yellow</ListBoxItem>
    <ListBoxItem>Red</ListBoxItem>
</ListBox>

Then on back end you can do something like this (Tested working) 

private void MyListBx_OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    string SelectedColor = (myListBx.SelectedItem as ListBoxItem).Content.ToString();

    switch (SelectedColor)
    {
        case "Yellow":
            button.Background = Brushes.Yellow;
            break;
        case "Green":
            button.Background = Brushes.Green;
            break;
        case "Pink":
            button.Background = Brushes.Pink;
            break;
    }
}

Upvotes: 1

Related Questions