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

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.

There are a couple of things:
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.
The Appbar is currently overlapping your content due to your ApplicationView to fix it, you can refer this.

Related

UWP Splitview not responsive whenever there is a horizontal scroll

I've a split view (UWP) that inside a scrollviewer with horizontal scrolling enabled. The code shown below has a user control embedded with displays data in a horizontally stacked fashion. I've a header menu which upon clicked should open a split view from right to left. But, whenever there is a horizontal scrolling, the split view opened is not responsive. When i resize the window with splitview opened and horizontal scrolling enabled, I see the app not responsive. What should I do to make the split view response.
By default, I see the splitview responsive whenever there is no horizontal scrolling.
The user control (KanbanControl) shown below is basically a gridview that uses ItemsWrapGrid as it's panel template stacked horizontally
Things tried out:-
a) Tried to disable the horizontal scrolling when the split view is about to be opened, but it is of no help.
Any thoughts folks?
<ScrollViewer VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto" Height="Auto"
x:Name="ContentView">
<Grid Name="ProjectKanbanGrid">
<kanban:KanbanControl x:Name="KanbanCtrl"/>
<SplitView Name="SplitViewPane"
IsPaneOpen="false"
DisplayMode="Overlay"
OpenPaneLength="500" HorizontalAlignment="Right"
FlowDirection="RightToLeft" PaneBackground="White"
BorderBrush="Red" BorderThickness="10"
PaneClosing="SplitViewPane_PaneClosing">
<SplitView.Pane>
<Border BorderThickness="1" CornerRadius="4" BorderBrush="LightGray">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Background="#FAFAFB" Height="50" BorderBrush="#f0f0f0"
CornerRadius="4" BorderThickness="1">
<TextBlock Text="Edit a Task List" FontWeight="Bold"
HorizontalAlignment="Right" Margin="0,10,20,0"/>
</StackPanel>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="50"/>
<RowDefinition Height="30"/>
<RowDefinition Height="50"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<TextBlock Text="Task List" Foreground="Red"
HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,20,0"/>
<TextBox Name="TaskListName" HorizontalAlignment="Right"
Margin="0,0,20,0" Grid.Row="1" VerticalAlignment="Top" BorderThickness="1"
BorderBrush="LightGray" Width="250"/>
<TextBlock Text="Related Milestone" Grid.Row="2"
HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,20,0"/>
<ComboBox Name="MilestoneList" Width="250" IsTextSearchEnabled="True" BorderThickness="1"
BorderBrush="LightGray" Grid.Row="3" Margin="0,0,20,0"
HorizontalAlignment="Right" VerticalAlignment="Center" >
<ComboBox.ItemTemplate>
<DataTemplate>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<StackPanel Orientation="Horizontal" Grid.Row="4"
HorizontalAlignment="Right" Margin="0,0,20,0" VerticalAlignment="Center">
<Button Background="White" Margin="20,0,0,0" Content="Cancel" Click="Cancel_Click"/>
<Button Background="#1e5598" Foreground="White" Content="Update" Margin="5,0,0,0"/>
</StackPanel>
</Grid>
</Grid>
</Border>
</SplitView.Pane>
</SplitView>
<RelativePanel Visibility="{x:Bind kanban.IsShowResultGrid,Mode=TwoWay}"
HorizontalAlignment="Center">
<ProgressRing x:Name="LoadProgressRing"
Width="25"
Height="25"
RelativePanel.AlignVerticalCenterWithPanel="True"
Visibility="{x:Bind kanban.IsShowProgressRing,Mode=TwoWay}"
IsActive="True" />
<TextBlock x:Name="LoadingMessage" Margin="10,0,0,0" HorizontalAlignment="Center"
Text="Fetching your project layouts"
RelativePanel.AlignVerticalCenterWithPanel="True"
RelativePanel.RightOf="LoadProgressRing"
Visibility="{x:Bind kanban.IsShowProgressRing,Mode=TwoWay}"/>
<TextBlock x:Name="DisplayMsg" Margin="0,0,0,0"
RelativePanel.AlignHorizontalCenterWithPanel="True"
RelativePanel.AlignVerticalCenterWithPanel="True"
Text="{x:Bind kanban.DisplayMessage,Mode=TwoWay}"/>
</RelativePanel>
</Grid>
</ScrollViewer>
Remove the outer scroll viewer from the splitview and wrap it inside the user control Kanban control. This would make the app responsive.
Code snippet is as follows
<Grid Name="ProjectKanbanGrid">
<kanban:KanbanControl x:Name="KanbanCtrl"/>
<SplitView Name="SplitViewPane"
IsPaneOpen="false"
DisplayMode="Overlay"
OpenPaneLength="500" HorizontalAlignment="Right"
FlowDirection="RightToLeft" PaneBackground="White"
BorderBrush="Red" BorderThickness="10"
PaneClosing="SplitViewPane_PaneClosing">
<SplitView.Pane>
<Border BorderThickness="1" CornerRadius="4" BorderBrush="LightGray">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Background="#FAFAFB" Height="50" BorderBrush="#f0f0f0"
CornerRadius="4" BorderThickness="1">
<TextBlock Text="Edit a Task List" FontWeight="Bold"
HorizontalAlignment="Right" Margin="0,10,20,0"/>
</StackPanel>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="50"/>
<RowDefinition Height="30"/>
<RowDefinition Height="50"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<TextBlock Text="Task List" Foreground="Red"
HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,20,0"/>
<TextBox Name="TaskListName" HorizontalAlignment="Right"
Margin="0,0,20,0" Grid.Row="1" VerticalAlignment="Top" BorderThickness="1"
BorderBrush="LightGray" Width="250"/>
<TextBlock Text="Related Milestone" Grid.Row="2"
HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,20,0"/>
<ComboBox Name="MilestoneList" Width="250" IsTextSearchEnabled="True" BorderThickness="1"
BorderBrush="LightGray" Grid.Row="3" Margin="0,0,20,0"
HorizontalAlignment="Right" VerticalAlignment="Center" >
<ComboBox.ItemTemplate>
<DataTemplate>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<StackPanel Orientation="Horizontal" Grid.Row="4"
HorizontalAlignment="Right" Margin="0,0,20,0" VerticalAlignment="Center">
<Button Background="White" Margin="20,0,0,0" Content="Cancel" Click="Cancel_Click"/>
<Button Background="#1e5598" Foreground="White" Content="Update" Margin="5,0,0,0"/>
</StackPanel>
</Grid>
</Grid>
</Border>
</SplitView.Pane>
</SplitView>
<RelativePanel Visibility="{x:Bind kanban.IsShowResultGrid,Mode=TwoWay}"
HorizontalAlignment="Center">
<ProgressRing x:Name="LoadProgressRing"
Width="25"
Height="25"
RelativePanel.AlignVerticalCenterWithPanel="True"
Visibility="{x:Bind kanban.IsShowProgressRing,Mode=TwoWay}"
IsActive="True" />
<TextBlock x:Name="LoadingMessage" Margin="10,0,0,0" HorizontalAlignment="Center"
Text="Fetching your project layouts"
RelativePanel.AlignVerticalCenterWithPanel="True"
RelativePanel.RightOf="LoadProgressRing"
Visibility="{x:Bind kanban.IsShowProgressRing,Mode=TwoWay}"/>
<TextBlock x:Name="DisplayMsg" Margin="0,0,0,0"
RelativePanel.AlignHorizontalCenterWithPanel="True"
RelativePanel.AlignVerticalCenterWithPanel="True"
Text="{x:Bind kanban.DisplayMessage,Mode=TwoWay}"/>
</RelativePanel>
</Grid>
KanbanControl.xaml
<Grid Margin="0,20,0,0" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto" Height="Auto"
x:Name="ContentView">
// Horizontally stacked listview goes here.
</ScrollViewer>
</Grid>

