Vista - stackpanel is and autosizing a ListBox

06-12-2007

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?

06-13-2007

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
"Lloyd Dupont" <net.galador@ld> wrote in message news:%23Dn%23D2WrHHA.4764@TK2MSFTNGP06.phx.gbl...

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?

06-13-2007

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".
"Lloyd Dupont" <net.galador@ld> wrote in message news:%23HU2DUXrHHA.5092@TK2MSFTNGP04.phx.gbl...
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
"Lloyd Dupont" <net.galador@ld> wrote in message news:%23Dn%23D2WrHHA.4764@TK2MSFTNGP06.phx.gbl...

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?

06-12-2007	#1 (permalink)
Lloyd Dupont n/a posts	stackpanel is and autosizing a ListBox 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?
My System Specs

06-13-2007	#2 (permalink)
Lloyd Dupont n/a posts	Re: stackpanel is and autosizing a ListBox 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 "Lloyd Dupont" <net.galador@ld> wrote in message news:%23Dn%23D2WrHHA.4764@TK2MSFTNGP06.phx.gbl... 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?
My System Specs

06-13-2007	#3 (permalink)
Radek Cerny n/a posts	Re: stackpanel is and autosizing a ListBox 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". "Lloyd Dupont" <net.galador@ld> wrote in message news:%23HU2DUXrHHA.5092@TK2MSFTNGP04.phx.gbl... 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 "Lloyd Dupont" <net.galador@ld> wrote in message news:%23Dn%23D2WrHHA.4764@TK2MSFTNGP06.phx.gbl... 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?
My System Specs