Last ListBox Item hides behind the command Bar in windows phone 8.1 RT

Question

Inside my xaml page, I have a dynamically generated ListBox, Textblocks and Textboxes in a Stack Panel and it also has a "Page.BottomAppBar" which consists the CommandBar at the bottom of the page.

Code Edit 1 :(Provided Complete XAML UI code)

<Page>
<ScrollViewer VerticalScrollBarVisibility="Auto">
    <Grid Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="60"></RowDefinition>
            <RowDefinition Height="auto"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <TextBlock Foreground="#616161" x:Name="tbHeading1" Text="Event Details" Margin="15,0,0,0" Width="auto" TextWrapping="Wrap" VerticalAlignment="Center" FontFamily="Calibri" FontSize="28" HorizontalAlignment="Left"></TextBlock>
        </Grid>
        <!--<ScrollViewer VerticalScrollBarVisibility="Auto"  >-->
            <Grid Grid.Row="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <StackPanel Grid.Row="0" Background="White" Margin="0,0,0,1">
                    <!--EVENT TYPE-->
                    <TextBlock FontFamily="Arial MT Regular" Margin="15,0,0,0" Foreground="#616161" x:Name="tbEventType" Text="Event Type" FontSize="20"></TextBlock>
                    <ComboBox x:Name="cmbEventType" RequestedTheme="Light" Padding="5,0,0,0" PlaceholderText=" - Tap for Selection - " FontSize="16" FontFamily="Calibri" Width="auto" BorderBrush="#80b656" BorderThickness="2" SelectedIndex="-1" SelectionChanged="cmbEventType_SelectionChanged" Margin="15,0">
                        <ComboBox.ItemTemplate>
                            <DataTemplate>
                                <Grid>
                                    <TextBlock x:Name="txtEventType" Text="{Binding Name}" Padding="5,0,0,0" Foreground="#80b656" FontFamily="Calibri" FontSize="20" TextAlignment="Left"/>
                                </Grid>
                            </DataTemplate>
                        </ComboBox.ItemTemplate>
                    </ComboBox>
                    <!--END EVENT TYPE-->
                    <!--SITE-->
                    <TextBlock FontFamily="Arial MT Regular" Margin="15,5,0,0" Foreground="#616161" x:Name="tbSite" Text="Site" FontSize="20"></TextBlock>
                    <ComboBox x:Name="cmbSite" RequestedTheme="Light" Padding="5,0,0,0" PlaceholderText=" - Tap for Selection - " FontSize="16" FontFamily="Calibri" Width="auto" BorderBrush="#80b656" BorderThickness="2" Margin="15,0"
                          SelectionChanged="cmbSite_SelectionChanged" SelectedIndex="-1">
                        <ComboBox.ItemTemplate>
                            <DataTemplate>
                                <Grid>
                                    <TextBlock x:Name="txtSite" Text="{Binding Name}" Padding="5,0,0,0" Foreground="#80b656" FontFamily="Calibri" FontSize="20" TextAlignment="Left"/>
                                </Grid>
                            </DataTemplate>
                        </ComboBox.ItemTemplate>
                    </ComboBox>
                    <!--END SITE-->
                    <!--LOCATION-->
                    <TextBlock FontFamily="Arial MT Regular" Margin="15,5,0,0" Foreground="#616161" x:Name="tbLocation" Text="Location" FontSize="20"></TextBlock>
                    <ComboBox x:Name="cmbLocation" RequestedTheme="Light" Padding="5,0,0,0" PlaceholderText=" - Tap for Selection - " FontSize="16" FontFamily="Calibri" Width="auto" BorderBrush="#80b656" BorderThickness="2" SelectedIndex="-1" Margin="15,0">
                        <ComboBox.ItemTemplate>
                            <DataTemplate>
                                <Grid>
                                    <TextBlock x:Name="txtLocation" Text="{Binding Location_Description}" Padding="5,0,0,0" Foreground="#80b656" FontFamily="Calibri" FontSize="20" TextAlignment="Left"/>
                                </Grid>
                            </DataTemplate>
                        </ComboBox.ItemTemplate>
                    </ComboBox>
                    <!--END LOCATION-->
                    <!--EVENT DATE-->
                    <TextBlock FontFamily="Arial MT Regular" Margin="15,5,0,0" Foreground="#616161" x:Name="tbEventDate" Text="Event Date" FontSize="20"></TextBlock>
                    <DatePicker x:Name="txtEventDate" Margin="15,0" Background="White" Foreground="#80b656" FontSize="20" BorderBrush="Silver"  HorizontalAlignment="Left" Width="auto" DateChanged="txtEventDate_DateChanged"></DatePicker>
                    <!--END EVENT DATE-->
                    <Line x:Name="lineSeparator" Fill="Gray" Stroke="Gray" X2="1" Stretch="Fill" Margin="0"/>
                </StackPanel>

                <!--ADDITIONAL FIELDS-->
                <Grid x:Name="spAdditionalFeilds" Grid.Row="1" Background="White" Visibility="Collapsed">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"></RowDefinition>
                        <RowDefinition Height="auto"></RowDefinition>
                        <RowDefinition Height="5"></RowDefinition>
                    </Grid.RowDefinitions>
                    <TextBlock x:Name="txtblkAdditionalFeilds" Grid.Row="0" Margin="15,0,0,0" Foreground="#616161" Text="Additional Fields" FontWeight="SemiBold" FontSize="20"></TextBlock>
                    <ListBox x:Name ="lstAdditionFields" Grid.Row="1" ItemsSource="{Binding AdditionalFieldControl, Mode=TwoWay}" ScrollViewer.VerticalScrollBarVisibility="Disabled" Foreground="Black" Background="White" HorizontalAlignment="Left" VerticalAlignment="Top" BorderThickness="1" Width="auto" Tapped="lstAdditionFields_Tapped" ScrollViewer.VerticalScrollMode="Disabled">                            
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Margin="0,5,0,5">
                                    <TextBlock x:Name="txtCaption" FontFamily="Arial MT Regular" Margin="15,5,0,0" Text="{Binding Caption, Mode=TwoWay}" Padding="0,0,0,0" Foreground="#616161" FontSize="20" Width="auto"/>
                                    <Border Margin="15,8,10,0" Padding="2,3,2,3" BorderBrush="#80b656" BorderThickness="2">
                                        <TextBlock x:Name="txtDefaultVal" FontFamily="Arial MT Regular" Text="{Binding StrDefalutValue, Mode=TwoWay}" TextWrapping="WrapWholeWords" Padding="5,0,0,0" Foreground="#80b656" FontSize="20" Loaded="txtDefaultVal_Loaded" />
                                    </Border>
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                    <Line x:Name="lineSeparatorAdditionalField" Grid.Row="2" Fill="Gray" Stroke="Gray" X2="1" Stretch="Fill" Margin="5,0"/>
                </Grid>
                <!--END OF ADDITIONAL FIELD-->

                <!--IMAGE ATACHMENT LIST-->
                <Grid x:Name="spImageList" Grid.Row="2" Background="White" Margin="0,12,0,0" Visibility="Collapsed">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"></RowDefinition>
                        <RowDefinition Height="auto"></RowDefinition>
                    </Grid.RowDefinitions>
                    <TextBlock x:Name="txtblkAttachmentList" Grid.Row="0" Margin="15,0,0,0" Foreground="#616161" Text="Attachment List" FontWeight="SemiBold" FontSize="20"></TextBlock>
                    <ListBox x:Name="lbAttachmentList" Grid.Row="1" ItemsSource="{Binding EventAttachment, Mode=TwoWay}" Foreground="Black" Background="White" HorizontalAlignment="Left" VerticalAlignment="Top" BorderThickness="1" Width="auto" Padding="0,0,0,40" ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled">                           
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <!--ONE ROW-->
                                <StackPanel>
                                    <Grid x:Name="attachmentStackPanel" VerticalAlignment="Center" Margin="0,5">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="150"></ColumnDefinition>
                                            <ColumnDefinition Width="*"></ColumnDefinition>
                                            <ColumnDefinition Width="70"></ColumnDefinition>
                                        </Grid.ColumnDefinitions>
                                        <Image Grid.Column="0" Margin="15,0,0,0" Source="{Binding AttachmentPath,Converter={StaticResource PathToImage}, Mode=TwoWay}" Width="110" Height="110" ></Image>
                                        <TextBlock x:Name="txtName" Grid.Column="1" Width="auto" Margin="20,0,0,0" Text="{Binding Name,Mode=TwoWay}" Style="{StaticResource BodyTextBlockStyle}" Foreground="#616161" VerticalAlignment="Center" FontFamily="Calibri" FontSize="28" HorizontalAlignment="Left" Loaded="txtName_Loaded" />
                                        <AppBarButton x:Name="btnRemoveImage" Grid.Column="2" Height="50" Icon="Cancel" Width="70" VerticalAlignment="Center" Foreground="Red" Click="btnRemoveImage_Click"></AppBarButton>
                                    </Grid>
                                    <Line x:Name="lineSeparator" Fill="#E0E0E0" Stroke="Gray" X2="1" Stretch="Fill" Margin="5,5"/>
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </Grid>
                <!--END IMAGE ATACHMENT LIST-->
            </Grid>
        <!--</ScrollViewer>-->
    </Grid>
