Search code examples
c#wpflistviewscrollbardockpanel

ListView's height in DockPanel is scaling with items and doesn't stop at the window borders - no scrollbar appears


I'm new to WPF. My workmate created a ListView and its height scales with the number of items, even beyond the border of the window, so that the scrollbar doesn't ever appear and the items below are not accessible.

How can I bind the view's height to the window, that the a scrollbar appears?

I tried so set VerticalContentAligment = !stretch, but that does not work.

The code so far:

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <UserControl.Resources>
        <Style
 x:Key="RightTitleText" TargetType="GridViewColumnHeader">
            <Setter Property="HorizontalContentAlignment" Value="Right" />
        </Style>
    </UserControl.Resources>
    <Grid Loaded="Grid_Loaded">
        <DockPanel>
            <DockPanel Margin="0,5,5,5" DockPanel.Dock="Top">
                <StackPanel Orientation="Horizontal">
                    <Label>Von</Label>
                    <DatePicker SelectedDateChanged="DatePickers_SelectedDateChanged" x:Name="DateStartPicker" Width="100"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                    <Label>Bis</Label>
                    <DatePicker SelectedDateChanged="DatePickers_SelectedDateChanged" x:Name="DateEndPicker" Width="100"/>
                </StackPanel>
            </DockPanel>
            <ListView x:Name="ListView" ItemContainerStyle="{DynamicResource ListViewItem}" SelectionChanged="ListView_SelectionChanged" SelectionMode="Single" HorizontalContentAlignment="Stretch" DockPanel.Dock="Bottom" VerticalContentAlignment="Stretch">
                <ListView.Resources>
                    <Style x:Key="ListViewItem" TargetType="{x:Type ListViewItem}">
                        <EventSetter Event="MouseDoubleClick" Handler="ListViewItem_MouseDoubleClick" />
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    </Style>
                </ListView.Resources>
                <ListView.View>
                    <GridView x:Name="GridView"/>
                </ListView.View>
            </ListView>
        </DockPanel>
    </Grid>
</UserControl>

Two screenshots of the results:

How it looks like

How it looks like

How it looks like in XAML-Live-Preview

How it looks like in XAML-Live-Preview

Code of the main window:

<Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
Height="700" Width="1280" Initialized="Window_Initialized">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="101*"/>
            <ColumnDefinition Width="139*"/>
        </Grid.ColumnDefinitions>
        <TabControl x:Name="TabControl" Grid.ColumnSpan="2">
            <TabItem Header="Avise" x:Name="AdviceTab">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="5"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="5"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <DockPanel Grid.Column="0">
                        <DockPanel DockPanel.Dock="Top" Margin="0 5 5 5">
                            <Label>Suche</Label>
                            <TextBox x:Name="SearchTextBox" KeyUp="SearchTextBox_KeyUp" VerticalContentAlignment="Center"/>
                        </DockPanel>
                        <local:AlphabeticalPicker Grid.Column="0" ItemSelected="AlphabeticalPicker_ItemSelected" x:Name="AlphabeticalPicker"/>
                    </DockPanel>
                    <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch"/>
                    <local:SearchableList Grid.Column="2" x:Name="SecondSearch" ItemSelected="SecondSearch_ItemSelected" Loaded="SecondSearch_Loaded"/>
                    <GridSplitter Grid.Column="3" Width="5" HorizontalAlignment="Stretch"/>
                    <DockPanel Grid.Column="4">
                        <StackPanel Orientation="Vertical" DockPanel.Dock="Top">
                            <Label x:Name="SelectedDebKredLabel">Kein Debitor/Kreditor ausgewählt</Label>
                            <local:DateFilteredList x:Name="AdvicePicker" Grid.Column="4" ItemDoubleClicked="AdvicePicker_ItemSelected" DatePropertyName="ErstellungsDatum">
                                <local:DateFilteredList.ColumnDefinitions>
                                    <local:SimpleColumn Heading="Nummer" Path="AvisNr" Width="75"/>
                                    <local:SimpleColumn Heading="Datum" Path="ErstellungsDatum" Format="dd.MM.yyyy HH:mm" Width="150"/>
                                    <local:SimpleColumn Heading="Typ" Path="Type" Width="100"/>
                                </local:DateFilteredList.ColumnDefinitions>
                            </local:DateFilteredList>
                        </StackPanel>
                    </DockPanel>
                </Grid>
            </TabItem>
            <TabItem Header="Zahlungen" x:Name="PaymentTab">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="352"/>
                        <ColumnDefinition Width="5"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <DockPanel Grid.ColumnSpan="2">
                        <ComboBox x:Name="CategoryComboBox" SelectionChanged="CategoryComboBox_SelectionChanged" DockPanel.Dock="Top" SelectedIndex="0" Width="200" HorizontalAlignment="Left" Margin="0 5 5 5">
                            <ComboBoxItem Content="Lastschriften von Kunden"/>
                            <ComboBoxItem Content="Überweisungen an Kunden"/>
                            <ComboBoxItem Content="Überweisungen an Lieferanten"/>
                            <ComboBoxItem Content="Überweisungen Hauptbuch" />
                        </ComboBox>
                        <local:DateFilteredList x:Name="ArchiveSelectBox" ItemSelected="ArchiveSelectBox_ItemSelected" DockPanel.Dock="Bottom" DatePropertyName="Ausfuehrungsdatum" Width="352" FilterChanged="ArchiveSelectBox_FilterChanged">
                            <local:DateFilteredList.ColumnDefinitions>
                                <local:SimpleColumn Heading="Ausführungsdatum" Path="Ausfuehrungsdatum" Format="dd.MM.yyyy" Width="125"/>
                                <local:SimpleColumn Heading="Gesamtsumme" Path="Summe" Format="N2" Width="100"/>
                                <local:SimpleColumn Heading="Typ" Path="TypBezeichnung" Width="100"/>
                            </local:DateFilteredList.ColumnDefinitions>
                        </local:DateFilteredList>
                    </DockPanel>
                    <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch"/>
                    <DockPanel Grid.Column="2">
                        <Label x:Name="SelectedDateLabel" DockPanel.Dock="Top">Datum:</Label>
                        <Button x:Name="ExportButton" Click="ExportButton_Click" DockPanel.Dock="Bottom" HorizontalAlignment="Right" Padding="5" Margin="0 5 5 5" Width="75">Excel-Export</Button>
                        <local:SortableList x:Name="ArchiveList">
                            <local:SortableList.ColumnDefinitions>
                                <local:SimpleColumn Heading="Konto" Width="75" Path="KontoNr"/>
                                <local:SimpleColumn Heading="Name" Width="175" Path="Firma"/>
                                <local:SimpleColumn Heading="BIC" Width="100" Path="Bic"/>
                                <local:SimpleColumn Heading="IBAN" Width="150" Path="Iban"/>
                                <local:SimpleColumn Heading="Brutto" Width="75" Path="Brutto" Format="N2"/>
                                <local:SimpleColumn Heading="Skonto" Width="75" Path="Skonto" Format="N2"/>
                                <local:SimpleColumn Heading="Rec-.gebühr" Width="75" Path="RecGeb" Format="N2"/>
                                <local:SimpleColumn Heading="Netto" Width="75" Path="Netto" Format="N2"/>
                            </local:SortableList.ColumnDefinitions>
                        </local:SortableList>
                    </DockPanel>
                </Grid>
            </TabItem>
        </TabControl>
    </Grid>
</Window>

Solution

  • The DockPanels are redundant, because the layout could be applied by the top-level Grid:

    <Grid Loaded="Grid_Loaded">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
    
        <StackPanel Grid.Column="0" Margin="5" Orientation="Horizontal">
            <Label>Von</Label>
            <DatePicker .../>
        </StackPanel>
    
        <StackPanel Grid.Column="1" Margin="5" Orientation="Horizontal"
                    HorizontalAlignment="Right">
            <Label>Bis</Label>
            <DatePicker .../>
        </StackPanel>
    
        <ListView x:Name="ListView" Grid.Row="1" Grid.ColumnSpan="2" ...>
            ...
        </ListView>
    </Grid>
    

    Besides that, you must not use a StackPanel as parent of your control when you want to restrict its dimensions. A StackPanel allows its child elements unlimited size in the direction of its Orientation, i.e. unlimited height if it is vertical.