Dockpanel behaviour in WP8

Question

I am writing a Windows Phone 8 app, and I am having some problems with the UI. I want a control that will stretch to the width of the whole screen, and will flow its children controls horizontally (to fill the space).

Currently, I have a a StackPanel with Orientation = Horizontal, but it doesn't allow the children control (a slider) to have a HorizontalAlignment=Stretch (that actually stretches). I can manually strech the slider, but I don't want to have hardcoded sizes..

Here is the code:

<StackPanel Orientation="Horizontal">
    <TextBlock Text="Hue Bins"  />
    <Slider x:Name="HueBins" VerticalAlignment="Bottom" HorizontalAlignment="Stretch"  Value="24" Maximum="36" Minimum="1"/>
</StackPanel>

and the resulting image:

enter image description here

In normal WPF, there is the Dockpanel control, but that doesn't seem to exist for WP8. Is there anyway to emulate that behavior?

kmatyaszek kmatyaszek · Accepted Answer · 2013-01-28T21:34:30

You can use Grid with two columns:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Hue Bins"  />
    <Slider x:Name="HueBins" Grid.Column="1" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Value="24" Maximum="36" Minimum="1"/>
</Grid>

Dockpanel behaviour in WP8

2 Answers