As best I can tell, you visually have two 10x10 squares inside a border. I think you are saying that you want to fill in the area inside the border, but not the two squares. As such my previous comments are relevant. If all three components, the squares, the border and the fill are being drawn by the widget, then the widget is responsible. Your choices are 1) Whenever you change the fill color, redraw the squares, 2) only draw in the fill color inside the border where the squares are not.
If this were your screen, the F (Fill) could be painted in as 5 rectangles.
This situation exists because you are creating a custom widget. If on the other hand, you had two “square” widgets on a simple widget which was placed behind the two squares, you could change the simple widget’s background color and the result would be what you want. What might not be obvious is that in this situation the same type of calculation would have to be made. The background widget would emit a draw event which would be clipped by the photon kernel to take account of the foreground square widgets.