CODEWITHSUNDEEP
c#wpflistview
aquastar
aquastar

Reputation: 25

Fix listview's height to empty space

I'm new with WPF and want to set the listview's height to the bottom of my frame. The listview's width ist already set with a fix value. The following code represents my DockPanel:

<DockPanel 
    Name="dp"
    Width="200" 
    HorizontalAlignment="Left">
    <TextBox DockPanel.Dock="Top" Margin="0,5,0,5"/>
    <ListView Width="{Binding Path=ActualWidth, ElementName=dp}" Background="Yellow" DockPanel.Dock="Left">
        <ListViewItem Content="foobar"/>
        <ListViewItem Content="foobar2"/>
    </ListView>
</DockPanel>

The first screenshot will show the current szenario: https://i.sstatic.net/ZLmi7.png

and the heigth shell strech to the height as it is shown in the next picture: https://i.sstatic.net/Cc2Jg.png

Thanks a lot!

Best regards

Upvotes: 2

Views: 787

Answers (2)

Steven Rands
Steven Rands

Reputation: 5421

Instead of this:

<Window>
    <DockPanel>
        <Menu DockPanel.Dock="Top">
        </Menu>
        <DatePicker DockPanel.Dock="Top" />
        <TabControl>
            <TabItem>
                <StackPanel>
                </StackPanel>
            </TabItem>
            <TabItem>
                <StackPanel>
                    <Grid>
                    </Grid>
                    <DockPanel>
                        <TextBox DockPanel.Dock="Top" />
                        <ListView>
                        </ListView>
                    </DockPanel>
                </StackPanel>
            </TabItem>
            <TabItem>
            </TabItem>
        </TabControl>
    </DockPanel>
</Window>

Try this:

<Window>
    <DockPanel>
        <Menu DockPanel.Dock="Top">
        </Menu>
        <DatePicker DockPanel.Dock="Top" />
        <TabControl>
            <TabItem>
                <StackPanel>
                </StackPanel>
            </TabItem>
            <TabItem>
                <DockPanel>  <!-- instead of StackPanel -->
                    <Grid DockPanel.Dock="Top">
                    </Grid>
                    <!-- can now get rid of this <DockPanel>  -->
                    <TextBox DockPanel.Dock="Top" />
                    <ListView>
                    </ListView>
                </DockPanel>
            </TabItem>
            <TabItem>
            </TabItem>
        </TabControl>
    </DockPanel>
</Window>

Upvotes: 1

RǢF
RǢF

Reputation: 806

You need to use VerticalAlignment="Stretch" on the ListView element. The same is true for HorizontalAlignment if you need to do the same horizontally.

<DockPanel 
    Name="dp"
    Width="200" 
    HorizontalAlignment="Left">
    <TextBox DockPanel.Dock="Top" Margin="0,5,0,5"/>
    <ListView Width="{Binding Path=ActualWidth, ElementName=dp}" VerticalAlignment="Stretch" Background="Yellow" DockPanel.Dock="Left">
        <ListViewItem Content="foobar"/>
        <ListViewItem Content="foobar2"/>
    </ListView>
</DockPanel>

See http://msdn.microsoft.com/en-us/library/ms751709(v=vs.110).aspx for more information.

I have tested your code using VerticalAlignment="Stretch", and I am getting your desired result:

enter image description here

<Window x:Class="WpfApplication1.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"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <DockPanel 
    Name="dp"
    Width="200" 
    HorizontalAlignment="Left">
    <TextBox DockPanel.Dock="Top" Margin="0,5,0,5"/>
    <ListView Width="{Binding Path=ActualWidth, ElementName=dp}" VerticalAlignment="Stretch" Background="Yellow" DockPanel.Dock="Left">
        <ListViewItem Content="foobar"/>
        <ListViewItem Content="foobar2"/>
    </ListView>
</DockPanel> 
    </Grid>
</Window>

If you cannot get the VerticalAlignment to work properly, we can bind the ActualHeight of an element to its ancestor element. So, add this to your ListView:

Height="{ Binding Path=ActualHeight, RelativeSource={ RelativeSource Mode=FindAncestor, AncestorType={ x:Type Window } } }"

Upvotes: 0

Related Questions