Search code examples
c#wpfvisual-studioxamldata-binding

WPF sliders to change button colors on click


I am doing a project where I have to change button colors based on sliders in WPF. This is my XAML design.

XAML file

So, I have made 64 buttons, and I have tried implementing multiple options, and none worked for me.

I have this xaml code:

<Grid Grid.Column="0" Grid.RowSpan="4" Grid.ColumnSpan="4" HorizontalAlignment="Left" Height="790" Margin="0,10,0,0" Grid.Row="0" VerticalAlignment="Top" Width="800">
            <Grid Margin="230,114,230,346" AutomationProperties.Name="ledMatrix" Tag="ledMatrix" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

<Button Grid.Column="0" Grid.Row="0" Height="40" Width="40" Command="{Binding LEDBtn}" Background="#FFAAAAAA" Tag="LED00" Click="changeLedIndicatiorColor" x:Name="LEDButton"/>
                <Button Grid.Column="1" Grid.Row="0" Height="40" Width="40" Command="{Binding LEDBtn}" Background="#FFAAAAAA" Tag="LED01"/>
                <Button Grid.Column="2" Grid.Row="0" Height="40" Width="40" Command="{Binding LEDBtn}" Background="#FFAAAAAA" Tag="LED02"/>
                <Button Grid.Column="3" Grid.Row="0" Height="40" Width="40" Command="{Binding LEDBtn}" Background="#FFAAAAAA" Tag="LED03"/>
                <Button Grid.Column="4" Grid.Row="0" Height="40" Width="40" Command="{Binding LEDBtn}" Background="#FFAAAAAA" Tag="LED04"/>
                <Button Grid.Column="5" Grid.Row="0" Height="40" Width="40" Command="{Binding LEDBtn}" Background="#FFAAAAAA" Tag="LED05"/>
                <Button Grid.Column="6" Grid.Row="0" Height="40" Width="40" Command="{Binding LEDBtn}" Background="#FFAAAAAA" Tag="LED06"/>
                <Button Grid.Column="7" Grid.Row="0" Height="40" Width="40" Command="{Binding LEDBtn}" Background="#FFAAAAAA" Tag="LED07"/>

and sliders:

<Grid Margin="230,480,230,170">
                <Slider x:Name="SeekR" Margin="0,0,0,120" Tag="seekR" Maximum="255" Background="Red" ></Slider>
                <Slider x:Name="SeekG" Margin="0,50,0,70" Tag="seekG" Maximum="255" Background="Green"></Slider>
                <Slider x:Name="SeekB" Margin="0,100,0,20" Tag="seekB" Maximum="255" Background="Blue"></Slider>
            </Grid>

I have tried placing this in my xaml.cs file :

public void changeColor()
        {
            byte rr = (byte)SeekR.Value;
            byte gg = (byte)SeekG.Value;
            byte bb = (byte)SeekB.Value;
            Color cc = Color.FromRgb(rr, gg, bb); //Create object of Color class.
            SolidColorBrush colorBrush = new SolidColorBrush(cc); //Creating object of SolidColorBruch class.
            LEDButton.Background = colorBrush; //Setting background of stack panel.
        }
        private void changeLedIndicatiorColor(object sender, RoutedEventArgs e)
        {
            changeColor();
        }

But from this code, I have to name all the buttons differently butI want to have the same binding for all buttons and try to connect it all together, so for example I would like to set color by sliders and when I click the button color would change. Then, I can change the color, and make other buttons that different color.


Solution

  • Refactor ChangeColor to accept a Button, the button to change the color for:

    private void ChangeLedIndicatiorColor_OnClick(object sender, RoutedEventArgs e)
    {
      ChangeColor(sender as Button);
    }
    
    public void ChangeColor(Button button)
    {
      byte rr = (byte)SeekR.Value;
      byte gg = (byte)SeekG.Value;
      byte bb = (byte)SeekB.Value;
      Color cc = Color.FromRgb(rr, gg, bb); 
      SolidColorBrush colorBrush = new SolidColorBrush(cc); 
    
      button.Background = colorBrush;
    }
    

    Then register the ChangeLedIndicatiorColor event handler for each Button.Click:

    ...
    
    <Button Click="ChangeLedIndicatiorColor" />
    <Button Click="ChangeLedIndicatiorColor" />
    <Button Click="ChangeLedIndicatiorColor" />
    ...