New to WPF, how would I create these colored bars in my form?

I'm trying to ditch Windows Forms, and learn to use WPF professionally from now on. Pictured above is a form done in Windows Forms that I'd like to recreate in WPF.

Here is the XAML I have so far:

<Window x:Class="PizzaSoftware.UI.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="297" Width="466" >
    <Grid ShowGridLines="True">
        <开发者_开发百科Grid.ColumnDefinitions>
            <ColumnDefinition Width=".20*"/>
            <ColumnDefinition />
            <ColumnDefinition Width=".20*"/>    
        </Grid.ColumnDefinitions>     
        <Rectangle Grid.Column="0">
            <Backcolor?
        </Rectangle>
    </Grid>
</Window>

Is this even the right approach, I mean using a Rectangle. In my Windows Forms example, I used a Panel and gave it a .BackColor property.

What's the WPF way to achieve this?

Thank you.

Yes, your approach is just fine. Set the background color with the Fill property:

            <Rectangle Grid.Column="0" Fill="Orange" />
            <Rectangle Grid.Column="2" Fill="Orange" />

<Rectangle Grid.Column="0" 
           VerticalAlignment="Stretch" 
           HorizontalAlignment="Stretch" 
           Fill="Orange" />

Set the background of the window to your orange color. Then set the background of the grid to white, set the width of the grid so that it leaves space on either side, and set the grids HorizontalAlignment to center.

<Windows ....
    Background="Orange>
  <Grid Background="White" HorizontalAlignment="Center" Width="300">
  ...
  </Grid>
</Window>

I'd skip the rectangle and set the background color on the grid itself, then set colors on components within to grid.

<Grid Background="Orange">

You can set the Background property of your grid to Orange and then add your control in the middle column and Set its Background property to White. Here is a sample code:

<Window x:Class="PizzaSoftware.UI.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="297" Width="466" 
        Height="297"
        Width="466">
    <Grid ShowGridLines="True" Background="Orange">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width=".20*"/>
            <ColumnDefinition />
            <ColumnDefinition Width=".20*" />
        </Grid.ColumnDefinitions>

        <!--Control with white background in second column-->
        <GroupBox Background="White" Grid.Column="1">
            <!-- Groupbox content here-->
        </GroupBox>
    </Grid>
</Window>