如何在WPF中创建此ListBox ItemTemplate？

Question

我有一个ListBox，它包含一个带Grid的简单ItemTemplate。而我正在尝试为ListBox中的Binding接收的每个Item创建类似的东西：

我没有使用WPF进行设计的经验，我不知道做这样的事情的最佳做法是什么，避免了矩形内部网格的文本变形。

非常感谢！

Answer 1

以下是添加蓝色背景的方法。

在DataTemplate中放置一个蓝色矩形并设置ColumnSpan = 4.这会使矩形填满所有四列。将SkewTransform应用于矩形以转换边。

<强> XAML

<ListBox ItemsSource='{Binding}'>
  <ListBox.ItemTemplate>
    <DataTemplate>
      <Grid Margin='30,6' >
        <Grid.RowDefinitions>
          <RowDefinition Height="3*"/>
          <RowDefinition/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
          <ColumnDefinition Width='Auto' />
          <ColumnDefinition Width='Auto' />
          <ColumnDefinition Width='Auto' />
          <ColumnDefinition Width='Auto' />

        </Grid.ColumnDefinitions>
        <Rectangle Fill='LightBlue'
                    Grid.ColumnSpan='4' 
                    RenderTransformOrigin="0.5,0.5"
                   adiusX="6" Grid.RowSpan="2" RadiusY="5" >
          <Rectangle.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform AngleX="-21.464"/>
                <RotateTransform/>
                <TranslateTransform X="-9.069"/>
            </TransformGroup>
          </Rectangle.RenderTransform>
        </Rectangle>
        <TextBlock Text='{Binding Property1}'
                    Grid.Column='0'
                    Margin='10'
                    MinWidth='60' />
        <TextBlock Text='{Binding Property2}'
                    Grid.Column='1'
                    Margin='10'
                    MinWidth='60' />
        <TextBlock Text='{Binding Property3}'
                    Grid.Column='2'
                    Margin='10'
                    MinWidth='60' />
        <TextBlock Text='{Binding Property4}'
                    Grid.Column='3'
                    Margin='10'
                    MinWidth='60' />

      </Grid>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

<强>截图