UMG - Bind Background Colors

Hi! It’s my frist time using UMG binding. I would like to know how can I bind one image color (Color and Opacity property) to another.
So when I change the color of one image the another one will change as well.
I am looking for this for a couple of hours and I could not find the answer.

Thanks!

image

Greetings and welcome to the realm of binding, along with all the accompanying vexations. I will make an effort to explain it as clearly as possible.

  1. To demonstrate I created a UMG widget with two images. These Images allow me to change the Color and Opacity under the Appearance tab, like you showed.

  2. If I want Image 1 to be the parent that controls the color; I want to select Image 2 and press Bind → Create Binding.

  3. I will now be moved into the function view for the binding. In here I simply drag in the Image 1 variable from the left hand side window and use the Get Color And Opacity node. I plug this into the Return Value, compile and save.
    bild

  4. If I now go back into the UMG widget and change color of Image 1, you will notice that it doesn’t change color of the Image 2. This is expected as the Binding will execute when the game starts.
    bild

  5. Starting the game, it looks like this:

I hope this all makes sense, and have a good rest of the day! :slight_smile:

Edit: Binding is executed every frame according to one source, it isn’t expensive but with many binds it can be. According to other sources it’s only executed whenever the data source changes.

The most simple way to otherwise have the color update for image 2 would be to do it this way:

Edit 2: Property Binding | Unreal Engine Documentation mentions the following:

One of the most useful aspects inside UMG is the ability to bind properties of your Widgets to Functions or Properties inside the Blueprint. By binding a property to a Function or Property Variable in your Blueprint, anytime that Function is called or Property is updated, it will be reflected in the Widget.

So, all in all, use binding if you want to! :slight_smile:

Thanks! It really worked.
Now I my oficially a happy forum user with my problem solved and my UI done. Thanks to you.
Nice and easy explanation you made.

Have a nice day!

I am glad you appreciate it!
I wish you a good rest of the day! :slight_smile: