WPF Grid Items and Right Aligned Text - wpf

I have a WPF form where I'm trying to make a simple input form. Two labels, two textboxes, and a "submit" button. I have the layout pretty good, the only thing that I can't get is for my "Labels" to be right aligned inside their cells. I have tried both TextAlign="Right" and HorizontialAlign="Right", that moves the text ALL the way over, overlaying my textbox, not just moving inside the cell. Below is the XAML for the window.
<Window x:Class="MyWebKeepAliveDesktop.Login"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MyWebKeepAlive Desktop - Login" WindowStyle="None" AllowsTransparency="true" Height="200" Width="400" >
<Border Background="#50FFFFFF" CornerRadius="7" BorderBrush="{StaticResource WindowFrameBrush}" BorderThickness="2,0,2,2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition/>
</Grid.RowDefinitions>
<Border Background="{StaticResource WindowFrameBrush}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
CornerRadius="5,5,0,0" Margin="-1,0,-1,0" MouseLeftButtonDown="DragWindow">
<Grid>
<TextBlock Foreground="White" FontWeight="Bold" VerticalAlignment="Center" Margin="10,2,10,2"
Text="MyWebKeepAlive Desktop Login"/>
<Button Content="X" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="5" FontSize="7"
Width="15" Height="15" Padding="0" Command="ApplicationCommands.Close"/>
</Grid>
</Border>
<Grid Grid.Row="1" Width="350" Height="130" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="10" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<TextBlock TextAlignment="center" Text="Please provide your username/password that is used on the MyWebKeepAlive.com site to login." TextWrapping="Wrap" Grid.Row="0" Grid.ColumnSpan="2" />
<TextBlock Text="Username" FontWeight="Bold" Grid.Row="1" Grid.Column="0"/>
<TextBox Name="txtUsername" Width="150" Grid.Row="1" Grid.Column="1" />
<TextBlock Text="Password" FontWeight="Bold" Grid.Row="2" />
<TextBox Name="txtPassword" Width="150" Grid.Row="2" />
<Button Name="btnLogin" Grid.Row="4" Grid.ColumnSpan="2">
<TextBlock Text="Login" />
</Button>
</Grid>
</Grid>
</Border>
</Window>

Your grid only has one column as written. It will need two to support your setting of Grid.Column=1 for the text boxes. Thus, you need to add a <ColumnDefinitions> block. With the XAML the way it is now, WPF just throws both controls into the same column, hence the behavior you are seeing.

Here's what I came up with. Just learning WPF myself. As PeterAllenWebb mentioned, your main issue is you are missing the ColumnDefinitions. I also added the TextAlignment="Right" attributes to the two TextBlocks.
<Grid Grid.Row="1" Width="350" Height="130" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="10" />
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock TextAlignment="center" Text="Please provide your username/password that is used on the MyWebKeepAlive.com site to login." TextWrapping="Wrap" Grid.Row="0" Grid.ColumnSpan="2" />
<TextBlock Text="Username" TextAlignment="Right" FontWeight="Bold" Grid.Row="1" Grid.Column="0"/>
<TextBox Name="txtUsername" Width="150" Grid.Row="1" Grid.Column="1" />
<TextBlock Text="Password" TextAlignment="Right" FontWeight="Bold" Grid.Row="2" />
<TextBox Name="txtPassword" Width="150" Grid.Row="2" Grid.Column="1"/>
<Button Name="btnLogin" Grid.Row="4" Grid.ColumnSpan="2">
<TextBlock Text="Login" />
</Button>
</Grid>

Related

Avoid Clipping when translated into height (supporting different resolution)

I'm making an application in which i've used some controls inside Grid Panel. Its working fine but there is a problem for different screen resolution. The Grid controls cannot adapt screen resolution and clip out some control in Height. Whereas width adapt screen resolution correctly. The before and after image is under as you can see when translated into height, cause clipping problem. How to resolve this?
before translated into height:
after translated into height:
Code:
<Grid Grid.Row="3">
<Grid.Background>
<SolidColorBrush Color="#FF3E7038" Opacity="0.3"/>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Customer:" Grid.Column="0" Margin="10"/>
<controls:AutoCompleteBox Margin="0,10,10,0" Name="CustomerSearch" IsTextCompletionEnabled="True" SelectedItem="{Binding Name, Mode=TwoWay}" Grid.Column="1" PreviewKeyDown="CustomerSearch_PreviewKeyDown" >
<controls:AutoCompleteBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Code}"/>
<TextBlock Text="{Binding Name}"/>
<TextBlock Text="{Binding Address}"/>
<TextBlock Text="{Binding Contact}"/>
</StackPanel>
</DataTemplate>
</controls:AutoCompleteBox.ItemTemplate>
</controls:AutoCompleteBox>
<TextBlock Text="Gross Amount:" Grid.Column="2" VerticalAlignment="Center" />
<TextBox Margin="5,10,0,0" Name="GrossAmount" Text="0.0" Grid.Column="3" IsReadOnly="True"/>
<TextBlock Text="Discount%:" Grid.Column="2" Grid.Row="1"/>
<TextBox Name="Discount" Text="0.0" Grid.Column="3" Grid.Row="1" PreviewTextInput="Discount_PreviewTextInput" PreviewKeyDown="Discount_PreviewKeyDown" />
<TextBlock Text="Net Pay:" Grid.Column="2" Grid.Row="2"/>
<TextBox Name="NetPay" Text="0.0" Grid.Column="3" Grid.Row="2" PreviewTextInput="Discount_PreviewTextInput" PreviewKeyDown="Discount_PreviewKeyDown" />
<TextBlock Text="Paid:" Grid.Column="2" Grid.Row="3"/>
<TextBox Name="Paid" Text="0.0" Grid.Column="3" Grid.Row="3" PreviewTextInput="Paid_PreviewTextInput" PreviewKeyDown="Paid_PreviewKeyDown"/>
<TextBlock Text="Return:" Grid.Column="2" Grid.Row="4"/>
<TextBox Name="Return" Text="0.0" Grid.Column="3" Grid.Row="4" IsReadOnly="True"/>
<WrapPanel Grid.Row="5" Margin="0,10,0,0" Grid.ColumnSpan="5" Grid.Column="2">
<Button Name="CheckoutBtn" Margin="0,0,5,0" PreviewKeyDown="CheckoutBtn_PreviewKeyDown" Click="CheckoutBtn_Click" >
<StackPanel Orientation="Horizontal">
<Image Width="40" Height="40" Stretch="Uniform" Source="/Images/checkout.png"/>
<Label Content="CHECKOUT" />
</StackPanel>
</Button>
<Button Name="CancelBtn" Margin="0,0,5,0" Click="CancelBtn_Click" >
<StackPanel Orientation="Horizontal">
<Image Width="40" Height="40" Stretch="Uniform" Source="/Images/cancel.png"/>
<Label Content="CANCEL" />
</StackPanel>
</Button>
<Button Name="SaveBtn" Click="SaveBtn_Click" Margin="0,0,5,0">
<StackPanel Orientation="Horizontal">
<Image Width="40" Height="40" Stretch="Uniform" Source="/Images/save.png"/>
<Label Content="SAVE" />
</StackPanel>
</Button>
</WrapPanel>
</Grid>

Stretch TextBox in StackPanel

