CODEWITHSUNDEEP
wpfxaml
Core_F
Core_F

Reputation: 3442

How to get this design with WPF?

I want to achieve the following design:

[Image][<-- Listbox -->][<-- Listbox -->][Image] 
[<-- Listbox----->][Listbox][<----- Listbox -->]

The elements with <-- --> should stretch and take all the available space on the form.

Current XAML looks like this:

<StackPanel>
        <DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <Image Height="100"  HorizontalAlignment="Left"  Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="100" AllowDrop="True" Source="/FlatfileDraft;component/Images/none.png"/>
            <ListView Height="100" HorizontalAlignment="Stretch"  Name="FileinfoList"  Width="auto" Background="{x:Null}" BorderBrush="{x:Null}"></ListView>
            <ListView Height="100" HorizontalAlignment="Stretch"  Name="DatabaseInfoList" Width="auto" Background="{x:Null}" BorderBrush="{x:Null}"></ListView>
            <Image Height="100" HorizontalAlignment="Right" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="100" AllowDrop="True" Source="/FlatfileDraft;component/Images/none.png"/>
        </DockPanel>
        <DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <ListView Height="232" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Name="FileFields"  DockPanel.Dock="Left" />
            <ListView Height="232" HorizontalAlignment="Stretch" Name="DatabaseFields" VerticalAlignment="Stretch"  DockPanel.Dock="Right"/>
        </DockPanel>
    </StackPanel>

(The listbox in the middle is missing here)

My problem is, that the listviews are not stretching, they take as less space as possible (so they are just a thin line). How can I tell the listbox, that they should share and fill the available space?

Upvotes: 0

Views: 512

Answers (3)

Louis Kottmann
Louis Kottmann

Reputation: 16618

First of all, nothing will stretch vertically in a StackPanel with Orientation = Vertical (the default). How could it stack stuff and still make them stretch?

Now, you should be able to do that with a Grid. Use * to make a column or row take all available space, and Auto to just take the necessary space.

Hint: if you have 3 columns with 2 as Width="*" and one Width="Auto", and the Grid gets 1250 width at runtime (do not ever specify any direct height or width, unless you're absolutely sure the elements won't be resized).
If the control inside the auto column takes 250 the starred columns with share the remaining 1000 and thus get 500 each.

HTH,

bab.

Upvotes: 0

Julien
Julien

Reputation: 1192

If u want to use DockPanel, you should be aware that the last declared element will fill the inner panel part. So I would do things like this :

<StackPanel>
  <DockPanel>
     <Image Height="100" Width="100" DockPanel.Dock="Left"/>
     <Image Height="100" Width="100" DockPanel.Dock="Right"/>
     <Grid>
        <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*" />
           <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <ListView Grid.Column="0" Height="100" />
        <ListView Grid.Column="1" Height="100" />
     </Grid>
  </DockPanel>
  <DockPanel>
     <ListView Height="50" DockPanel.Dock="Left" />
     <ListView Height="50" DockPanel.Dock="Right"/>
     <ListView Width="100" />
  </DockPanel>

Upvotes: 0

Vladimir Perevalov
Vladimir Perevalov

Reputation: 4159

You should use Grid for this. Look at the code below:

<StackPanel>
        <Grid>        
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Image Grid.Column="0" Height="100"  HorizontalAlignment="Left"  Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="100" AllowDrop="True" 
                   />
            <ListView Grid.Column="1" Height="100" HorizontalAlignment="Stretch"  Name="FileinfoList"  Width="auto" Background="Yellow" BorderBrush="{x:Null}"></ListView>
            <ListView Grid.Column="2" Height="100" HorizontalAlignment="Stretch"  Name="DatabaseInfoList" Width="auto" Background="Green" BorderBrush="{x:Null}"></ListView>
            <Image Grid.Column="3" Height="100" HorizontalAlignment="Right" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="100" AllowDrop="True" Source="/FlatfileDraft;component/Images/none.png"/>       
        </Grid>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <ListView Grid.Column="0" Height="232" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Name="FileFields"  DockPanel.Dock="Left" 
                      Background="Green"/>
            <ListView Grid.Column="1" Height="232" HorizontalAlignment="Stretch" Name="DatabaseFields" VerticalAlignment="Stretch" 
                      Width="100" Background="Yellow"/>
            <ListView Grid.Column="2" Height="232" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  DockPanel.Dock="Right"
                      Background="Green"/>
        </Grid>
    </StackPanel>

Upvotes: 1

Related Questions