CODEWITHSUNDEEP
silverlightwindows-phone-7windows-phone-8windows-phone
Artem Zinnatullin
Artem Zinnatullin

Reputation: 4447

Button after ListBox

I need to show ListBox with dynamic content (so I do not know its height) and Button below it. So user should be able to scroll ListBox to end and see button.

In Android I would use RelativeLayout and below property for button or some other solution, but in WP I do not know how to do it.

What I had tryed:

1) Put all in StackPanel

<StackPanel>
    <ListBox />
    <Button />
</StackPanel>

This is not working, because StackPanel is blocking ListBox scrolling.

2) Ok, lets put ListBox in Grid

<StackPanel>
    <Grid>
        <ListBox />
    </Grid>
    <Button />
</StackPanel>

Nothing happens.

3) Put all in Grid and use Grid.Row not worked.

4) Lets put all in Grid and set margin for Button dynamically

<Grid>
    <ListBox />
    <Button />
</Grid>

Ok, this is working, but it is not good solution , because I need to handle ListBoxpopulating each time and reset margin for button. Bad bad bad.

P.S. Also, I can put button as ListBox item (not bad, but not good :)

Help me please...

Upvotes: 3

Views: 148

Answers (1)

Igor Ralic
Igor Ralic

Reputation: 15006

If I understood you correctly, you need a simple Grid defined like this:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <ListBox />
    <Button Grid.Row="1" Height="80"/>
</Grid>

By making height of the row zero to "star" and the first row to Auto, the ListBox will fill the remaining space, and the Button only 80 (you can change this to whatever you like). ListBox is automatically put to row zero because that's the default if it is not explicitly set.

If you don't want the button fixed on the page but to scroll with the ListBox, you could edit the ListBox template like this:

<Style x:Key="ListBoxWithButtonStyle" TargetType="ListBox">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBox">
                <ScrollViewer x:Name="ScrollViewer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" Padding="{TemplateBinding Padding}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <ItemsPresenter/>
                        <Button Content="Touch me" Height="80" Grid.Row="1"/>
                    </Grid>
                </ScrollViewer>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And then apply to ListBox:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <ListBox Style="{StaticResource ListBoxWithButtonStyle}">

    </ListBox>
</Grid>

Upvotes: 7

Related Questions