This is the current XAML i'm using to do this... and for the life of me cannot figure out how to expand the textbox to fill the entire column. Could anyone please guide me in the correct direction?
Thank you in advance!
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="15" />
<RowDefinition Height="15" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--ROW 0-->
<TextBlock Text="DOMAIN:"/>
<!--ROW 1-->
<Separator Grid.Row="1" Grid.ColumnSpan="2"/>
<!--ROW 2-->
<TextBlock Text="Connection credentials:" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Row="2" Grid.Column="0"/>
<StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="1">
<Button Content="EDIT" Style="{DynamicResource SquareButtonStyle}" Width="80" Margin="0,0,10,0"/>
<TextBlock x:Name="CurrentCredentialslbl" Text="Connect as:" HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
</StackPanel>
<!--ROW 3-->
<TextBlock Text="Find accounts in domain:" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Row="3" Grid.Column="0"/>
<StackPanel Orientation="Horizontal" Grid.Row="3" Grid.Column="1">
<TextBox />
<Button Content="Browse" Style="{DynamicResource SquareButtonStyle}" Width="80" Margin="10,0,0,0"/>
</StackPanel>
<!--ROW 4-->
<CheckBox Content="Only search in this container" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Row="4" Grid.Column="0"/>
</Grid>
Grid with 2 columns instead of StackPanel should fit perfectly
<Grid Grid.Row="3" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBox />
<Button Grid.Column="1"
Content="Browse"
Style="{DynamicResource SquareButtonStyle}"
Width="80" Margin="10,0,0,0"/>
</Grid>

Arrow Key Navigation in a WPF Form is Odd

I have a WPF form with which I would like to have arrow-key navigation. The current system is off, even though I have successfully specified the tab navigation order. I have two rows of three radio buttons. When I am on the middle button, top row, I should be able to hit the left arrow and select the first button of the top row; instead it selects the first button, bottom row. How do I correct this?
Update:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="80*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="15*"/>
<RowDefinition Height="15*"/>
<RowDefinition Height="15*"/>
<RowDefinition Height="30*"/>
<RowDefinition Height="25*"/>
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0" Content="Who:" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,0,5,0" FontSize="12"/>
<Label Grid.Column="0" Grid.Row="1" Content="Caller:" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,0,5,0" />
<Label Grid.Column="0" Grid.Row="2" Content="Office:" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,0,5,0" />
<Label Grid.Column="0" Grid.Row="3" Content="Name:" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,0,5,0" />
<Button Grid.Column="0" Grid.Row="4" Content="Find" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="0,0,0,0" Width="50" Command="{Binding Path=FindCommand}" IsDefault="True" Click="Button_Click" TabIndex="9" />
<Grid Grid.Column="1" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<RadioButton Content="All People" Grid.Column="0" HorizontalAlignment="Left" Margin="0,5,0,0" VerticalAlignment="Top" IsChecked="{Binding Path=IsPersonAll}" TabIndex="3" />
<RadioButton Content="Users Only" Grid.Column="1" HorizontalAlignment="Left" Margin="0,5,0,0" VerticalAlignment="Top" IsChecked="{Binding Path=IsPersonUser}" TabIndex="4" />
<RadioButton Content="Admin Only" Grid.Column="2" HorizontalAlignment="Left" Margin="0,5,0,0" VerticalAlignment="Top" TabIndex="5" />
</Grid>
<Grid Grid.Column="1" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<RadioButton Content="Off Campus" Grid.Column="0" HorizontalAlignment="Left" Margin="0,5,0,0" VerticalAlignment="Top" IsChecked="{Binding Path=IsCallerOff}" TabIndex="6" />
<RadioButton Content="Admin" Grid.Column="1" HorizontalAlignment="Left" Margin="0,5,0,0" VerticalAlignment="Top" IsChecked="{Binding Path=IsCallerOnAd}" TabIndex="7" />
<RadioButton Content="User" Grid.Column="2" HorizontalAlignment="Left" Margin="0,5,0,0" VerticalAlignment="Top" TabIndex="8" />
</Grid>
<ComboBox
Grid.Column="1" Grid.Row="2"
Height="25" HorizontalAlignment="Stretch"
Margin="0,0,0,0" VerticalAlignment="Top"
ItemsSource="{Binding Path=Offices}"
SelectedItem="{Binding Path=Office}" TabIndex="2" />
<Grid Grid.Column="1" Grid.Row="3">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="55*"/>
<RowDefinition Height="45*"/>
<RowDefinition Height="50*"/>
</Grid.RowDefinitions>
<TextBox Name="lName" Grid.Column="0" Grid.Row="0" Margin="0,0,5,0" VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="22" Text="{Binding Path=LastName, UpdateSourceTrigger=PropertyChanged}" TabIndex="0" />
<TextBox Grid.Column="1" Grid.Row="0" Margin="5,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="22" Text="{Binding Path=FirstName, UpdateSourceTrigger=PropertyChanged}" TabIndex="1" />
<Label Grid.Column="0" Grid.Row="1" Content="Last Name" HorizontalAlignment="Left" Margin="-5,-5,0,0" VerticalAlignment="Top" />
<Label Grid.Column="1" Grid.Row="1" Content="First Name" HorizontalAlignment="Left" Margin="0,-5,0,0" VerticalAlignment="Top" />
<Label Grid.Row="2" Grid.ColumnSpan="2" Content="Please supply search information in Department or Name." Foreground="Red" HorizontalAlignment="Stretch" Margin="-5,-5,0,0" VerticalAlignment="Top" Height="26" Visibility="{Binding Path=ErrVisibility}"/>
</Grid>
</Grid>
It's also for me kind of odd behaviour and after playing around with it i can tell you that it's caused by the HorizontalAlignment property, but i can't really explain why. Maybe someone else can shed some light on that.
Some more information:
In your case controls are focused alphabetically by the content property. You can easily test that by changing
<RadioButton Content="All People" Grid.Column="0" HorizontalAlignment="Left"
to
<RadioButton Content="Pall People" Grid.Column="0" HorizontalAlignment="Left"
After changing, controls are now focused correctly from right to left on first line because of alphabetical order: Users -> Pall People -> Off Campus.
As i was not aware of this behaviour i tried to reproduce by creating a new project with following XAML, but the behaviour of arrow keys was as expected, focusing the next neigbour in direction of the arrow key:
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<RadioButton Grid.Column="0" Content="All People"></RadioButton>
<RadioButton Grid.Column="1" Content="Users Only"></RadioButton>
<RadioButton Grid.Column="2" Content="Admin Only"></RadioButton>
</Grid>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<RadioButton Grid.Column="0" Content="Off Campus"></RadioButton>
<RadioButton Grid.Column="1" Content="Admin"></RadioButton>
<RadioButton Grid.Column="2" Content="User"></RadioButton>
</Grid>
</Grid>
So i removed properties of the radio buttons of your xaml till i finally hit the point by removing HorizontalAlignment.
That XAML is now working as expected, at least for the radio buttons:
<Grid Grid.Column="1" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<RadioButton Content="All People" Grid.Column="0" Margin="0,5,0,0" VerticalAlignment="Top" IsChecked="{Binding Path=IsPersonAll}" TabIndex="3" />
<RadioButton Content="Users Only" Grid.Column="1" Margin="0,5,0,0" VerticalAlignment="Top" IsChecked="{Binding Path=IsPersonUser}" TabIndex="4" />
<RadioButton Content="Admin Only" Grid.Column="2" Margin="0,5,0,0" VerticalAlignment="Top" TabIndex="5" />
</Grid>
<Grid Grid.Column="1" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<RadioButton Content="Off Campus" Grid.Column="0" Margin="0,5,0,0" VerticalAlignment="Top" IsChecked="{Binding Path=IsCallerOff}" TabIndex="6" />
<RadioButton Content="Admin" Grid.Column="1" Margin="0,5,0,0" VerticalAlignment="Top" IsChecked="{Binding Path=IsCallerOnAd}" TabIndex="7" />
<RadioButton Content="User" Grid.Column="2" Margin="0,5,0,0" VerticalAlignment="Top" TabIndex="8" />
</Grid>

ScrollViewer - scroll does not work with images inside ScrollViewer

I have a ScrollViewer, inside of which is some content. The problem is that the scroll doesn't work properly. When you scroll the content with your finger and then release, the scrollable area always snaps back to the top. It just bounces like elastic, and won't stay at the bottom where you scrolled it to.
<Grid Name="DetailPane" Margin="0,0,0,65" VerticalAlignment="Bottom" Visibility="Collapsed" Background="White" Opacity="0.85">
<StackPanel>
<Grid VerticalAlignment="Top">
<Button Margin="0" Padding="0" Click="CloseDetailPanel" HorizontalAlignment="Right" >
<Button.Content>
<Image Source="images\appbar.close.rest.small.png" Width="20" Height="20"></Image>
</Button.Content>
</Button>
</Grid>
<ScrollViewer x:Name="contentScrollViewer" VerticalAlignment="Top">
<Grid>
<StackPanel>
<TextBlock Padding="10,0,10,0" HorizontalAlignment="Left" Name="titleTextBlock" TextWrapping="Wrap" Foreground="#FF2B2929" FontWeight="Bold" />
<Image x:Name="contentThumbnail" Source="bild.jpg" Visibility="Visible" Width="400" Height="300" Margin="10" />
<TextBlock Padding="10" HorizontalAlignment="Left" Name="statusTextBlock" TextWrapping="Wrap" Foreground="#FF2B2929" />
<HyperlinkButton Padding="0,5,0,10" x:Name="WikipeadiaLink" HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="More on Wikipedia" TargetName="_blank" NavigateUri="" Foreground="Blue" FontSize="18" />
</StackPanel>
</Grid>
</ScrollViewer>
</StackPanel>
</Grid>
I've actually had a similar problem before, which I managed to solve with help from Stack Overflow... and yet, here I am again, asking for help on the same topic...
thanks heaps!
UPDATE:
Based on suggestions, I removed the StackPanels and replaced them with Grids. The formatting is perfect, but I still have the same scroll problem! The content still snaps back to the beginning!
<Grid Name="DetailPane" Margin="0,0,0,65" VerticalAlignment="Bottom" Visibility="Collapsed" Background="White" Opacity="0.85">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Margin="0" Padding="0" Click="CloseDetailPanel" HorizontalAlignment="Right" >
<Button.Content>
<Image Source="images\appbar.close.rest.small.png" Width="20" Height="20"></Image>
</Button.Content>
</Button>
</Grid>
<Grid Grid.Row="1">
<ScrollViewer x:Name="contentScrollViewer" VerticalAlignment="Top">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Padding="10,0,10,0" HorizontalAlignment="Left" Name="titleTextBlock" TextWrapping="Wrap" Foreground="#FF2B2929" FontWeight="Bold" />
<Image x:Name="contentThumbnail" Grid.Row="1" Source="bild.jpg" Visibility="Visible" Width="400" Height="300" Margin="10" />
<TextBlock Grid.Row="2" Padding="10" HorizontalAlignment="Left" Name="statusTextBlock" TextWrapping="Wrap" Foreground="#FF2B2929" />
<HyperlinkButton Grid.Row="3" Padding="0,5,0,10" x:Name="WikipeadiaLink" HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="More on Wikipedia" TargetName="_blank" NavigateUri="" Foreground="Blue" FontSize="18" />
</Grid>
</ScrollViewer>
</Grid>
</Grid>
Its because of the stackPanel, try replacing it with something else like Grid.
Try this, I removed a redundant grid and added stretched alignment for the scroll viewer:
<Grid Name="DetailPane" Margin="0,0,0,65" VerticalAlignment="Bottom" Visibility="Collapsed" Background="White" Opacity="0.85">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Click="CloseDetailPanel" HorizontalAlignment="Right" VerticalAlignment="Top">
<Button.Content>
<Image Source="images\appbar.close.rest.small.png" Width="20" Height="20"></Image>
</Button.Content>
</Button>
<ScrollViewer x:Name="contentScrollViewer" VerticalAlignment="Stretch" Grid.Row="1"HorizontalAlignment="Stretch">
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Padding="10,0,10,0" HorizontalAlignment="Left" Name="titleTextBlock" TextWrapping="Wrap" Foreground="#FF2B2929" FontWeight="Bold" />
<Image x:Name="contentThumbnail" Grid.Row="1" Source="bild.jpg" Visibility="Visible" Width="400" Height="300" Margin="10" />
<TextBlock Grid.Row="2" Padding="10" HorizontalAlignment="Left" Name="statusTextBlock" TextWrapping="Wrap" Foreground="#FF2B2929" />
<HyperlinkButton Grid.Row="3" Padding="0,5,0,10" x:Name="WikipeadiaLink" HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="More on Wikipedia" TargetName="_blank" NavigateUri="" Foreground="Blue" FontSize="18" />
</Grid>
</ScrollViewer>
</Grid>
What solved this, in the end, was adding a static height to the ScrollViewer. I realise noone could have seen this as I omitted the part of the code that shows that this is inside a PivotItem.
According to this discussion: http://forums.create.msdn.com/forums/t/84933.aspx a ScrollViewer stops working properly when it is inside a Pivot, unless it has a static height defined.
Infuriating!