Get height of all child ListViews

So I have a ScrollView with a StackPanel. Inside the StackPanel I have three ListViews with different List<object>-sources.
What I want to achieve is to disable scrolling on the ListViews and only scroll all of them in the same ScrollView.
I get something that scrolls a little bit okey when i hardcode the height of the scrollview, but if I don't do that it only snaps back to start after I release the finger. How can I achieve to get the height?
Current XAML:
<Style x:Key="ListViewHeaderDisableScroll" TargetType="ListView">
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled" />
<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False" />
</Style>
<Page
x:Class="TestApp.SecondaryView.PatientDetailView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ViewModels="using:TestApp.ViewModel"
mc:Ignorable="d">
<Page.DataContext>
<ViewModels:PatientDetailViewModel />
</Page.DataContext>
<Grid Background="White">
<StackPanel Orientation="Vertical">
/* Menu-Grid*/
<ScrollViewer VerticalScrollMode="Enabled" VerticalScrollBarVisibility="Hidden" IsVerticalRailEnabled="True" Height="800">
<StackPanel Name="StackPanel_Lists">
<ListView Style="{StaticResource ListViewHeaderDisableScroll}" ItemsSource="{Binding DummyProblems}" Background="White">
<ListView.Header>
<StackPanel Style="{StaticResource ListViewHeaderStackPanel}">
<TextBlock Text="HEADER 1" FontSize="18" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0"/>
<SymbolIcon Symbol="Play" Foreground="White" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,0,10"/>
</StackPanel>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate x:DataType="ViewModels:PatientDetailViewModel">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock FontSize="20" Grid.Row="0" Foreground="DimGray" Margin="5,5,5,5" Text="{Binding Note}"></TextBlock>
<TextBlock FontSize="15" Grid.Row="1" Foreground="DimGray" Margin="5,5,5,5" Text="{Binding Fo}"></TextBlock>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView Style="{StaticResource ListViewHeaderDisableScroll}" ItemsSource="{Binding DummyMeasures}" Background="White">
<ListView.Header>
<StackPanel Background="DarkGray" Orientation="Horizontal" FlowDirection="LeftToRight" Padding="8,8,8,8">
<TextBlock Text="HEADER 2" FontSize="18" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0"/>
<SymbolIcon Symbol="Play" Foreground="White" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,0,10"/>
</StackPanel>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate x:DataType="ViewModels:PatientDetailViewModel">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock FontSize="20" Grid.Row="0" Foreground="DimGray" Margin="5,5,5,5" Text="{Binding Description}"></TextBlock>
<TextBlock FontSize="15" Grid.Row="1" Foreground="DimGray" Margin="5,5,5,5" Text="{Binding Note}"></TextBlock>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView Style="{StaticResource ListViewHeaderDisableScroll}" ItemsSource="{Binding DummyGoals}" Background="White">
<ListView.Header>
<StackPanel Background="DarkGray" Orientation="Horizontal" FlowDirection="LeftToRight" Padding="8,8,8,8">
<TextBlock Text="HEADER 3" FontSize="18" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0"/>
<SymbolIcon Symbol="Play" Foreground="White" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,0,10"/>
</StackPanel>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate x:DataType="ViewModels:PatientDetailViewModel">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock FontSize="20" Grid.Row="0" Foreground="DimGray" Margin="5,5,5,5" Text="{Binding Description}"></TextBlock>
<TextBlock FontSize="15" Grid.Row="1" Foreground="DimGray" Margin="5,5,5,5" Text="{Binding Fo}"></TextBlock>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</ScrollViewer>
</StackPanel>
</Grid>
So I found this:
The StackPanel outside og everything did ruin everything. I changed it to Grid and made the ScrollView *. Now everything works

