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.
Related
It would be great if someone could help me. I currently have a phone page and I would like to display the images, but somehow my scrollviewer doesnt scroll to the bottom I can only see two rows of Images and after that the scrollviewer doesn't go any further.
Here is my XAML:
<ScrollViewer x:Name="Details">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Rectangle Fill="Black" Opacity="0.5" Grid.ColumnSpan="2" Grid.RowSpan="8"/>
<StackPanel Margin="15,10,1,0" Grid.Column="0" Grid.Row="0">
<TextBlock Text="{Binding xxx.Address}" Foreground="White" FontSize="22" FontWeight="Bold" />
<TextBlock Foreground="White">
<Run Text="{Binding xxx.Zipcode}" />
<Run />
<Run Text="{Binding xxx.Location}" />
</TextBlock>
</StackPanel>
<Image Source="/Assets/xxx.png" Height="50" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,15,0,0" />
<StackPanel Grid.Row="2">
<TextBlock Text="{Binding xxxx.xxx}" Foreground="White" MinHeight="50" TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Left" FontWeight="Bold" Margin="15,10,1,0" FontSize="22" />
<TextBlock Text="xxxx" Foreground="White" TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="15,0,1,10" />
</StackPanel>
<Image Source="/Assets/xxx.png" Grid.Row="2" Grid.Column="1" Height="50" Margin="10" />
<TextBlock Text="xxx:" Margin="15,10,1,0" Foreground="#FFD8051E" Grid.Column="0" Grid.Row="3"/>
<TextBlock Text="xxxx:" Margin="15,10,1,0" Grid.Column="0" Grid.Row="4" />
<TextBlock Margin="15,10,1,0" Grid.Column="1" Grid.Row="4" >
<Run Text="{Binding xxx}" />
<Run Text=" m" />
</TextBlock>
<TextBlock Text="xxxx:" Margin="15,10,1,0" Grid.Column="0" Grid.Row="5" />
<TextBlock Text="{Binding xxxx}" Margin="15,10,1,0" Grid.Column="1" Grid.Row="5" />
<TextBlock Text="xxxx:" Margin="15,10,1,0" Grid.Column="0" Grid.Row="6" />
<ItemsControl Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="7" ItemsSource="{Binding xxxx}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<tool:WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Margin="10" Source="{Binding .,Converter={StaticResource xxxxx}}" Height="100" Width="100" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</ScrollViewer>
I think the problem is in your ScrollViewer Properties.
there should be some more definition
<ScrollViewer Grid.Row="1"
Name="Details"
VerticalScrollBarVisibility="Visible" AllowDrop="False" ManipulationMode="Control">
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.
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:
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.
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!