Search code examples
c#wpflistboxmargindatatemplate

Margin difference in nested ListBox with DataTemplates


I have a problem with my ListBox. I have written several DataTemplates which I use in a ListBox. Each one of these contains a grid and may contain a nested ListBox depending on the item. My problem is: The height of these nested ListBoxes seem to be different to the root ListBox's height. Additionally it seems, that there is sometimes one pixel margin to the element above.

NestedGrids

Has someone encountered this problem, too and maybe solved it?

XAML-Code:

         <!-- Template for SubData-Items -->
         <DataTemplate x:Key="DataTemplate">

            <Grid x:Name="baseGrid" Grid.Column="0" Grid.ColumnSpan="999" Background="Violet">

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="{Binding ElementName=Col0, Path=Width}" />
                    <ColumnDefinition Width="{Binding ElementName=Col1, Path=Width}" />
                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>
                    <RowDefinition Height="{Binding ElementName=Row0, Path=Height}"/>
                </Grid.RowDefinitions>

                <TextBlock Grid.Column="1" Text="{Binding Bezeichnung}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="12" />
                <Line Grid.ColumnSpan="999" Stroke="Black" X1="0" X2="{Binding ElementName=baseGrid, Path=ActualWidth, Mode=OneWay}" Y1="0" Y2="0" VerticalAlignment="Bottom" />

            </Grid>

        </DataTemplate>

        <!-- Template for Items -->
        <DataTemplate x:Key="GroupDataTemplate">

            <Grid Grid.ColumnSpan="999" Background="Blue">

                <Grid.RowDefinitions>
                    <RowDefinition Height="{Binding ElementName=Gantt, Path=GridRowHeight}" />
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <Grid x:Name="baseGrid" Grid.Column="0" Grid.ColumnSpan="999">

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="{Binding ElementName=Col0, Path=Width}" />
                        <ColumnDefinition Width="{Binding ElementName=Col1, Path=Width}" />
                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="{Binding ElementName=Row0, Path=Height}"/>
                    </Grid.RowDefinitions>

                    <TextBlock Grid.Column="1" Text="{Binding Bezeichnung}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="12" />

                </Grid>

                <Grid x:Name="expandedGrid" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="999">

                    <ListBox x:Name="LBMaGruppen" ItemTemplate="{StaticResource DataTemplate}" ItemsSource="{Binding SubdataObjects}"                                                                                
                                    VerticalAlignment="Stretch" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Height="Auto" Margin="0,0,2,0"
                                    ScrollViewer.CanContentScroll="false" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled" BorderThickness="0" />

                </Grid>

            </Grid>

        </DataTemplate>

   <!-- Grid with ListBox -->
   <Grid>

        <Grid.RowDefinitions>
            <RowDefinition x:Name="Row0" Height="34"/>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="Col0" Width="25" />
            <ColumnDefinition x:Name="Col1" Width="*" />
        </Grid.ColumnDefinitions>

        <ListBox Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="999" ItemsSource="{Binding ItemSource, Mode=OneWay}"
            ItemTemplate="{StaticResource GroupDataTemplate}"
            VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="Auto"               
            ScrollViewer.CanContentScroll="true"
            ScrollViewer.IsDeferredScrollingEnabled="False"
            ScrollViewer.HorizontalScrollBarVisibility="Disabled"
            ScrollViewer.VerticalScrollBarVisibility="Disabled"
            FontSize="10" />

    </Grid>

Solution

  • Add a Margin="-2,0,0,0" and a Padding="-1" to your "LBMaGruppen" named ListBox.

    <ListBox x:Name="LBMaGruppen" ItemTemplate="{StaticResource DataTemplate}" ItemsSource="{Binding SubdataObjects}"                                                                                
                                    VerticalAlignment="Stretch" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Height="Auto" Margin="-2,0,0,0" Padding="-1"
                                    ScrollViewer.CanContentScroll="false" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled" BorderThickness="0" />
    

    Running with those modifications

    Also, the "root" element's height is binded to {Binding ElementName=Gantt, Path=GridRowHeight}, while the "sub" element's height to {Binding ElementName=Row0, Path=Height}, so this must cause the difference.