ExpanderView not showing controls inside it

In the below XAML, I am able to see the controls inside the expanderview on expanding which is on GridRow 6 but not able to see any controls inside the expanderview which is on GridRow 0. Can anyone help me as to what am I missing here?
<Grid x:Name="ContentPanel" Margin="0,50,0,1" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="0"></RowDefinition>
<RowDefinition Height="Auto" MinHeight="0"></RowDefinition>
<RowDefinition Height="Auto" MinHeight="0"></RowDefinition>
<RowDefinition Height="Auto" MinHeight="0"></RowDefinition>
<RowDefinition Height="Auto" MinHeight="0"></RowDefinition>
<RowDefinition Height="Auto" MinHeight="0"></RowDefinition>
<RowDefinition Height="Auto" MinHeight="0"></RowDefinition>
<RowDefinition Height="Auto" MinHeight="0"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Vertical" VerticalAlignment="Top">
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<Image x:Name="img1" VerticalAlignment="Top" Height="40" Width="40" HorizontalAlignment="Left" Margin="10,92,0,0" Source="Images/1.png" Visibility="Collapsed" Canvas.ZIndex="3"></Image>
<TextBlock x:Name="tbScore" VerticalAlignment="Top" HorizontalAlignment="Left" Foreground="White" Width="Auto" Margin="-32,97,0,0" FontFamily="TypeFace" FontSize="18" Canvas.ZIndex="3"/>
<Image x:Name="img1" Height="90" Margin="-23,20,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="90"/>
<StackPanel Orientation="Vertical">
<TextBlock x:Name="tb1" VerticalAlignment="Top" HorizontalAlignment="Left" Foreground="Black" Width="Auto" Margin="27,20,0,0" FontWeight="SemiBold" FontFamily="Georgia" FontSize="22" Tap="tbUserName_Tap"/>
<TextBlock x:Name="tb2" VerticalAlignment="Top" Foreground="#FF747171" HorizontalAlignment="Left" Margin="27,10,0,0" FontFamily="Georgia" FontSize="20" Tap="tbScreenName_Tap"/>
</StackPanel>
</StackPanel>
<toolkit:ExpanderView x:Name="evMoreDetails" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10,10,0,0" Collapsed="evMoreDetails_Collapsed" Header="V " Foreground="Black" FontSize="26" Expanded="evMoreDetails_Expanded">
<toolkit:ExpanderView.Items>
<StackPanel Orientation="Vertical" VerticalAlignment="Top">
<TextBlock Width="Auto" x:Name="Name" VerticalAlignment="Top" FontFamily="Segoe UI" TextWrapping="Wrap" Margin="10,8,0,0" FontSize="22" FontWeight="SemiBold" Foreground="Black" Text="{Binding name}" />
<TextBlock Width="Auto" x:Name="Name1" VerticalAlignment="Top" Margin="8,2,0,0" FontFamily="Segoe UI" TextWrapping="Wrap" FontSize="20" Foreground="Black" Text="{Binding name1}" />
</StackPanel>
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
</StackPanel>
<StackPanel Grid.Row="6" Orientation="Vertical" HorizontalAlignment="Left" VerticalAlignment="Top">
<toolkit:ExpanderView x:Name="evMore" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10,20,0,50" Visibility="Collapsed">
<toolkit:ExpanderView.HeaderTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" >
<TextBlock Text="+ more" FontSize="26" Foreground="Black">
</TextBlock>
</Grid>
</DataTemplate>
</toolkit:ExpanderView.HeaderTemplate>
<toolkit:ExpanderView.Items>
<ListBox x:Name="lb" Height="250" HorizontalAlignment="Left">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Left" Width="{Binding Width}">
<Image x:Name="ProfilePic" Width="80" Height="80" Source="{Binding image}" VerticalAlignment="Top" Margin="0,10,0,0" />
<StackPanel Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Left" Width="{Binding Width}">
<StackPanel Orientation="Vertical" VerticalAlignment="Top">
<TextBlock Width="Auto" x:Name="Name" VerticalAlignment="Top" FontFamily="Segoe UI" TextWrapping="Wrap" Margin="10,8,0,0" FontSize="22" FontWeight="SemiBold" Foreground="Black" Text="{Binding name}" />
<TextBlock Width="Auto" x:Name="Name1" VerticalAlignment="Top" Margin="8,2,0,0" FontFamily="Segoe UI" TextWrapping="Wrap" FontSize="20" Foreground="Black" Text="{Binding name1}" />
</StackPanel>
</StackPanel>
<StackPanel Orientation="Vertical" VerticalAlignment="Top">
<CheckBox x:Name="chkSelect" IsChecked="{Binding isprim}" Foreground="Black" Tag="{Binding id}" HorizontalAlignment="Right" BorderBrush="Black" BorderThickness="0.5" Margin="0,0,0,0" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
</StackPanel>
</Grid>
I also have same problem in past. Please specify some height for expander item, in your case give some height to stackpanel at row 0.

