WPF Dockpanel extending beyond width of parent

Question

I am attempting to create a dock panel inside of a list view data template that takes up all of the available width of its parent tab control. I started by basing my XAML off of this question and thus came up with this:

<TabControl x:Name="tabControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <TabItem Header="Clipboard Buffer">
        <ListView Name="clipboardListView" ScrollViewer.CanContentScroll="True">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Border BorderThickness="2" BorderBrush="Black" CornerRadius="2,2,2,2">
                        <DockPanel Background="AliceBlue" Width="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}">
                            <TextBlock Text="{Binding Text}" DockPanel.Dock="Top" />
                        </DockPanel>
                    </Border>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </TabItem>

     ...

This almost works, however the dock panel always seems to be just a little bit wider than the space available in the tab control as you can see here.

I can use the scroll bar to move over and see the end of my dockpanel as one would expect...

However, if I attempt to re-size the form, the dockpanel remains slightly larger than the amount of space available in the tab control.

What am I missing here? How can I make my dock panel stay within the width of its parent tab control?

I'm guessing the basic underlying problem here is forcing the ListViewItems to be the full width, right? See my answer. You may not even need the DockPanel. You definitely don't need to mess with binding to any width properties. That stuff always gets ugly if you touch any part of your layout later. — 15ee8f99-57ff-4f92-890c-b56153, Jan 12 '16 at 15:42

score 4 · Accepted Answer · answered Jan 12 '16 at 15:41

Try this:

    <TabControl x:Name="tabControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <TabItem Header="Clipboard Buffer">
            <ListView Name="clipboardListView" ScrollViewer.CanContentScroll="True" HorizontalContentAlignment="Stretch">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Border BorderThickness="2" BorderBrush="Black" CornerRadius="2,2,2,2" >
                            <DockPanel Background="AliceBlue" >
                                <TextBlock Text="asdfasdkfhkasdfkasdgfkjhdgfkuwegyfkwegfbkuweyfuksyadukfykweugbyfu" DockPanel.Dock="Top" />
                            </DockPanel>
                        </Border>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </TabItem>
    </TabControl>

Note the HorizontalContentAlignment="Stretch" in the ListView

By the way, this works even without the DockPanel. I was quite certain `HorizontalContentAlignment="Stretch"` has failed to work for us here, but your example works perfectly on ListBox, ListView, and ComboBox. I think I'll be taking a second look at some of our XAML today. Thanks. — 15ee8f99-57ff-4f92-890c-b56153, Jan 12 '16 at 15:55
You're welcome :) Yes, it should work without the dockpanel, although i have not tried it — Pikoh, Jan 12 '16 at 15:59

score 1 · Answer 2 · answered Jan 12 '16 at 15:33

Your DockPanel is nested into a Border element:

<Border BorderThickness="2" BorderBrush="Black" CornerRadius="2,2,2,2">
    <DockPanel Background="AliceBlue" Width="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}">

The Border occupies some width of its own - it has a border thickness of 2, so it is 4 pixels wider than its content.

The content of the Border is your DockPanel - and you have bound its width to the actual width of the enclosing TabControl. As a result, the aforementioned Border will always be a bit wider than the enclosing TabControl.

For a start, you could try and bind the width of the Border rather than that of the DockPanel. This should help to some extent, although I am not completely sure the TabControl doesn't require some extra inner space for its page contents.

score 1 · Answer 3 · answered Jan 12 '16 at 15:34

It's most likely caused by this line in your DockPanel XAML:

Width="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}

Your setting the Width to the ActualWidth of the TabControl, without taking into account any Padding or Margin on the Children.

You need to check if the TabControl, TabItem or ListView have any padding or margins, then take this off too. (Don't forget the 2pixel border!)

WPF Dockpanel extending beyond width of parent

3 Answers3