Listbox ItemTemplate не отображается правильно

Question

У меня есть список, как определено ниже. Любая идея, что мне нужно сделать, чтобы отобразить границу? В настоящее время это выглядит следующим образом:

Когда он должен выглядеть следующим образом:

 <ListBox 
      Grid.Row="1" 
      ItemsSource="{Binding Path=ProfessionalsView}" 
      Style="{x:Null}"> 
     <ListBox.ItemsPanel> 
      <ItemsPanelTemplate> 
       <WrapPanel/> 
      </ItemsPanelTemplate> 
     </ListBox.ItemsPanel> 
     <ListBox.ItemTemplate> 
      <DataTemplate> 
<Border BorderThickness="4"> 
    <HeaderedContentControl> 
     <HeaderedContentControl.Header> 
      <Grid> 
       <TextBlock Margin="9,5,29,5" Text="{Binding Path=FormattedName}"></TextBlock> 
       <Image Margin="0,2.5,9,2.5" HorizontalAlignment="Right" Source="/BluBrik.Workflow;component\Images/FlagComplete_16.png" Width="16" Height="16"></Image> 
      </Grid> 
     </HeaderedContentControl.Header> 
     <Grid> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="Auto"></RowDefinition> 
       <RowDefinition Height="Auto"></RowDefinition> 
       <RowDefinition Height="Auto"></RowDefinition> 
       <RowDefinition Height="Auto"></RowDefinition> 
       <RowDefinition Height="Auto"></RowDefinition> 
      </Grid.RowDefinitions> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="Auto"></ColumnDefinition> 
       <ColumnDefinition Width="*"></ColumnDefinition> 
      </Grid.ColumnDefinitions> 
      <TextBlock Margin="9,5,5,2.5" Text="Surname"></TextBlock> 
      <TextBlock Grid.Row="1" Text="Forename"></TextBlock> 
      <TextBlock Grid.Row="2" Text="Work Phone"></TextBlock> 
      <TextBlock Grid.Row="3" Text="Mobile Phone"></TextBlock> 
      <TextBlock Grid.Row="4" Text="Email"></TextBlock> 

      <TextBlock Grid.Column="1" Grid.Row="0" Margin="9,5,9,2.5" Text="{Binding Path=Surname}"></TextBlock> 
      <TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding Path=Forenames}"></TextBlock> 
      <TextBlock Grid.Column="1" Grid.Row="2" Text="{Binding Path=WorkPhone}"></TextBlock> 
      <TextBlock Grid.Column="1" Grid.Row="3" Text="{Binding Path=MobilePhone}"></TextBlock> 
      <TextBlock Grid.Column="1" Grid.Row="4" Text="{Binding Path=EmailAddress}"></TextBlock> 
     </Grid> 
    </HeaderedContentControl> 
</Border> 
      </DataTemplate> 
     </ListBox.ItemTemplate> 
    </ListBox> 

Answer 1

Ваш границы:

<Border BorderThickness="4"> 

не имеет никакого BorderBrush определен. Поэтому рисовать контуры нет. Попробуйте

<Border BorderThickness="4" BorderBrush="Black"> 

Answer 2

Вам необходимо установить цвет фона Linear Gradiant для заголовка. и Граница для вас. попробуйте ниже одного.

<ListBox 
    Grid.Row="1" 
    ItemsSource="{Binding Path=ProfessionalsView}" 
    Style="{x:Null}"> 
    <ListBox.ItemsPanel> 
     <ItemsPanelTemplate> 
      <WrapPanel/> 
     </ItemsPanelTemplate> 
    </ListBox.ItemsPanel> 
    <ListBox.ItemTemplate> 
     <DataTemplate> 
      <Border BorderThickness="4"> 
       <HeaderedContentControl> 
        <HeaderedContentControl.Header> 

         <Grid> 
          <Grid.Background> 
           <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0"> 
            <GradientStop Color="#FFD1D0D0" Offset="0"/> 
            <GradientStop Color="White" Offset="1"/> 
           </LinearGradientBrush> 
          </Grid.Background> 
          <TextBlock Margin="9,5,29,5" Text="{Binding Path=FormattedName}"></TextBlock> 
          <Image Margin="0,2.5,9,2.5" HorizontalAlignment="Right" Source="/BluBrik.Workflow;component\Images/FlagComplete_16.png" Width="16" Height="16"></Image> 
         </Grid> 
        </HeaderedContentControl.Header> 
        <Border BorderBrush="DarkGray" BorderThickness="3"> 
         <Grid> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto"></RowDefinition> 
          <RowDefinition Height="Auto"></RowDefinition> 
          <RowDefinition Height="Auto"></RowDefinition> 
          <RowDefinition Height="Auto"></RowDefinition> 
          <RowDefinition Height="Auto"></RowDefinition> 
         </Grid.RowDefinitions> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="Auto"></ColumnDefinition> 
          <ColumnDefinition Width="*"></ColumnDefinition> 
         </Grid.ColumnDefinitions> 
         <TextBlock Margin="9,5,5,2.5" Text="Surname"></TextBlock> 
         <TextBlock Grid.Row="1" Text="Forename"></TextBlock> 
         <TextBlock Grid.Row="2" Text="Work Phone"></TextBlock> 
         <TextBlock Grid.Row="3" Text="Mobile Phone"></TextBlock> 
         <TextBlock Grid.Row="4" Text="Email"></TextBlock> 

         <TextBlock Grid.Column="1" Grid.Row="0" Margin="9,5,9,2.5" Text="{Binding Path=Surname}"></TextBlock> 
         <TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding Path=Forenames}"></TextBlock> 
         <TextBlock Grid.Column="1" Grid.Row="2" Text="{Binding Path=WorkPhone}"></TextBlock> 
         <TextBlock Grid.Column="1" Grid.Row="3" Text="{Binding Path=MobilePhone}"></TextBlock> 
         <TextBlock Grid.Column="1" Grid.Row="4" Text="{Binding Path=EmailAddress}"></TextBlock> 
        </Grid> 
        </Border> 
       </HeaderedContentControl> 
      </Border> 
     </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox>