CODEWITHSUNDEEP
c#wpfxaml
James Hogle
James Hogle

Reputation: 3040

WPF Dockpanel extending beyond width of parent

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.

enter image description here

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

enter image description here

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

enter image description here

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

Upvotes: 5

Views: 2743

Answers (3)

Pikoh
Pikoh

Reputation: 7703

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

Upvotes: 4

KidCode
KidCode

Reputation: 4201

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!)

Upvotes: 1

O. R. Mapper
O. R. Mapper

Reputation: 20720

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.

Upvotes: 1

Related Questions