Search code examples
xamlwindows-phone-8longlistselector

LongListSelector adjust based on screen width


I am new to windows phone 8 development and i have a very basic question i believe.

I wish to make my LongListSelector have 100% width and height but all the things i have tried didnt work.

I have tried Auto, * etc but nothing seems to do it.

Here is my code:

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel Grid.Row="0" Margin="12,17,0,28">
        <TextBlock Text="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock TextWrapping="Wrap" Text="{Binding Path=LocalizedResources.SetupsPageTitle, Source={StaticResource LocalizedStrings}}" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

        <phone:LongListSelector HorizontalAlignment="Left"  Width="400" Height="400"
                        VerticalAlignment="Top" 
                        Name="lstSetups" ItemsSource="{Binding BusRouteSetups}"
                        SelectionChanged="lstSetups_SelectionChanged"
                        LayoutMode="List">
            <phone:LongListSelector.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Vertical" Margin="0,10,0,10" Background="Coral">
                        <TextBlock TextWrapping="Wrap" Margin="5"  FontWeight="Bold"  Text="{Binding Details.Title}" />
                        <TextBlock TextWrapping="Wrap" Margin="5"  Text="{Binding Details.Description}" />
                    </StackPanel>
                </DataTemplate>
            </phone:LongListSelector.ItemTemplate>
        </phone:LongListSelector>

    </Grid>

</Grid>

Any help will be much appreciated.


Solution

  • Use HorizontalAlignment = Stretch (also Vertical), then Width and Height of LLS will be set to maximum space that is available to that Control:

    <phone:LongListSelector HorizontalAlignment="Stretch"                  
                            VerticalAlignment="Stretch" 
                            Name="lstSetups" ItemsSource="{Binding BusRouteSetups}"
                            SelectionChanged="lstSetups_SelectionChanged"
                            LayoutMode="List">
    

    Note that it's maximum height will be determined by Grid (parent of Control). While you have set RowDefinition's Height to * - it means that it will use all the remaining height of the screen (remaining - some space is used by first row (set to auto) - StackPanel with title).