WPF的新手，我如何在表单中创建这些彩色条？

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.

我试图抛弃Windows窗体，并从现在开始学习如何专业地使用WPF。上图是在Windows窗体中完成的一个表单，我想在WPF中重新创建。

Here is the XAML I have so far:

这是我到目前为止的XAML：

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

这是否是正确的方法，我的意思是使用矩形。在我的Windows窗体示例中，我使用了Panel并为其提供了.BackColor属性。

What's the WPF way to achieve this?

什么是WPF实现这一目标的方式？

Thank you.

谢谢。

5 个解决方案

#1

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

是的，你的方法很好。使用Fill属性设置背景颜色：

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

#2

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

#3

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.

将窗口的背景设置为橙色。然后将网格的背景设置为白色，设置网格的宽度，使其在任一侧留下空间，并将网格HorizontalAlignment设置为居中。

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

#4

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

#5

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:

您可以将网格的Background属性设置为Orange，然后在中间列中添加控件并将其Background属性设置为White。这是一个示例代码：

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

#1