stackpanel is and autosizing a ListBox

  • Thread starter Thread starter Lloyd Dupont
  • Start date Start date
L

Lloyd Dupont

I have managed to make a ListBox where the scrollbar is replaced by up and down button with the code below:

===========
<ListBox Width="100" Height="100">
<ListBox.Resources>

<Style TargetType="{x:Type ScrollViewer}">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type ScrollViewer}">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="16"/>

<RowDefinition Height="*"/>

<RowDefinition Height="16"/>

</Grid.RowDefinitions>

<RepeatButton Grid.Row="0" Command="ScrollBar.LineUpCommand" Delay="0"/>

<ScrollContentPresenter Grid.Row="1" Content="{TemplateBinding Content}"/>

<RepeatButton Grid.Row="2" Command="ScrollBar.LineDownCommand" Delay="0"/>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</ListBox.Resources>

<Rectangle Fill="White" Height="50" Width="50" Margin="0,4,0,0"/>

<Rectangle Fill="Yellow" Height="50" Width="50" Margin="0,4,0,0"/>

<Rectangle Fill="Green" Height="50" Width="50" Margin="0,4,0,0"/>

<Rectangle Fill="Magenta" Height="50" Width="50" Margin="0,4,0,0"/>

</ListBox>

===========



that looks nice and just the way I wanted it to be (just up and down button instead of side scrollbar)!


however I have one problem:
if I use my ListBox inside a StackPanel, it doesn't shrink to accomodate the size of the window, hence the down button is invisible (out of the window, with a few element of the list as well).
Try it out for your self with this piece of XAML:
===================

<Window x:Class="WindowsApplication1.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="WindowsApplication1" Height="300" Width="300"

<StackPanel Orientation="Vertical">

<Button>Overview</Button>

<ListBox>

<ListBox.Resources>

<Style TargetType="{x:Type ScrollViewer}">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type ScrollViewer}">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="16"/>

<RowDefinition Height="*"/>

<RowDefinition Height="16"/>

</Grid.RowDefinitions>

<RepeatButton Grid.Row="0" Command="ScrollBar.LineUpCommand" Delay="0"/>

<ScrollContentPresenter Grid.Row="1" Content="{TemplateBinding Content}"/>

<RepeatButton Grid.Row="2" Command="ScrollBar.LineDownCommand" Delay="0"/>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</ListBox.Resources>

<Rectangle Fill="White" Height="50" Width="50" Margin="0,4,0,0"/>

<Rectangle Fill="Yellow" Height="50" Width="50" Margin="0,4,0,0"/>

<Rectangle Fill="Green" Height="50" Width="50" Margin="0,4,0,0"/>

<Rectangle Fill="Magenta" Height="50" Width="50" Margin="0,4,0,0"/>

</ListBox>

</StackPanel>

</Window>


======================


So what did I missed?
How can I force the stack panel to size its content (i.e. the list box) to the available space?
 
found it, it's normal!
I will use a DockPanel instead....

--
Regards,
Lloyd Dupont
NovaMind Software
Mind Mapping at its best
www.nova-mind.com

I have managed to make a ListBox where the scrollbar is replaced by up and down button with the code below:

===========
<ListBox Width="100" Height="100">
<ListBox.Resources>

<Style TargetType="{x:Type ScrollViewer}">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type ScrollViewer}">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="16"/>

<RowDefinition Height="*"/>

<RowDefinition Height="16"/>

</Grid.RowDefinitions>

<RepeatButton Grid.Row="0" Command="ScrollBar.LineUpCommand" Delay="0"/>

<ScrollContentPresenter Grid.Row="1" Content="{TemplateBinding Content}"/>

<RepeatButton Grid.Row="2" Command="ScrollBar.LineDownCommand" Delay="0"/>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</ListBox.Resources>

<Rectangle Fill="White" Height="50" Width="50" Margin="0,4,0,0"/>

<Rectangle Fill="Yellow" Height="50" Width="50" Margin="0,4,0,0"/>

<Rectangle Fill="Green" Height="50" Width="50" Margin="0,4,0,0"/>

<Rectangle Fill="Magenta" Height="50" Width="50" Margin="0,4,0,0"/>

</ListBox>

===========



that looks nice and just the way I wanted it to be (just up and down button instead of side scrollbar)!


however I have one problem:
if I use my ListBox inside a StackPanel, it doesn't shrink to accomodate the size of the window, hence the down button is invisible (out of the window, with a few element of the list as well).
Try it out for your self with this piece of XAML:
===================

