WPF边框和标题对齐

Question

Got two problems here in my XAML code.

<Grid Margin="20">

        <ListBox x:Name="lbChampToSelect" ItemsSource="{Binding Lst}" HorizontalContentAlignment="Stretch" Grid.IsSharedSizeScope="True">
        <Border Background="FloralWhite" BorderBrush="Silver" BorderThickness="1" CornerRadius="3,3,3,3">                
            <ListBox.Template>
                <ControlTemplate>
                    <DockPanel LastChildFill="True">
                    <Grid Margin="5,2" DockPanel.Dock="Top" >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="100" SharedSizeGroup="Col1"></ColumnDefinition>
                            <ColumnDefinition Width="100" SharedSizeGroup="Col1"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="0">Libellé</Label>
                        <CheckBox IsChecked="False" Grid.Column="1"/>
                    </Grid>
                    <ItemsPresenter></ItemsPresenter>
                    </DockPanel>
                </ControlTemplate>                    
            </ListBox.Template>

            <ListBox.ItemTemplate>                    
                <DataTemplate>
                    <Grid Margin="5,2">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition  Width="100" SharedSizeGroup="Col1"/>
                            <ColumnDefinition Width="100" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Margin="0,0,10,0" Text="{Binding Libelle }" Grid.Column="0" />
                        <CheckBox IsChecked="False" Grid.Column="1"/>
                    </Grid>
                </DataTemplate>                    
            </ListBox.ItemTemplate>
        </Border>
    </ListBox>

</Grid>

First : whatever I try, I cannot align the header and the columns containing checkboxes (with a text labelling the checkbox it's worth). At the end, the header checkbox is supposed to check all the subsequents.

Second : I simply try to have a border on my entire listbox including the header but I got a xaml error saying the member Template is not accessible or does not exists.

Thx for your answers.

Answer 1

I'll start with the second question:

Your Border should be within the ControlTemplate (given I have guessed right how you want it to be).

<ControlTemplate>
    <Border Background="FloralWhite" BorderBrush="Silver" BorderThickness="1" CornerRadius="3,3,3,3">

Now on to the first question: There are many things that affect the layouting of the items in the ListBox. Here's the method I would use to solve the problem.

1. Remove margins from your Grids, I would set them to 0, at least for now. You can add layouting later, when you know what affects what.
2. Download Snoop

3. Start your application and start snooping it

4. Find your controls in the hierarchy, and try modifying the margin/padding values. That way you'll see what affects layouting.

5. Apply new values in code.

Answer 2

Otherwise, by using a ListView you can have header for items :

<ListView Margin="10" x:Name="lbChampToSelect" ItemsSource="{Binding Lst}" HorizontalContentAlignment="Stretch" Grid.IsSharedSizeScope="True" BorderBrush="Silver"
                 BorderThickness="1">
<ListView.Resources>
    <Style TargetType="ListViewItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    </Style>
    <Style TargetType="CheckBox" BasedOn="{StaticResource {x:Type CheckBox}}">
        <Setter Property="HorizontalAlignment" Value="Center"/>
    </Style>
</ListView.Resources>
    <ListView.View>
        <GridView>
            <GridViewColumn Header="Libelle" Width="120" DisplayMemberBinding="{Binding Libelle}" />
            <GridViewColumn Width="50">
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <CheckBox IsChecked="{ Binding IsChecked}"/>
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
                <GridViewColumn.Header>
                    <CheckBox/>
                </GridViewColumn.Header>
            </GridViewColumn>
        </GridView>
    </ListView.View>
</ListView>