How to create this ListBox ItemTemplate in WPF?

Question

I have a ListBox that contains a simple ItemTemplate with a Grid. And I'm trying to create something like this for every Item received by a Binding in the ListBox:

I have no experience designing with WPF and I don't know which is the best practice to do something like this, avoiding the text deforming of the Grid sited inside of the rectangle.

Thank you very much!

Answer 1

Here is how to add the blue background.

Put a blue rectangle in the DataTemplate and set ColumnSpan = 4. This causes the rectangle to fill all four columns. Apply a SkewTransform to the rectangle to transform the sides.

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>

Screenshot