Last Grid Column Not Auto Resizing With Grid

I'm having a problem with my TextBoxs not "Auto" resizing. I'm trying to create a form that behaves and looks like the Properties Editor in Visual Studio. What appears to be happening is that the third column is not expanding to fill all of the available remaining space in the grid. Image below is how my form looks on startup.
The width of the textboxs is determined by the MinWidth setting on the third ColumnDefinition statement. Also, the Width is set to "*". With any other setting, the resizing done with the GridSplitter doesn't work correctly.
<StackPanel Orientation="Vertical" VerticalAlignment="Top" x:Name="Stacker" Grid.IsSharedSizeScope="True">
<Expander x:Name="Expand" IsExpanded="True" Header="This is a test of a Second Panel" Width="{Binding Width, ElementName=Stacker}">
<Grid x:Name="EditGrid1" Margin="3" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="50" SharedSizeGroup="SharedSize1" />
<ColumnDefinition Width="Auto" SharedSizeGroup="SharedSize2" />
<ColumnDefinition Width="*" MinWidth="50" x:Name="ValueCol" />
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="1" x:Name="ToolBoxSplitter1" Grid.Row="1" Grid.RowSpan="6" Panel.ZIndex="1" HorizontalAlignment="Stretch" ResizeBehavior="PreviousAndNext" Width="3"/>
<TextBlock MaxHeight="40" Grid.Column="0" Grid.Row="1" Text="{x:Static lex:DoSomeThingView.Name}" />
<TextBlock MaxHeight="40" Grid.Column="0" Grid.Row="2" Text="{x:Static lex:DoSomeThingView.Address}" />
<TextBlock MaxHeight="40" Grid.Column="0" Grid.Row="3" Text="{x:Static lex:DoSomeThingView.Zip}" />
<TextBlock MaxHeight="40" Grid.Column="0" Grid.Row="4" Text="{x:Static lex:DoSomeThingView.NumberOfDoors}" TextTrimming="CharacterEllipsis" Grid.IsSharedSizeScope="True" />
<TextBlock MaxHeight="40" Grid.Column="0" Grid.Row="5" Text="{x:Static lex:DoSomeThingView.DoubleNumber}" />
<TextBox Grid.Column="2" Grid.Row="1" x:Name="UserName1" MaxHeight="50" TextWrapping="Wrap"
VerticalScrollBarVisibility="Auto" SpellCheck.IsEnabled="True" />
<TextBox Grid.Column="2" Grid.Row="2" x:Name="Address1" />
<TextBox Grid.Column="2" Grid.Row="3" x:Name="Zip1" />
<TextBox Grid.Column="2" Grid.Row="4" x:Name="NumberOfDoors1" />
<TextBox Grid.Column="2" Grid.Row="5" x:Name="DoubleNumber1" />
</Grid>
</Expander>
</StackPanel>
Any suggestions on how to correct this?
Have a check once again of any style being set globally because your layout worked perfectly fine with me.
try overriding your textbox style by a local resource
<StackPanel.Resources>
<Style TargetType="{x:Type TextBox}"/>
</StackPanel.Resources>

Resources