#1,046 – Setting the Background Color of a Cell in a Grid

There are several different ways to set the background color of a cell within a Grid.  They include:

  • Setting the Background property of the element within a cell (e.g. a Label)
  • Including a Rectangle in the same cell as another element and setting its Fill property
  • Using a Border element and setting its Background property
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Label Grid.Row="0" Grid.Column="0" Content="Larry" Margin="5" Background="Lavender"/>
        <Label Grid.Row="0" Grid.Column="1" Content="Moe" Margin="5" />

        <Rectangle Grid.Row="1" Grid.Column="0" Fill="Bisque"/>
        <CheckBox Grid.Row="1" Grid.Column="0" Margin="5" Content="Nose Tweak"
                  VerticalAlignment="Center"/>

        <Border Grid.Row="1" Grid.Column="1"  Background="MediumSpringGreen"
                CornerRadius="5" Margin="5">
            <Button Grid.Row="1" Grid.Column="1" Margin="5" Content="Do Eye Poke"
                    VerticalAlignment="Center"/>
        </Border>
    </Grid>

1046-001
 

#811 – Setting Color Values in Code Based on System Colors

You can set the Foreground or Background properties of a control to a brush that will render the control using one of the predefined system colors.  The SystemColors class contains a number of static SolidColorBrush objects representing brushes that match the system colors.

811-001

        <Label Name="lblMA" Content="Margaret Atwood" HorizontalAlignment="Center"
               Padding="20,10" Margin="10"
               Background="LightPink"/>
        <Button Content="Change Color" HorizontalAlignment="Center"
                Padding="10,5" Click="Button_Click"/>

 

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            // Set to one of the predefined brushes that map
            // to the system colors
            lblMA.Background = SystemColors.ActiveCaptionBrush;
        }

811-002
811-003

#809 – You Can Use a Brush for a Control’s Background

A control’s Background property dictates how the background of the control is rendered.  It is set to an instance of a Brush object.  The two most common types of brushes are solid color brushes (SolidColorBrush) and brushes painted with a color gradient (GradientBrush).

You can use the shortcut of specifying one of the predefined colors for the value of the Background property.  This will cause the background to be rendered with a predefined SolidColorBrush of the specified color.

    <StackPanel>
        <Label Content="Hemingway" HorizontalAlignment="Center"
               Background="LightBlue"/>
        <Label Content="Fitzgerald" HorizontalAlignment="Center"
               Background="Thistle"/>
    </StackPanel>

809-001
You can also explicitly define a brush. The example below uses a LinearGradientBrush that ranges between two colors.

        <Label Content="Hemingway and Fitgerald" HorizontalAlignment="Center"
               Padding="20,10" Margin="10">
            <Label.Background>
                <LinearGradientBrush>
                    <GradientStop Color="LightBlue" Offset="0.0"/>
                    <GradientStop Color="Thistle" Offset="1.0"/>
                </LinearGradientBrush>
            </Label.Background>
        </Label>

809-002

#682 – Panel Elements Only Fire Mouse Events When Background Is Set

If you create an element derived from Panel, like Canvas, and wire up any of the mouse-related events, you’ll notice that you don’t see your events unless you’ve set the Background property of the Panel.  You will, however, see the routed events when a child element of the canvas originates the event.

In the example below, we don’t see MouseMove event on the Canvas unless we’re moving the mouse over one of the child Buttons.

    <Canvas MouseMove="Canvas_MouseMove">
        <Button Content="Preston Sturges" MouseMove="Button_MouseMove"
                Canvas.Left="10" Canvas.Top="10"/>
        <Button Content="John Ford" MouseMove="Button_MouseMove"
                Canvas.Left="10" Canvas.Bottom="10"/>
        <Button Content="Michael Curtiz" MouseMove="Button_MouseMove"
                Canvas.Right="10" Canvas.Top="10"/>
    </Canvas>

If you do want to see mouse events on a Panel, you need to explicitly set its Background property.  If you don’t want a background color, you can just set the property to Transparent.

    <Canvas MouseMove="Canvas_MouseMove" Background="Transparent">

#439 – Using a DropShadow with a Border, part II

I described earlier how you can use two sibling Border elements to end up with the effect of a Border with a DropShadow.  We did this because specifying a DropShadowEffect for a Border will lead to all of the child elements contained in the Border getting the same drop shadow.

A cleaner way to avoid the drop shadows on the child elements is to just specify a value for the Background property of the original parent Border, so that it becomes opaque.

            <Border Margin="10" BorderBrush="DarkGray" BorderThickness="1" CornerRadius="4"
                    Background="{x:Static SystemColors.ControlLightLightBrush}">
            	<Border.Effect>
            		<DropShadowEffect/>
            	</Border.Effect>
                <StackPanel Orientation="Vertical" Margin="5" Visibility="Visible">
                    <Label Content="Rounded corners are everywhere"/>
                    <Button Content="Push Me" Padding="30,5" Margin="5" HorizontalAlignment="Center"/>
                </StackPanel>
            </Border>


You can get some nice effects by using the combination of a gradient fill for the background along with a drop shadow.

#438 – Border Element Can Have a Background

You can use the Background property to specify a background color (or brush) for everything within a Border.

            <Border Margin="10" BorderBrush="DarkGray" BorderThickness="1" CornerRadius="4">
            	<Border.Background>
            		<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
            			<GradientStop Color="#FF93C0D4" Offset="0"/>
            			<GradientStop Color="#FFCACACA" Offset="1"/>
            		</LinearGradientBrush>
            	</Border.Background>
                <StackPanel Orientation="Vertical" Margin="5" Visibility="Visible">
                    <Label Content="Rounded corners are all around us"/>
                    <Button Content="Push Me" Padding="30,5" Margin="5" HorizontalAlignment="Center"/>
                </StackPanel>
            </Border>

#207 – Setting a Control’s Background Color

The Control class is a base class for all user interface elements that a user interacts with.  (This includes the Window class).

Control includes a Background property that you can set to cause the background of the control to be filled in, or colored.

Background’s type is System.Windows.Media.Brush, which means that you specify not just a background color, but an instance of a Brush object.

There are several kinds of brushes, but the most common is the SolidColorBrush, which allows setting the background to a solid color.

In the example below, we set the background color of a Window to the color PowderBlue.

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Background>
        <SolidColorBrush Color="PowderBlue"/>
    </Window.Background>
    <Grid>
        <Label Content="Hi!"/>
    </Grid>
</Window>

Here’s the result:

Here are some other examples of setting the Background property for various controls: