Button Color

[chandrakala]

Hi,

I want to color each line of button with different color based on some condition.How can i achieve this.
For example: say button width is 24,considering each line of button as 1 hour.If i want color first hour with red,3rd hour with orange how can i achieve this.

[Tina Stancheva]

Hi soni,

In order to implement such scenario with the RadButtons, you will need to create 24 different background brushes - one for each hour. Then you can change the Background property accordingly to your conditions. For example:

<UserControl.Resources>
    <LinearGradientBrush x:Key="24Background" StartPoint="0,0.5" EndPoint="1,0.5">
        <GradientStop Offset="0" Color="White" />
        <GradientStop Offset="0.084" Color="#FFFFEE00" />
        <GradientStop Offset="0.042" Color="#FFFF2900" />
        <GradientStop Offset="0.21" Color="#FF00FFAE" />
        <GradientStop Offset="0.121" Color="#FF6BFF00" />
        <GradientStop Offset="0.168" Color="#FF00FF39" />
        <GradientStop Offset="0.294" Color="#FF0039FF" />
        <GradientStop Offset="0.378" Color="#FF3C00FF" />
        <GradientStop Offset="0.462" Color="#FFA600FF" />
        <GradientStop Offset="0.546" Color="#FFFF009D" />
        <GradientStop Offset="0.63" Color="#FFFF0006" />
        <GradientStop Offset="0.714" Color="#FF194008" />
        <GradientStop Offset="0.756" Color="#FF11396F" />
        <GradientStop Offset="0.798" Color="#FF301365" />
        <GradientStop Offset="0.84" Color="#FF00FF45" />
        <GradientStop Offset="0.882" Color="#FFC0BB2F" />
        <GradientStop Offset="0.924" Color="#FF0F6D7C" />
        <GradientStop Offset="0.966" Color="#FF8C0E9D" />
        <GradientStop Offset="0.672" Color="#FF5E640F" />
        <GradientStop Offset="0.588" Color="#FFFF0063" />
        <GradientStop Offset="0.504" Color="#FFFF00EE" />
        <GradientStop Offset="0.42" Color="#FF5300FF" />
        <GradientStop Offset="0.336" Color="#FF0201FF" />
        <GradientStop Offset="0.252" Color="#FF00C5FF" />
        <GradientStop Offset="1" Color="#FF5E0808" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="5thHour" StartPoint="0,0.5" EndPoint="1,0.5">
        <GradientStop Offset="0" Color="White" />
        <GradientStop Offset="0.084" Color="#FFFFEE00" />
        <GradientStop Offset="0.042" Color="#FFFF2900" />
        <GradientStop Offset="0.21" Color="White" />
        <GradientStop Offset="0.121" Color="#FF6BFF00" />
        <GradientStop Offset="0.168" Color="#FF00FF39" />
    </LinearGradientBrush>
</UserControl.Resources>
<StackPanel x:Name="LayoutRoot" Background="White">
    <telerik:RadButton x:Name="clockButton"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Top"
                        Background="White"
                        Content="Button" />
</StackPanel>

private void 5thHour(object sender, RoutedEventArgs e)
{
    clockButton.Background = this.Resources["5thHour"] as LinearGradientBrush;
}

private void 24thHour(object sender, RoutedEventArgs e)
{
    clockButton.Background = this.Resources["24Background"] as LinearGradientBrush;
}

Greetings,
Tina Stancheva
the Telerik team