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

ヘッダーの背景の線形グラデーション カラーを設定する必要があります。コンテンツ用のボーダー。1つ下にしてみてください。

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