Is it possible to have a non scrolling row within a ScrollViewer? - xaml

Since I need to have a portion (but not all) of my page in a Scroll Viewer, I've got a winrt-xaml layout like so:
<Page>
<StackPanel>
<Grid>
</Grid>
<ScrollViewer>
<Grid>
</Grid>
</ScrollViewer>
</StackPanel>
</Page>
I have column titles for the second grid, which is inside the scroll viewer. If I put the column titles outside the grid (placing them in the last row of the outer grid) it is difficult if not impossible to make them align with the columns in the inner grid. But if I leave them in the inner grid (inside the ScrollViewer) they can scroll out of sight.
SO: is it possible to freeze that first row into place? Or, OTOH, is if, after all, readily doable to have the column widths in "Grid1" (the outer grid) align seamlessly with the column widths in "Grid2" (the inner grid)?
UPDATE
I can't see why, but it's not quite working, using option #2 in Juan's answer. The only problem is that both the "Longitude" and the "Color" labels are displayed way to the right of where they should be - all the others align perfectly, and their horizontal alignment property is set to "Left," so I don't see why these two are not cooperating. Here's the xaml:
Group Name
<TextBlock Foreground="Yellow" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="1" FontSize="28" VerticalAlignment="Center" HorizontalAlignment="Center">Title</TextBlock>
<TextBlock Foreground="Yellow" Grid.Row="2" Grid.Column="1" FontSize="28" VerticalAlignment="Center">Address</TextBlock>
<TextBlock Foreground="Yellow" Grid.Row="2" Grid.Column="3" FontSize="28" VerticalAlignment="Center" HorizontalAlignment="Left" >Latitude</TextBlock>
<TextBlock Foreground="Yellow" Grid.Row="2" Grid.Column="5" FontSize="28" VerticalAlignment="Center" HorizontalAlignment="Left">Longitude</TextBlock>
<TextBlock Foreground="Yellow" Grid.Row="2" Grid.Column="6" Grid.ColumnSpan="2" FontSize="28" VerticalAlignment="Center">Color</TextBlock>
</Grid>
<StackPanel Orientation="Horizontal" Grid.Row="0">
<TextBlock x:Name="textBlockLocation1" FontSize="20" Margin="4" HorizontalAlignment="Right">Location 1</TextBlock>
<TextBox x:Name="textBoxTitle1" Margin="4" MinWidth="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Row="1">
<TextBlock x:Name="textBlockLocation2" FontSize="20" Margin="4" HorizontalAlignment="Right">Location 2</TextBlock>
<TextBox x:Name="textBoxTitle2" Margin="4" Width="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Row="2">
<TextBlock x:Name="textBlockLocation3" FontSize="20" Margin="4" HorizontalAlignment="Right">Location 3</TextBlock>
<TextBox x:Name="textBoxTitle3" Margin="4" Width="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Row="3">
<TextBlock x:Name="textBlockLocation4" FontSize="20" Margin="4" HorizontalAlignment="Right">Location 4</TextBlock>
<TextBox x:Name="textBoxTitle4" Margin="4" Width="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Row="4">
<TextBlock x:Name="textBlockLocation5" FontSize="20" Margin="4" HorizontalAlignment="Right">Location 5</TextBlock>
<TextBox x:Name="textBoxTitle5" Margin="4" Width="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Row="5">
<TextBlock x:Name="textBlockLocation6" FontSize="20" Margin="4" HorizontalAlignment="Right">Location 6</TextBlock>
<TextBox x:Name="textBoxTitle6" Margin="4" Width="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Row="6">
<TextBlock x:Name="textBlockLocation7" FontSize="20" Margin="4" HorizontalAlignment="Right">Location 7</TextBlock>
<TextBox x:Name="textBoxTitle7" Margin="4" Width="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Row="7">
<TextBlock x:Name="textBlockLocation8" FontSize="20" Margin="4" HorizontalAlignment="Right">Location 8</TextBlock>
<TextBox x:Name="textBoxTitle8" Margin="4" Width="200" LostFocus="CheckForAllRecordsValid" ></TextBox>
</StackPanel>
<TextBox x:Name="textBoxAddress1" Grid.Row="0" Grid.Column="1" MinWidth="240" Margin="4"></TextBox>
<TextBox x:Name="textBoxAddress2" Grid.Row="1" Grid.Column="1" Margin="4"></TextBox>
<TextBox x:Name="textBoxAddress3" Grid.Row="2" Grid.Column="1" Margin="4"></TextBox>
<TextBox x:Name="textBoxAddress4" Grid.Row="3" Grid.Column="1" Margin="4"></TextBox>
<TextBox x:Name="textBoxAddress5" Grid.Row="4" Grid.Column="1" Margin="4"></TextBox>
<TextBox x:Name="textBoxAddress6" Grid.Row="5" Grid.Column="1" Margin="4"></TextBox>
<TextBox x:Name="textBoxAddress7" Grid.Row="6" Grid.Column="1" Margin="4"></TextBox>
<TextBox x:Name="textBoxAddress8" Grid.Row="7" Grid.Column="1" Margin="4" LostFocus="CheckForAllRecordsValid" ></TextBox>
<TextBox x:Name="textBoxLatitude1" Grid.Row="0" Grid.Column="3" Margin="4" MinWidth="120"></TextBox>
<TextBox x:Name="textBoxLatitude2" Grid.Row="1" Grid.Column="3" Margin="4" ></TextBox>
<TextBox x:Name="textBoxLatitude3" Grid.Row="2" Grid.Column="3" Margin="4" ></TextBox>
<TextBox x:Name="textBoxLatitude4" Grid.Row="3" Grid.Column="3" Margin="4" ></TextBox>
<TextBox x:Name="textBoxLatitude5" Grid.Row="4" Grid.Column="3" Margin="4" ></TextBox>
<TextBox x:Name="textBoxLatitude6" Grid.Row="5" Grid.Column="3" Margin="4" ></TextBox>
<TextBox x:Name="textBoxLatitude7" Grid.Row="6" Grid.Column="3" Margin="4" ></TextBox>
<TextBox x:Name="textBoxLatitude8" Grid.Row="7" Grid.Column="3" Margin="4" LostFocus="CheckForAllRecordsValid" ></TextBox>
<TextBox x:Name="textBoxLongitude1" Grid.Row="0" Grid.Column="5" Margin="4" MinWidth="120"></TextBox>
<TextBox x:Name="textBoxLongitude2" Grid.Row="1" Grid.Column="5" Margin="4"></TextBox>
<TextBox x:Name="textBoxLongitude3" Grid.Row="2" Grid.Column="5" Margin="4"></TextBox>
<TextBox x:Name="textBoxLongitude4" Grid.Row="3" Grid.Column="5" Margin="4"></TextBox>
<TextBox x:Name="textBoxLongitude5" Grid.Row="4" Grid.Column="5" Margin="4"></TextBox>
<TextBox x:Name="textBoxLongitude6" Grid.Row="5" Grid.Column="5" Margin="4"></TextBox>
<TextBox x:Name="textBoxLongitude7" Grid.Row="6" Grid.Column="5" Margin="4"></TextBox>
<TextBox x:Name="textBoxLongitude8" Grid.Row="7" Grid.Column="5" Margin="4" LostFocus="CheckForAllRecordsValid"></TextBox>
<ComboBox x:Name="cmbxColor1" Grid.Row="0" Grid.Column="6" Margin="4,4,0,4" MinWidth="200" Height="36" HorizontalAlignment="Left" SelectionChanged="CmbxColor1_OnSelectionChanged"/>
<ComboBox x:Name="cmbxColor2" Grid.Row="1" Grid.Column="6" Margin="4,4,0,4" MinWidth="200" Height="36" HorizontalAlignment="Left"/>
<ComboBox x:Name="cmbxColor3" Grid.Row="2" Grid.Column="6" Margin="4,4,0,4" MinWidth="200" Height="36" HorizontalAlignment="Left"/>
<ComboBox x:Name="cmbxColor4" Grid.Row="3" Grid.Column="6" Margin="4,4,0,4" MinWidth="200" Height="36" HorizontalAlignment="Left"/>
<ComboBox x:Name="cmbxColor5" Grid.Row="4" Grid.Column="6" Margin="4,4,0,4" MinWidth="200" Height="36" HorizontalAlignment="Left"/>
<ComboBox x:Name="cmbxColor6" Grid.Row="5" Grid.Column="6" Margin="4,4,0,4" MinWidth="200" Height="36" HorizontalAlignment="Left"/>
<ComboBox x:Name="cmbxColor7" Grid.Row="6" Grid.Column="6" Margin="4,4,0,4" MinWidth="200" Height="36" HorizontalAlignment="Left"/>
<ComboBox x:Name="cmbxColor8" Grid.Row="7" Grid.Column="6" Margin="4,4,0,4" MinWidth="200" Height="36" HorizontalAlignment="Left" LostFocus="CheckForAllRecordsValid" />
<TextBlock Grid.Row="0" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="7,10,6,10" >or</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="7,10,6,10">or</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="7,10,6,10">or</TextBlock>
<TextBlock Grid.Row="3" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="7,10,6,10">or</TextBlock>
<TextBlock Grid.Row="4" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="7,10,6,10">or</TextBlock>
<TextBlock Grid.Row="5" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="7,10,6,10">or</TextBlock>
<TextBlock Grid.Row="6" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="7,10,6,10">or</TextBlock>
<TextBlock Grid.Row="7" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="7,10,6,10">or</TextBlock>
<TextBlock Grid.Row="0" Grid.Column="4" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="6,10">and</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="4" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="6,10">and</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="4" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="6,10">and</TextBlock>
<TextBlock Grid.Row="3" Grid.Column="4" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="6,10">and</TextBlock>
<TextBlock Grid.Row="4" Grid.Column="4" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="6,10">and</TextBlock>
<TextBlock Grid.Row="5" Grid.Column="4" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="6,10">and</TextBlock>
<TextBlock Grid.Row="6" Grid.Column="4" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="6,10">and</TextBlock>
<TextBlock Grid.Row="7" Grid.Column="4" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="6,10">and</TextBlock>
</Grid>
</ScrollViewer>
UPDATE 2
Since I'm still having an alignment problem (the grid columns above don't always align, width-wise, with the grid columns below), I'm posting here, as requested, my Grid XAML. First, the top grid:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="320"></ColumnDefinition>
<ColumnDefinition Width="{Binding ElementName=Col1Grid2, Path=ActualWidth}"></ColumnDefinition>
<ColumnDefinition Width="{Binding ElementName=Col2Grid2, Path=ActualWidth}"></ColumnDefinition>
<ColumnDefinition Width="{Binding ElementName=Col3Grid2, Path=ActualWidth}"></ColumnDefinition>
<ColumnDefinition Width="{Binding ElementName=Col4Grid2, Path=ActualWidth}"></ColumnDefinition>
<ColumnDefinition Width="{Binding ElementName=Col5Grid2, Path=ActualWidth}"></ColumnDefinition>
<ColumnDefinition Width="{Binding ElementName=Col6Grid2, Path=ActualWidth}"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="120"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
...now, the second (inner) grid:
<Grid x:Name="gridDynamicRowsParent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="320"></ColumnDefinition>
<ColumnDefinition x:Name="Col1Grid2" Width="Auto"></ColumnDefinition>
<ColumnDefinition x:Name="Col2Grid2" Width="Auto" />
<ColumnDefinition x:Name="Col3Grid2" Width="Auto"></ColumnDefinition>
<ColumnDefinition x:Name="Col4Grid2" Width="Auto"></ColumnDefinition>
<ColumnDefinition x:Name="Col5Grid2" Width="Auto"></ColumnDefinition>
<ColumnDefinition x:Name="Col6Grid2" Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
Also, the controls are "rubbery" - when I enter a value for which they are not wide enough, they will expand sideways to accommodate some of the additional space; I don't want this - the controls (TextBoxes) should remain the same width...

