DockPanel LastChildFill resizing to MinWidth?

Question

I try to achieve a simple menubar in WPF.

Here is the XAML:

<Page
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <DockPanel>  
    <DockPanel Background="Black" VerticalAlignment="Top" LastChildFill="True" DockPanel.Dock="Top" Height="28">
        <ToggleButton Content="--" Visibility="Collapsed" />
        <StackPanel Orientation="Horizontal">
           <Button Content="Add" />
           <Button Content="Expand" /> 
        </StackPanel>
        <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
           <TextBox Text="Search" MinWidth="80" Width="200" />
           <Button Content="X" Margin="0,1,50,0" />
        </StackPanel>
    </DockPanel>
 </DockPanel>
</Page>

It looks good, but when I resize the page to a smaller width, the last child (the Stackpanel with the search textbox) is hiding behind the left items. Like this: http://s9.postimage.org/m0tkrobwd/printscreen.png

It would be good if the textbox would resize itself if it has enough space to achieve its MinWidth...Is it possible?

Which control shall stretch if there is enough space and which control should be the first disappearing if there isn't? — LPL, Jul 25 '12 at 10:03
Look at this: http://s10.postimage.org/wc86li3rb/concept.png Maybe at the final stage when the available space is lesser than 80px, the whole search panel should disappear, but it's ok if it doesn't. But currently the search panel flows behind or over the buttons even in those cases when it would have enough available space, which is crap. — Zsolt, Jul 25 '12 at 10:51

score 1 · Answer 1 · edited May 23 '17 at 10:28

The tricky thing is to give a Control (in your case the SearchTextBox) an alignment but still catch the available space up to MaxWidth. Thanks to this answer.

<DockPanel>
    <DockPanel Background="Black" DockPanel.Dock="Top" Height="28">
        <ToggleButton DockPanel.Dock="Left" Content="--" Visibility="Collapsed" />
        <StackPanel DockPanel.Dock="Left" Orientation="Horizontal">
            <Button Content="Add" />
            <Button Content="Expand" />
        </StackPanel>
        <Button DockPanel.Dock="Right" Content="X" />
        <Border Name="Container">
            <TextBox Text="Search" HorizontalAlignment="Right"
                     Width="{Binding ElementName=Container, Path=ActualWidth}" MaxWidth="200" />                                
        </Border>
     </DockPanel>        
</DockPanel>

Container could be another Control too.

score 0 · Answer 2 · answered Jul 25 '12 at 09:20

Hi Set MaxWidth and MinWidth for the TextBox Not Width. If you will set the Width then it has highest precedence and hence MinWidth won'nt come into act.I hope this will help.

 <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <ToggleButton Content="--" Visibility="Collapsed" />
                <Button Content="Add"  Grid.Column="1"/>
                <Button Content="Expand"  Grid.Column="2"/>
                <TextBox Text="Search" MinWidth="80" MaxWidth="600" Grid.Column="3" ClipToBounds="True" />
                <Button Content="X" Margin="0,1,50,0" Grid.Column="4"/>
            </Grid>

yes sorry for that case you will have to use Grid with Column of * Width — yo chauhan, Jul 25 '12 at 09:25
Thanks, but it's not the same. You put the TextBox and the Button to 2 different columns which can make a really huge space between them if the page width is big. — Zsolt, Jul 25 '12 at 09:27

score 0 · Answer 3 · answered Jul 25 '12 at 09:22

0

Its just because of the size of page is not enough for showing both stackpanel on page. for this you can use the minimum size of the page. that will prevent the damages of the control hiding .

and its also up to you what design you want. you can either use grid rather then stackpanles.

answered Jul 25 '12 at 09:22

JSJ

5,653
3
25
32

So this is not possible? I have to constraint the Width of the whole page? – Zsolt Jul 25 '12 at 09:29
you can also apply size for dockpanel in which you are holding the controls – JSJ Jul 25 '12 at 15:10

yo chauhan · Accepted Answer · 2012-07-25T11:09:33.920

0

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
    </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                      <ColumnDefinition Width="*"/>
                    <ColumnDefinition MaxWidth="200" MinWidth="80"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <ToggleButton Content="--" Visibility="Collapsed" />
                <Button Content="Add"  Grid.Column="1"/>
                <Button Content="Expand"  Grid.Column="2"/>
                <TextBox Text="Search" Grid.Column="4"/>
                <Button Content="X" Margin="0,1,50,0" Grid.Column="5" />
            </Grid>

Instead of giving MaxWidth and MinWidth to TextBox give it to Grid Column.I hope this will help.

edited Jul 25 '12 at 11:09

answered Jul 25 '12 at 10:15

yo chauhan

12,079
4
39
58

In this example, the Search controls doesn't aligned to the right, which is not what I want. You can see my concept here: http://s10.postimage.org/wc86li3rb/concept.png I thought there should be an easy solution to this problem, maybe it's not as easy as I thought. :) – Zsolt Jul 25 '12 at 10:58
1

I have updated the solution above .Copy and Paste it on your code and see whether it fullfills your requirement. – yo chauhan Jul 25 '12 at 11:10
I used this as a solution. Worked fine! Thanks! – Zsolt Jul 25 '12 at 12:30

DockPanel LastChildFill resizing to MinWidth?

4 Answers4