29

How do you color a rectangle in C# that has been declared in XAML in WPF?

There is a rectangle control in XAML. In my C# code there are times in which it would be nice to fill the background color. How does one do this?

9 Answers 9

39

For all the lazy programmers, the .net color enums:

myRectangle.Fill = new SolidColorBrush(System.Windows.Media.Colors.AliceBlue); 
Sign up to request clarification or add additional context in comments.

2 Comments

Even better: myRectangle.Fill = System.Windows.Media.Brushes.AliceBlue;
I got here while searching for this answer related to UWP / UWA (Universal Windows Platform). FYI - The Colors are now found in : Windows.UI.Colors.AliceBlue
14

Assuming you named your rectangle myRectangle, you can color it using the Fill property:

myRectangle.Height = 200;
myRectangle.Width = 200;
myRectangle.Stroke = new SolidColorBrush(Color.FromRgb(0, 111, 0));
myRectangle.Fill = new SolidColorBrush(Color.FromRgb(0, 111, 111));

2 Comments

The rectangle has a text block nested inside. The Fill works to color the whole rectangle but it also blocks out the text. On the other hand, using the stroke first colors the rectangle and I can modify the enclosed test but the rectangle does not have a boarder. Can you advise?
Stroke is for the border of the rectangle and fill is for the interior of the rectangle. If you have a textblock inside the rectangle, how do you fill the rectangle color background without erasing the textblock?
11

Rectangle Colour in XAML for Windows Phone:

<Rectangle Width="480" Height="200">
    <Rectangle.Fill>
        <SolidColorBrush Color="Azure" />
    </Rectangle.Fill>
</Rectangle>

1 Comment

This is using XAML not C#
9

Wpf binding would be able to do this without having to reference the control by name in code:

<Rectangle Width="480" Height="200" Fill="{Binding Path=FillColor}"/>

Then put a property on your DataContext class, assuming you have implemented INotifyPropertyChanged:

public Brush FillColor  
{   
  get { return this.fillColor; }   
  set
  {
     this.fillColor = value;
     if (PropertyChanged != null)
     {
       PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
     }   
  }
}

Then you can assign your required color to the FillColor property and the UI will update itself.

Comments

7
Rectangle blueRectangle = new Rectangle();
// Fill rectangle with blue color
blueRectangle.Fill = blueBrush;

2 Comments

The rectangle has a text block nested inside. The Fill works to color the whole rectangle but it also blocks out the text. On the other hand, using the stroke first colors the rectangle and I can modify the enclosed test but the rectangle does not have a boarder. Can you advise?
Stroke is for the border of the rectangle and fill is for the interior of the rectangle. If you have a textblock inside the rectangle, how do you fill the rectangle color background without erasing the textblock?
5

Set the x:Name property in your XAML to what you want to refer to the rectangle as in your c# code. Then, you can access all of the properties of the rectangle in code, such as whateverYouNamedIt.Fill

1 Comment

The rectangle has a text block nested inside. The Fill works to color the whole rectangle but it also blocks out the text. On the other hand, using the stroke first colors the rectangle and I can modify the enclosed test but the rectangle does not have a boarder. Can you advise?
0

For all of the people searching for this in 2019, I'm using WPF and you just add this property to your rectangle:

Your Rectangle should look something like this:

    <Rectangle HorizontalAlignment="Left" Height="75" Stroke="Black" StrokeThickness="4" VerticalAlignment="Top" Width="792"/>

Right before the forward slash, add in Fill="YourColorHere", for example, I'm using this: Fill="AliceBlue". IntelliSense should give you a list of colors to scroll through.

Comments

0

Here's a more detailed list of steps for the absolute beginner (i.e. me):

  1. Declare a name in your rectangle's XAML using the x:name="myRectangle" property
  2. Declare an event handler in your rectangle's XAML using the [event]="My_Event" property (i.e. MouseDown="My_Event")
  3. If using Visual Studio, right-click your "My_Event" text, and click Go to Definition. You'll be redirected to the .cs file where an event handler method will be generated for you. Something like: private void My_Event(object sender, DragEventArgs e) { }. Otherwise you can add it manually in the .cs file
  4. Taking from diogoa's solution in this thread: myRectangle.Fill = Brushes.[color] (i.e. Brushes.AliceBlue)

Comments

-1
myRectangle.Fill = Brushes.AliceBlue;

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.