You can try two different approaches for your case:
Create a SharedSizeGroup for the columns (see this article -one between a lot out there- as example )
Name the columns in the second grid and set the columns in the first grid to bind their Width to the ActualWidth property of the corresponding columns, something like this:
<Page>
<StackPanel>
<Grid Name="Grid1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding ElementName=Col1Grid2, Path=ActualWidth}"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ScrollViewer>
<Grid Name="Grid2">
<Grid.ColumnDefinitions>
<ColumnDefinition Name="Col1Grid2" Width="*"/>
<ColumnDefinition Name="Col2Grid2" Width="Auto"/>
</Grid.ColumnDefinitions>
</ScrollViewer>
</StackPanel>
</Page>
See if you can get the desired behavior with any of these options. Good luck!

Related

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.

Memory leak due to GridView in Windows Store apps

I have the following GridView
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemsGridView"
AutomationProperties.Name="Items"
TabIndex="1"
Grid.RowSpan="2"
Padding="116,136,116,46"
SelectionMode="Single"
IsSwipeEnabled="false"
Visibility="Collapsed">
<GridView.ItemTemplate>
<DataTemplate>
<!--<Border BorderBrush="DarkSeaGreen" BorderThickness="1">-->
<Grid Background="{Binding objBackgroundColor}" Opacity="1" Width="400" Height="80">
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBlock Text="{Binding objCustomTestPaper.Name}" TextWrapping="Wrap" FontWeight="SemiBold" VerticalAlignment="Top" Foreground="{Binding objForegroundColor}" Style="{StaticResource TitleTextStyle}" FontSize="20" MaxHeight="25" Margin="10,5,10,0" />
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="120"></ColumnDefinition>
</Grid.ColumnDefinitions>
<!--<Image Grid.Column="0" Height="35" VerticalAlignment="Center" HorizontalAlignment="Center" Source="Assets/paper.png"></Image>-->
<StackPanel Grid.Column="0" Margin="5,7,0,0">
<callisto:Rating FontStretch="SemiCondensed" ItemCount="5" Value="{Binding objCustomTestPaper.TestRating}" FontWeight="Light" VerticalAlignment="Bottom" Margin="0,2,5,1" Background="Transparent" HorizontalAlignment="Left" Foreground="{Binding objForegroundColor}" IsHitTestVisible="False" FontSize="12" >
</callisto:Rating>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<TextBlock Text="Attempted by others:" Margin="4,0,0,0" FontSize="12" FontWeight="Light" Foreground="{Binding objForegroundColor}"></TextBlock>
<TextBlock Text="{Binding objCustomTestPaper.AttemptCount}" FontWeight="SemiBold" Margin="5,0,0,0" FontSize="12" Foreground="{Binding objForegroundColor}"></TextBlock>
<TextBlock Text="times" Margin="3,0,0,0" FontSize="12" FontWeight="Light" Foreground="{Binding objForegroundColor}"></TextBlock>
</StackPanel>
</StackPanel>
<StackPanel VerticalAlignment="Stretch" Grid.Column="2" Margin="0,0,0,0" >
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
<TextBlock Text="Time:" FontSize="16" Foreground="{Binding objForegroundColor}" VerticalAlignment="Bottom" FontWeight="SemiLight"></TextBlock>
<TextBlock Text="{Binding strTestDuration}" Margin="5,0,0,0" FontSize="18" VerticalAlignment="Bottom" Foreground="{Binding objForegroundColor}" FontWeight="SemiLight"></TextBlock>
</StackPanel>
<StackPanel Margin="0,2,0,0" Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
<TextBlock Text="Points:" FontSize="16" Margin="0,0,0,0" VerticalAlignment="Bottom" Foreground="{Binding objForegroundColor}" FontWeight="SemiLight"></TextBlock>
<TextBlock Text="{Binding objCustomTestPaper.TotalMarks}" Margin="5,0,0,0" VerticalAlignment="Bottom" FontSize="18" Foreground="{Binding objForegroundColor}" FontWeight="SemiLight"></TextBlock>
</StackPanel>
</StackPanel>
</Grid>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
It is working fine and loads data successfully but When I press back button the data remains in the memory (not usable) and keeps on increasing at various visits to the page. I don't know how how to clear the items of the GridView when OnNavigationFrom(,) method is called. I am trying to use objGridView.Items.Clear() but it throws some HRXXXX exception.

