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

April 8, 2014 Leave a comment

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
 

Advertisement

Filed under Layout Tagged with , , ,

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

May 2, 2013 1 Comment

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

Filed under Controls Tagged with , , , , ,

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

April 30, 2013 1 Comment

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

Filed under Controls Tagged with , , , ,

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

November 2, 2012 2 Comments

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">

Filed under Events Tagged with , , , , , ,

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

November 29, 2011 1 Comment

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.

Filed under Controls Tagged with , , , , ,

#438 – Border Element Can Have a Background

November 28, 2011 Leave a comment

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>

Filed under Controls Tagged with , , ,

#207 – Setting a Control’s Background Color

February 4, 2011 1 Comment

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:

Filed under Controls Tagged with , , , , ,

#192 – Setting a Control’s Properties Using Blend

January 20, 2011 Leave a comment

You can set a control’s properties in either Blend or Visual Studio.  To set properties for a control from Blend, do the following:

Open the window containing the control.  Left-click to select the control.

Now make sure that the Properties icon on the Properties panel at the right side of the IDE is selected.

With the Properties icon selected, you can see all of the properties of the control that you selected, organized into logical groups.  You can view or edit the control’s properties from this panel.

For example, to change the button’s Background property, you can use the color editor in the Brushes section.

By default, Blend will create a background that is a gradient, rather than a solid color.

As you change the color in this editor, the button’s color will change in the designer.

You can also see the updated XAML, showing the linear gradient.

Filed under Blend Tagged with , , , ,