none
How to change the Background property of a button dynamically?

    Question

  • Hello,

     I have a Button whose  Background property I have to change dynamically. This is the XAML code for the Button.

    <Button Margin="0,0,122,13" Content="Cancel" HorizontalAlignment="Right" Width="75" Height="24" VerticalAlignment="Bottom" Name="CancelBtn" Click="CancelBtn_Click">
                    <Button.Background>
                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                            <GradientStop Color="#FFF9F2A1" Offset="0"/>
                            <GradientStop Color="#FFEBEBEB" Offset="0.5"/>
                            <GradientStop Color="#FFDDDDDD" Offset="0.5"/>
                            <GradientStop Color="#FFF1E432" Offset="1"/>
                        </LinearGradientBrush>
                    </Button.Background>
                </Button>

    Now I want to change the Background property during runtime. How should I do this?

    -Uday
    Monday, June 15, 2009 8:22 PM

Answers

  • Define the x:Name property, and in the code behind, set the Background manually by using:

    CancelBtn.Background = new Brushes.Blue;

    or something like that.
    David Morton - http://blog.davemorton.net/ - @davidmmorton - ForumsBrowser, a WPF Forums Client
    • Proposed as answer by LiangTao Tuesday, June 16, 2009 12:24 AM
    • Marked as answer by Hua Chen Monday, June 22, 2009 10:19 AM
    Monday, June 15, 2009 8:24 PM
  • You can define what you want to change your background to in the resources section
    and in the click handler of the button, set the background. If this in not what you want to do
    then you can also use the DynamicResource binding like:
    Background={DynamicResource ...}

        <Window.Resources>
            <LinearGradientBrush x:Key="staticLGB" EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="#FFF9F2A1" Offset="0"/>
                <GradientStop Color="#FFEBEBEB" Offset="0.5"/>
                <GradientStop Color="#FFDDDDDD" Offset="0.5"/>
                <GradientStop Color="#FFF1E432" Offset="1"/>
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="dynamicLGB" EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="#FFF9F2A1" Offset="1"/>
                <GradientStop Color="#FFEBEBEB" Offset="0.5"/>
                <GradientStop Color="#FFDDDDDD" Offset="0.5"/>
                <GradientStop Color="#FFF1E432" Offset="0"/>
            </LinearGradientBrush>
        </Window.Resources>
        <StackPanel>
            <Button Margin="0,0,122,13" Content="Cancel"
                    HorizontalAlignment="Right" Width="75" Height="24"
                    VerticalAlignment="Bottom" Name="CancelBtn"
                    Click="CancelBtn_Click"
                    Background="{StaticResource ResourceKey=staticLGB}">
            </Button>
        </StackPanel>

            private void CancelBtn_Click(object sender, RoutedEventArgs e)
            {
                CancelBtn.Background = (Brush)FindResource("dynamicLGB");
            }

    • Proposed as answer by LiangTao Tuesday, June 16, 2009 12:25 AM
    • Marked as answer by Hua Chen Monday, June 22, 2009 10:19 AM
    Monday, June 15, 2009 11:44 PM
  • Hey, maybe you can explain what it is you are trying to do a bit more clearly. Here is how I understand what you are trying to do:

    [1] You have a button with a LinearGradient background that is defined in the Resources section of your file.
    [2] You can set the Background of your button by binding to that resource
    [3] When you click the button, you want to change the background and disable the button at the same time

    Again, correct me if I am reading your intentions in error, but based on what I am assuming, you really do not
    need a dynamic bind unless you want to change the background color of the button on the fly. If you already know
    what the background will be when IsEnabled is True and when it is False, then the basic static bind is ok.

    So I have added another button which when clicked will re-enable the cancel button and reset its background to the original: (I changed the colors a bit so its easier to see the resources)

        <Window.Resources>
            <LinearGradientBrush x:Key="staticLGB" EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="Yellow" Offset="0"/>
                <GradientStop Color="White" Offset="0.5"/>
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="dynamicLGB" EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="Red" Offset="0"/>
                <GradientStop Color="White" Offset="1"/>
            </LinearGradientBrush>
        </Window.Resources>
        <StackPanel>
            <Button Margin="0,0,122,13" Content="Cancel"
                    HorizontalAlignment="Right" Width="75" Height="24"
                    VerticalAlignment="Bottom" Name="CancelBtn"
                    Click="CancelBtn_Click"
                    Background="{StaticResource ResourceKey=staticLGB}">
            </Button>
            <Button Name="enableBtn" Content="enable upper button" Click="enableBtn_Click" />
        </StackPanel>
            private void CancelBtn_Click(object sender, RoutedEventArgs e)
            {
                CancelBtn.Background = (Brush)FindResource("dynamicLGB");
                CancelBtn.IsEnabled = false;
            }
    
            private void enableBtn_Click(object sender, RoutedEventArgs e)
            {
                if (CancelBtn.IsEnabled == false)
                {
                    CancelBtn.IsEnabled = true;
                    CancelBtn.Background = (Brush)FindResource("staticLGB");
                }
            }
    Again, let me know if this is what you are going for or whether I am reading the problem incorrectly.
    ~sparky
    • Marked as answer by Hua Chen Monday, June 22, 2009 10:18 AM
    Tuesday, June 16, 2009 11:19 PM

All replies

  • Define the x:Name property, and in the code behind, set the Background manually by using:

    CancelBtn.Background = new Brushes.Blue;

    or something like that.
    David Morton - http://blog.davemorton.net/ - @davidmmorton - ForumsBrowser, a WPF Forums Client
    • Proposed as answer by LiangTao Tuesday, June 16, 2009 12:24 AM
    • Marked as answer by Hua Chen Monday, June 22, 2009 10:19 AM
    Monday, June 15, 2009 8:24 PM
  • You can define what you want to change your background to in the resources section
    and in the click handler of the button, set the background. If this in not what you want to do
    then you can also use the DynamicResource binding like:
    Background={DynamicResource ...}

        <Window.Resources>
            <LinearGradientBrush x:Key="staticLGB" EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="#FFF9F2A1" Offset="0"/>
                <GradientStop Color="#FFEBEBEB" Offset="0.5"/>
                <GradientStop Color="#FFDDDDDD" Offset="0.5"/>
                <GradientStop Color="#FFF1E432" Offset="1"/>
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="dynamicLGB" EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="#FFF9F2A1" Offset="1"/>
                <GradientStop Color="#FFEBEBEB" Offset="0.5"/>
                <GradientStop Color="#FFDDDDDD" Offset="0.5"/>
                <GradientStop Color="#FFF1E432" Offset="0"/>
            </LinearGradientBrush>
        </Window.Resources>
        <StackPanel>
            <Button Margin="0,0,122,13" Content="Cancel"
                    HorizontalAlignment="Right" Width="75" Height="24"
                    VerticalAlignment="Bottom" Name="CancelBtn"
                    Click="CancelBtn_Click"
                    Background="{StaticResource ResourceKey=staticLGB}">
            </Button>
        </StackPanel>

            private void CancelBtn_Click(object sender, RoutedEventArgs e)
            {
                CancelBtn.Background = (Brush)FindResource("dynamicLGB");
            }

    • Proposed as answer by LiangTao Tuesday, June 16, 2009 12:25 AM
    • Marked as answer by Hua Chen Monday, June 22, 2009 10:19 AM
    Monday, June 15, 2009 11:44 PM
  • hi sparky,

               I tried what you have suggested. Also, I tried the Triggers. But nothing worked. As soon as I disable the Button [IsEnabled=False], the button appears to be disabled without any color. Here is my code:

    <Window.Resources>
           <LinearGradientBrush x:Key="dynamicLGB" EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="#FFF9F2A1" Offset="1"/>
                <GradientStop Color="#FFEBEBEB" Offset="0.5"/>
                <GradientStop Color="#FFDDDDDD" Offset="0.5"/>
                <GradientStop Color="#FFF1E432" Offset="0"/>
            </LinearGradientBrush>
           <LinearGradientBrush x:Key="staticLGB" EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="#FFF9F2A1" Offset="0"/>
                <GradientStop Color="#FFEBEBEB" Offset="0.5"/>
                <GradientStop Color="#FFDDDDDD" Offset="0.5"/>
                <GradientStop Color="#FFF1E432" Offset="1"/>
            </LinearGradientBrush>
        </Window.Resources>
    ................
    ...............
    <Button Background="{StaticResource ResourceKey=staticLGB}" Margin="0,0,27,72" Content="Table 113" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="124" Height="52" Click="Sec1_Table_Click" Name="Table113" />
    ................
    ................
    Private Sub Sec1_Table_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs)
            b = CType(sender, Button)
            s = b.Content
            tableID = tableID + s.Substring(s.Length - 3)
            b.IsEnabled = False
            b.Background = Me.FindResource("dynamicLGB")
     End Sub


    Please help me out with this. What am I doing wrong? Or am I missing anything?

    -Uday
    Tuesday, June 16, 2009 4:04 PM
  • just an update, I just found that I can set the foreground property but not the background. So, I think the "IsEnabled" property is setting the BackGround and I am not able to override it. This is just a theory. Please crct me if I am wrong
    Tuesday, June 16, 2009 4:19 PM
  • Hey, maybe you can explain what it is you are trying to do a bit more clearly. Here is how I understand what you are trying to do:

    [1] You have a button with a LinearGradient background that is defined in the Resources section of your file.
    [2] You can set the Background of your button by binding to that resource
    [3] When you click the button, you want to change the background and disable the button at the same time

    Again, correct me if I am reading your intentions in error, but based on what I am assuming, you really do not
    need a dynamic bind unless you want to change the background color of the button on the fly. If you already know
    what the background will be when IsEnabled is True and when it is False, then the basic static bind is ok.

    So I have added another button which when clicked will re-enable the cancel button and reset its background to the original: (I changed the colors a bit so its easier to see the resources)

        <Window.Resources>
            <LinearGradientBrush x:Key="staticLGB" EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="Yellow" Offset="0"/>
                <GradientStop Color="White" Offset="0.5"/>
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="dynamicLGB" EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="Red" Offset="0"/>
                <GradientStop Color="White" Offset="1"/>
            </LinearGradientBrush>
        </Window.Resources>
        <StackPanel>
            <Button Margin="0,0,122,13" Content="Cancel"
                    HorizontalAlignment="Right" Width="75" Height="24"
                    VerticalAlignment="Bottom" Name="CancelBtn"
                    Click="CancelBtn_Click"
                    Background="{StaticResource ResourceKey=staticLGB}">
            </Button>
            <Button Name="enableBtn" Content="enable upper button" Click="enableBtn_Click" />
        </StackPanel>
            private void CancelBtn_Click(object sender, RoutedEventArgs e)
            {
                CancelBtn.Background = (Brush)FindResource("dynamicLGB");
                CancelBtn.IsEnabled = false;
            }
    
            private void enableBtn_Click(object sender, RoutedEventArgs e)
            {
                if (CancelBtn.IsEnabled == false)
                {
                    CancelBtn.IsEnabled = true;
                    CancelBtn.Background = (Brush)FindResource("staticLGB");
                }
            }
    Again, let me know if this is what you are going for or whether I am reading the problem incorrectly.
    ~sparky
    • Marked as answer by Hua Chen Monday, June 22, 2009 10:18 AM
    Tuesday, June 16, 2009 11:19 PM
  • sorry I haven't replied yet, I have been out of it for a while
    unless you already have it figured out, I am thinking that you may need to actually go in and change the template of the button
    and change the IsEnabled property in the template. So you can make a specific template for the button that is triggered when the
    IsEnabled is set to False. Let me know if you got it figured out or not. I will try to play with it a bit later today or tomorrow. Again, sorry for not responding sooner.
    Friday, June 26, 2009 12:28 AM