</ScrollViewer>
<Page.BottomAppBar>
    <CommandBar x:Name="CommandBarBottom" IsSticky="False" Background="LightGray" Foreground="#616161" ClosedDisplayMode="Compact">
        <CommandBar.PrimaryCommands>
            <AppBarButton x:Name="btnSaveEvent" Icon="Save" Label="Done"  HorizontalAlignment="Right" Content="Save Event" Click="btnSaveEvent_Click"/>
            <AppBarButton x:Name="btnAddAttachment" Icon="Attach" Label="Capture Img"  HorizontalAlignment="Right" HorizontalContentAlignment="Right" Content="Capture Image" Click="btnAddAttachment_Click" />
        </CommandBar.PrimaryCommands>
    </CommandBar>
</Page.BottomAppBar>

Sometimes Last ListBox Item of my UI(List) hides behind the Command Bar(refer attachment). .

So, I don't want the UI to get hide behind the Command bar.

The UI scrolls perfectly apart from overlapping the Command bar. But sometimes this issue appears when it starts scrolling behind the Command Bar. The ScrollViewer doesn't scroll as per as required in this case.

Juanitajuanne

I see where you close your ScrollViewer, but not where you open it, also the stackpanel parent doesn't appear necessary. So I'm going to guess it's a simple broken layout issue with boundaries but would have to see it as it is currently to diagnose. – Chopper

@ChrisW. Thanks for quick reply. But the code provided above is not the complete code, please check the latest edit for complete code. – Juanitajuanne

Answer 1

There are a couple of things:

1. I would advise you to use a ListView instead of a ListBox unless you need it for some particular reason. For more information refer this.
2. The Appbar is currently overlapping your content due to your ApplicationView to fix it, you can refer this.

Idiom

Thank you for the answer and your suggestion. This worked in my case. – Juanitajuanne