Rating Control in Windows store apps and Binding integer value to it

I have the followin
g code
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemsGridView"
AutomationProperties.Name="Items"
TabIndex="1"
Grid.RowSpan="2"
Padding="116,136,116,46"
SelectionMode="Single"
IsSwipeEnabled="false"
Visibility="Collapsed">
<GridView.ItemTemplate>
<DataTemplate>
<Border BorderBrush="DarkSeaGreen" BorderThickness="1">
<StackPanel HorizontalAlignment="Left" Width="250" Height="180" Background="SeaGreen">
<StackPanel VerticalAlignment="Top" >
<TextBlock Text="{Binding Name}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" TextWrapping="Wrap" MinHeight="40" FontSize="22" Margin="15,10,15,0"/>
</StackPanel>
<Grid Height="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="20*"/>
<RowDefinition Height="20*"/>
<RowDefinition Height="20*"/>
<RowDefinition Height="20*"/>
<RowDefinition Height="20*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="TotalMarks:" Foreground="White" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,0,0"/>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding TotalMarks}" Foreground="White" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Total Questions:" Foreground="White" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,0,0" />
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding TotalQuestions}" Foreground="White" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" />
<TextBlock Grid.Row="2" Grid.Column="0" Text="Total attempts:" Foreground="White" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,0,0" />
<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding AttemptCount}" Foreground="White" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" />
<TextBlock Grid.Row="3" Grid.Column="0" Text="Ratings:" Foreground="White" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,0,0" />
<TextBlock Grid.Row="3" Grid.Column="1" Text="{Binding TestRating}" Foreground="White" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" />
<!-- Here I want to add -->
</Grid>
</StackPanel>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
I want to add a rating control in the grid in the data template so that its value can be bound with an integer variableTestRating. As I am new to databinding I don't how to do this. Please provide some assistance.
Thanks in advance.
It probably depends on the Rating control you are using. Here's how you would do it with Callisto's:
<callisto:Rating ItemCount="5" Value="{Binding TestRating}" />
Assuming the binding works for the TextBlock immediately above the spot where you want to insert ratings, this should work as well.
To facilitate any changes to be reflected in your source, you would need to make the binding two-way for the changes that are made in the control to be bound back to the source. So the appropriate change would be:
<callisto:Rating ItemCount="5" Value="{Binding TestRating, Mode=TwoWay}" />

Block Scrolling of one particular item in ScrollViewer

I have one static page displaying result of an event as given below.
<StackPanel Height="3700" >
<ScrollViewer Margin="10" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" Height="495" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="70"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="170"/>
<ColumnDefinition Width="200"/>
</Grid.ColumnDefinitions>
<Border Grid.Row="1" Grid.ColumnSpan="5" Background="#FF3664F8"/>
<Border Grid.Row="8" Grid.ColumnSpan="5" Background="#FF3664F8"/>
<Border Grid.Row="2" Grid.ColumnSpan="5">
<Image Source="../Images/Divider.png" Margin="0,30,0,0" Height="7"/>
</Border>
<Border Grid.Row="3" Grid.ColumnSpan="5">
<Image Source="../Images/Divider.png" Margin="0,30,0,0" Height="7"/>
</Border>
<Border Grid.Row="4" Grid.ColumnSpan="5">
<Image Source="../Images/Divider.png" Margin="0,30,0,0" Height="7"/>
</Border>
<TextBlock Text="column1" Grid.Row="1" Grid.Column="0" TextWrapping="Wrap" FontSize="24" Padding="5" FontWeight="SemiBold"/>
<TextBlock Text="column2" Grid.Row="1" Grid.Column="1" FontSize="24" Padding="5" FontWeight="SemiBold" TextWrapping="Wrap"/>
<TextBlock Text="column3" Grid.Row="1" Grid.Column="2" FontSize="24" Padding="5" FontWeight="SemiBold" TextWrapping="Wrap"/>
<TextBlock Text="column4" Grid.Row="1" Grid.Column="3" FontSize="24" Padding="5" FontWeight="SemiBold" TextWrapping="Wrap"/>
<TextBlock Text="column5" Grid.Row="1" Grid.Column="4" FontSize="24" Padding="5" FontWeight="SemiBold" TextWrapping="Wrap"/>
<TextBlock Text="1" Grid.Row="2" Grid.Column="0" Padding="10" FontSize="20"/>
<TextBlock Text="3269" Grid.Row="2" Grid.Column="1" Padding="10"/>
<TextBlock Text="SINGH SURENDER" Grid.Row="2" Grid.Column="2" TextWrapping="Wrap" Padding="5"/>
<TextBlock Text="IND" Grid.Row="2" Grid.Column="3" Padding="5"/>
<TextBlock Text="1:05:44" Grid.Row="2" Grid.Column="4" Padding="5"/>
<TextBlock Text="2" Grid.Row="3" Grid.Column="0" Padding="10" FontSize="20"/>
<TextBlock Text="12784" Grid.Row="3" Grid.Column="1" Padding="10"/>
<TextBlock Text="UTRAINEN JUTSI" Grid.Row="3" Grid.Column="2" Padding="5"/>
<TextBlock Text="FIN" Grid.Row="3" Grid.Column="3" Padding="5"/>
<TextBlock Text="1:05:57" Grid.Row="3" Grid.Column="4" Padding="5"/>
<TextBlock Text="3" Grid.Row="4" Grid.Column="0" Padding="10" FontSize="20"/>
<TextBlock Text="3202" Grid.Row="4" Grid.Column="1" Padding="10"/>
<TextBlock Text="KUMAR SANTOSH" Grid.Row="4" Grid.Column="2" Padding="5"/>
<TextBlock Text="IND" Grid.Row="4" Grid.Column="3" Padding="5"/>
<TextBlock Text="1:06:17" Grid.Row="4" Grid.Column="4" Padding="5"/>
</Grid>
</ScrollViewer>
</StackPanel>
After every result there is an divider line for which I have used an image (Divider.png). We have 5 columns to display so used horizontal scroll viewer to display.
The problem is : My designer wants that , when we scroll horizontally the data should move but the divider line shound not move.
Is it possible somehow??
I'm not sure what is actually wanted as my understanding of the requirements doesn't make sense. If the dividers don't move but the content does then you could end up with the content overlapping the separator.
That said, if you want to stop something from scrolling just take it out of the scrollviewer. If you put the dividers behind the scrollviewer, then as long as you have a transparent background to the scrollviewer content you'll get the effect you're after.