Scrollviewer is not working

I am not able to make the scrollviewer working! The list is not scrollable. Maybe you can help me :)
<Grid x:Name="grid">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ScrollViewer Margin="0" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
<StackPanel VerticalAlignment="Top">
<ListBox x:Name="KommentareListView" ItemsSource="{Binding}" Foreground="White" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Background="#FF0083FF" Width="10" />
<StackPanel Margin="10,5,10,5" Grid.Column="1">
<TextBlock Text="{Binding Kommentar}"
FontSize="16" Margin="0,0,0,0" TextWrapping="Wrap" Foreground="Black"/>
<StackPanel Orientation="Horizontal" >
<TextBlock Text="{Binding Author}"
FontSize="12" Margin="0,0,0,0" Foreground="Black"/>
<TextBlock Text="{Binding Date}"
FontSize="12" Margin="30,0,0,0" Foreground="Black"/>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button x:Name="mehrKommentareLaden" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,10,0,0" Height="45" Visibility="Collapsed" Content="mehr Kommentare laden" Click="mehrKommentareLaden_Click" />
</StackPanel>
</ScrollViewer>
<StackPanel HorizontalAlignment="Left" VerticalAlignment="Bottom" Grid.Row="1">
<StackPanel x:Name="AnmeldenPanel" VerticalAlignment="Bottom" Width="456" Visibility="Collapsed">
<Button x:Name="AnmeldenButton" Content="Anmelden" VerticalAlignment="Center" BorderBrush="Black" Foreground="Black" Margin="0" Click="AnmeldenButton_Click"/>
<TextBlock TextWrapping="Wrap" Text="Du musst dich anmelden, um Kommentare zu verfassen." Margin="15,0,0,0"/>
</StackPanel>
<toolkit:PhoneTextBox x:Name="KommentarBox" Hint="Dein Kommentar..." LengthIndicatorVisible="True" LengthIndicatorThreshold="10" DisplayedMaxLength="240" TextWrapping="Wrap" Background="#BFB2B2B2" BorderBrush="#BFFFFFFF" Foreground="#91000000" SelectionBackground="#FF0083FF" SelectionForeground="White" Style="{StaticResource PhoneTextBoxWhiteBackground}" Height="74" Width="456"/>
</StackPanel>
<!--<Controls:WatermarkTextBox x:Name="KommentarTextBox" Margin="0,0,100,20" TextWrapping="Wrap" Watermark="Dein Kommentar...." Height="30" VerticalAlignment="Center" FontFamily="Calibri" FontSize="17.333" BorderBrush="#CC000000"/>-->
</Grid>
Try making the List height to auto and everything else to auto which is in between List and ScrollView like you are having StackPanel.

How to add NEXT and PREVIOUS buttons after all the items to list box in windows phone 8

In my windows phone 8 application I'm displaying the result in list box. Every time I'm showing only 20 items in the list.
Now to show the next 20 items i want to add NEXT button and also to show the old items i want to add PREVIOUS buttons.
Below is my code block. In this i'm using the list box inside another list box to show the buttons after the list. But the list is not scrolling.
<Grid x:Name="ContentPanel" Grid.Row="3" Background="White" Margin="0,-3,0,0">
<ListBox x:Name="outerList">
<ScrollViewer Margin="0,0,0,0">
<ListBox x:Name="companiesList" SelectionChanged="companiesList_SelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Auto">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="listItem">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<StackPanel x:Name="namePanel" Grid.Row="0" Orientation="Horizontal" Margin="5,0,0,5" Height="50">
<TextBlock x:Name="nameTextBlock" Text="{Binding CompanyName}" Foreground="#FF501F6E" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" FontSize="28" MaxHeight="40" TextTrimming="WordEllipsis" Margin="0,0,0,0" Width="460" FontWeight="Bold"/>
</StackPanel>
<StackPanel x:Name="addressPanel" Grid.Row="1" Orientation="Horizontal" Margin="5,0,0,5" Height="30">
<TextBlock x:Name="addressTextBlock" Text="{Binding Address}" Foreground="#FF1F1F1F" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" FontSize="20" MaxHeight="30" TextTrimming="WordEllipsis" Margin="0,0,0,0" Width="460"/>
</StackPanel>
<StackPanel x:Name="phonePanel" Grid.Row="2" Orientation="Horizontal" Margin="5,0,0,0" Height="30">
<Image x:Name="phone" Stretch="Uniform" Margin="0,0,0,0" Height="25" Source="Images/list_phone.png" />
<TextBlock x:Name="phoneTextBlock" Text="{Binding Phone1}" Foreground="#FF501F6E" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" FontSize="20" MaxHeight="30" TextTrimming="WordEllipsis" Width="460"/>
</StackPanel>
<Image x:Name="line" Grid.Row="3" Width="460" HorizontalAlignment="Center" Source="Images/separator.png" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
<StackPanel Height="50" Orientation="Horizontal">
<Button Content="Previous" Height="70" HorizontalAlignment="Left" Margin="-5,1,0,0" Name="prevbutton" VerticalAlignment="Center" Width="160" Foreground="#FF501F6E">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="Images/blank_button_nav.png"/>
</Button.Background>
</Button>
<Button Content="Next" Height="70" HorizontalAlignment="Left" Margin="170,1,0,0" Name="nextbutton" VerticalAlignment="Center" Width="160" Foreground="#FF501F6E">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="Images/blank_button_nav.png"/>
</Button.Background>
</Button>
</StackPanel>
</ListBox>
</Grid>
Could you please help me how to add buttons to the list box which is scrollable.
You could put your ListBox inside another ListBox, where the items are the result ListBox and the buttons, e.g:
<Grid x:Name="ContentPanel" Grid.Row="3" Background="White" Margin="0,-3,0,0">
<ListBox x:Name="outerList">
<ListBox x:Name="companiesList" Height="{Binding ActualHeight, ElementName=ContentPanel}" SelectionChanged="companiesList_SelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Auto">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="listItem">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<StackPanel x:Name="namePanel" Grid.Row="0" Orientation="Horizontal" Margin="5,0,0,5" Height="50">
<TextBlock x:Name="nameTextBlock" Text="{Binding CompanyName}" Foreground="#FF501F6E" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" FontSize="28" MaxHeight="40" TextTrimming="WordEllipsis" Margin="0,0,0,0" Width="460" FontWeight="Bold"/>
</StackPanel>
<StackPanel x:Name="addressPanel" Grid.Row="1" Orientation="Horizontal" Margin="5,0,0,5" Height="30">
<TextBlock x:Name="addressTextBlock" Text="{Binding Address}" Foreground="#FF1F1F1F" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" FontSize="20" MaxHeight="30" TextTrimming="WordEllipsis" Margin="0,0,0,0" Width="460"/>
</StackPanel>
<StackPanel x:Name="phonePanel" Grid.Row="2" Orientation="Horizontal" Margin="5,0,0,0" Height="30">
<Image x:Name="phone" Stretch="Uniform" Margin="0,0,0,0" Height="25" Source="Images/list_phone.png" />
<TextBlock x:Name="phoneTextBlock" Text="{Binding Phone1}" Foreground="#FF501F6E" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" FontSize="20" MaxHeight="30" TextTrimming="WordEllipsis" Width="460"/>
</StackPanel>
<Image x:Name="line" Grid.Row="3" Width="460" HorizontalAlignment="Center" Source="Images/separator.png" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<StackPanel Height="50" Orientation="Horizontal">
<Button Content="Previous" Height="70" HorizontalAlignment="Left" Margin="-5,1,0,0" Name="prevbutton" VerticalAlignment="Center" Width="160" Foreground="#FF501F6E">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="Images/blank_button_nav.png"/>
</Button.Background>
</Button>
<Button Content="Next" Height="70" HorizontalAlignment="Left" Margin="170,1,0,0" Name="nextbutton" VerticalAlignment="Center" Width="160" Foreground="#FF501F6E">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="Images/blank_button_nav.png"/>
</Button.Background>
</Button>
</StackPanel>
</ListBox>
</Grid>
When buttons tapped, you could modify the content of the inner ListBox: