Last ListBox Item ẩn đằng sau lệnh Bar trong windows phone 8.1 RT

Question

Bên trong trang xaml của tôi, tôi có một ListBox, Textblocks và Textbox được tạo động trong một Stack Panel và nó cũng có một "Page.BottomAppBar" bao gồm CommandBar tại Phía dưới của trang.

Mã Chỉnh sửa 1: (Cung cấp đầy đủ XAML mã UI)

<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> 

Đôi khi cuối ListBox mục của giao diện người dùng của tôi (danh sách) ẩn đằng sau Command Bar (xem tập tin đính kèm). .

Vì vậy, tôi không muốn giao diện người dùng ẩn sau thanh Lệnh.

Giao diện người dùng cuộn hoàn toàn ngoài việc chồng chéo thanh Lệnh. Nhưng đôi khi vấn đề này xuất hiện khi nó bắt đầu di chuyển phía sau Command Bar. ScrollViewer không cuộn theo yêu cầu trong trường hợp này.

Answer 1

Có một vài điều:

1. tôi sẽ khuyên bạn nên sử dụng một ListView thay vì một ListBox trừ khi bạn cần nó vì một lý do cụ thể. Để biết thêm thông tin refer this.
2. Appbar hiện đang chồng chéo nội dung của bạn do ApplicationView để sửa lỗi, bạn có thể tham khảo this.