<Window x:Class="WindowsApplication1.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="WindowsApplication1" Height="300" Width="300"

<StackPanel Orientation="Vertical">

<Button>Overview</Button>

<ListBox>

<ListBox.Resources>

<Style TargetType="{x:Type ScrollViewer}">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type ScrollViewer}">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="16"/>

<RowDefinition Height="*"/>

<RowDefinition Height="16"/>

</Grid.RowDefinitions>

<RepeatButton Grid.Row="0" Command="ScrollBar.LineUpCommand" Delay="0"/>

<ScrollContentPresenter Grid.Row="1" Content="{TemplateBinding Content}"/>

<RepeatButton Grid.Row="2" Command="ScrollBar.LineDownCommand" Delay="0"/>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</ListBox.Resources>

<Rectangle Fill="White" Height="50" Width="50" Margin="0,4,0,0"/>

<Rectangle Fill="Yellow" Height="50" Width="50" Margin="0,4,0,0"/>

<Rectangle Fill="Green" Height="50" Width="50" Margin="0,4,0,0"/>

<Rectangle Fill="Magenta" Height="50" Width="50" Margin="0,4,0,0"/>

</ListBox>

</StackPanel>

</Window>


======================


So what did I missed?
How can I force the stack panel to size its content (i.e. the list box) to the available space?
 
Ah, the wonderful world of XAML and WPF. Or at least ot will be in 2 months when you get your head around it.

Have fun with DockPanel. Remember, order counts. So dont always go top to bottom; if you want a status bar or such at the bottom, declare that first with DockPanel.Dock="Bottom".
found it, it's normal!
I will use a DockPanel instead....

--
Regards,
Lloyd Dupont
NovaMind Software
Mind Mapping at its best
www.nova-mind.com

I have managed to make a ListBox where the scrollbar is replaced by up and down button with the code below:

===========
<ListBox Width="100" Height="100">
<ListBox.Resources>

<Style TargetType="{x:Type ScrollViewer}">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type ScrollViewer}">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="16"/>

<RowDefinition Height="*"/>

<RowDefinition Height="16"/>

</Grid.RowDefinitions>

<RepeatButton Grid.Row="0" Command="ScrollBar.LineUpCommand" Delay="0"/>

<ScrollContentPresenter Grid.Row="1" Content="{TemplateBinding Content}"/>

<RepeatButton Grid.Row="2" Command="ScrollBar.LineDownCommand" Delay="0"/>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</ListBox.Resources>

<Rectangle Fill="White" Height="50" Width="50" Margin="0,4,0,0"/>

<Rectangle Fill="Yellow" Height="50" Width="50" Margin="0,4,0,0"/>

<Rectangle Fill="Green" Height="50" Width="50" Margin="0,4,0,0"/>

<Rectangle Fill="Magenta" Height="50" Width="50" Margin="0,4,0,0"/>

</ListBox>

===========



that looks nice and just the way I wanted it to be (just up and down button instead of side scrollbar)!


however I have one problem:
if I use my ListBox inside a StackPanel, it doesn't shrink to accomodate the size of the window, hence the down button is invisible (out of the window, with a few element of the list as well).
Try it out for your self with this piece of XAML:
===================

<Window x:Class="WindowsApplication1.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="WindowsApplication1" Height="300" Width="300"

<StackPanel Orientation="Vertical">

<Button>Overview</Button>

<ListBox>

<ListBox.Resources>

<Style TargetType="{x:Type ScrollViewer}">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type ScrollViewer}">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="16"/>

<RowDefinition Height="*"/>

<RowDefinition Height="16"/>

</Grid.RowDefinitions>

<RepeatButton Grid.Row="0" Command="ScrollBar.LineUpCommand" Delay="0"/>

<ScrollContentPresenter Grid.Row="1" Content="{TemplateBinding Content}"/>

<RepeatButton Grid.Row="2" Command="ScrollBar.LineDownCommand" Delay="0"/>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</ListBox.Resources>

<Rectangle Fill="White" Height="50" Width="50" Margin="0,4,0,0"/>

<Rectangle Fill="Yellow" Height="50" Width="50" Margin="0,4,0,0"/>

<Rectangle Fill="Green" Height="50" Width="50" Margin="0,4,0,0"/>

<Rectangle Fill="Magenta" Height="50" Width="50" Margin="0,4,0,0"/>

</ListBox>

</StackPanel>

</Window>


======================


So what did I missed?
How can I force the stack panel to size its content (i.e. the list box) to the available space?
 
Back
Top