Question

我创建了3个滑块。我需要能够根据滑块值更改画布的背景颜色。有人可以帮助我吗？我看起来很长很难找到方法，但似乎没什么用。这是我的滑码，

后端代码：

     /// <summary>
    /// On the click event of the GetColor() button we het the color code
    /// which sets with the help of slider control and display it in message box.
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void button1_Click(object sender, RoutedEventArgs e)
    {
        SolidColorBrush colorBrush = (SolidColorBrush)stackPanel1.Background;
        MessageBox.Show(colorBrush.Color.ToString());
    }

    /// <summary>
    /// This method is used to create color by taking values from
    /// slider one, two, three and then change the background color
    /// of stack panel.
    /// </summary>

    public void changeColor()
    {
        byte rr = (byte)slider1.Value; //Retriving values from slider1
        byte gg = (byte)slider2.Value; //Retriving values from slider2
        byte bb = (byte)slider3.Value; //Retriving values from slider3
        Color cc = Color.FromRgb(rr, gg, bb); //Create object of Color class.
        SolidColorBrush colorBrush = new SolidColorBrush(cc); //Creating object of SolidColorBruch class.
        stackPanel1.Background = colorBrush; //Setting background of stack panel.
    }

    /// <summary>
    /// This event is called when the window is first time loaded in memory
    /// And change the background of panel control.
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        changeColor();
    }

    /// <summary>
    /// This event is called whenever the value of slider1 control is changed.
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void slider1_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
    {
        changeColor();
    }

    /// <summary>
    /// This event is called whenever the value of slider2 control is changed.
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>

    private void slider2_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
    {
        changeColor();
    }

    /// <summary>
    /// This event is called whenever value of the slider3 control is changed.
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>

    private void slider3_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
    {
        changeColor();
    }

xaml中的滑块代码

<Grid>
    <StackPanel Height="135" HorizontalAlignment="Left" Margin="95,24,0,0" x:Name="stackPanel1" VerticalAlignment="Top" Width="300" />
    <Slider Height="23" HorizontalAlignment="Left" Margin="95,184,0,0" x:Name="slider1" VerticalAlignment="Top" Width="260" Maximum="255" SmallChange="1" TickPlacement="TopLeft" Value="0" ValueChanged="slider1_ValueChanged" Orientation="Horizontal" Background="Red" />
    <Slider Height="23" HorizontalAlignment="Left" Margin="95,229,0,0" x:Name="slider2" VerticalAlignment="Top" Width="260" TickPlacement="TopLeft" Maximum="255" Minimum="0" SmallChange="1" ValueChanged="slider2_ValueChanged" Background="Lime" />
    <Slider Height="23" HorizontalAlignment="Left" Margin="95,267,0,0" x:Name="slider3" VerticalAlignment="Top" Width="260" SmallChange="1" TickPlacement="TopLeft" Maximum="255" ValueChanged="slider3_ValueChanged" Background="Blue" />
    <TextBlock Height="23" HorizontalAlignment="Left" Margin="361,184,0,0" x:Name="textBlock1" Text="Red" VerticalAlignment="Top" Width="34" />
    <TextBlock Height="23" HorizontalAlignment="Left" Margin="361,229,0,0" x:Name="textBlock2" Text="Green" VerticalAlignment="Top" Width="34" />
    <TextBlock Height="23" HorizontalAlignment="Left" Margin="361,267,0,0" x:Name="textBlock3" Text="Blue" VerticalAlignment="Top" Width="34" />
    <Button Content="Get Color" Height="23" HorizontalAlignment="Left" Margin="378,288,0,0" x:Name="button1" VerticalAlignment="Top" Width="113" Click="button1_Click" />

Answer 1

要使用Slider的值绑定TextBlocks，我使用了行为。

以下是slider1

的一个示例

<Slider Height="23" HorizontalAlignment="Center" x:Name="slider1" VerticalAlignment="Center" Width="250" Maximum="255" SmallChange="1" ValueChanged="slider_ValueChanged" TickPlacement="TopLeft" Value="0" Orientation="Horizontal" Background="Red" Grid.Row="1" Margin="10">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="ValueChanged">
            <i:EventTrigger.Actions>
                <ei:ChangePropertyAction TargetObject="{Binding ElementName=textBlock1}" PropertyName="Text" Value="{Binding Value, ElementName=slider1}"/>
            </i:EventTrigger.Actions>
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Slider>

你已经有了一个方法GetColor（）来更新StackPanel背景。所以我使用了相同的。并将Slider的ValueChanged更改为单个事件（Slider_ValueChanged）

private void slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    GetColour();
}

public void GetColour()
{
    byte rr = (byte)slider1.Value;
    byte gg = (byte)slider2.Value;
    byte bb = (byte)slider3.Value;
    Color cc = Color.FromRgb(rr, gg, bb);
    SolidColorBrush colorBrush = new SolidColorBrush(cc);
    stackPanel1.Background = colorBrush;
    MyColour.Text = colorBrush.Color.ToString();
}

结束输出。

可以找到完整项目here

通过rgb滑块改变背景颜色？

1 个答案: