Изменение цвета кнопки с помощью списка

Question

Мне нужно изменить цвет фона кнопки, используя ListBox. У меня есть 3 ListBoxItems для 3 цветов (зеленый, желтый и красный). Я не уверен, как это сделать. Любая помощь будет принята с благодарностью.

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

Answer 1

Вот решение, которое не использует код-позади.Связывается со списком.Лучше показывать без всплывающего окна, так как вам придется убрать фокус с кнопки, чтобы увидеть изменения во всплывающем окне.

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

Удалите строки <Popup IsOpen="{Binding IsChecked, ElementName=button}" StaysOpen="False"> и </Popup>, которые поместят список прямо под кнопкой.Это немедленно покажет изменение цвета.

Answer 2

Вот мое решение с использованием конвертера.Преобразователь получит строковое значение, а затем вернет цвет, см. Ниже.

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

Вы допустили ошибку в своем xaml, поскольку не можете напрямую изменить фон кнопки переключения.Ниже описано, как использовать конвертер с вашим реальным кодом.Обратите внимание, что это только изменит фон текстового блока.чтобы кнопка выглядела лучше см. здесь

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

Answer 3

Дайте вашему ListBox имя и присоедините обработчик событий 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>  

Затем на бэкэнде вы можете сделать что-то вроде этого (проверенная работа)

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

Answer 4

Вы также можете сделать что-то подобное с 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>

Answer 5

Использовать SelectionChanged обработчик событий в элементе управления ListBox, как показано ниже,

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