wpf - 列表框 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

您需要为标题设置背景线性渐变颜色。和内容的边框。试试下面的一个。

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