We Keep Coding

C# UWP buttons not align the way I wanted

I have created a button next to my "Start" button. In my xaml page, the button appears at where I want it to be.
However, when I run the app, it appears at a random location.
how do I fix this ?
StackPanel>
<TextBlock Text="Description:" Style="{StaticResource SampleHeaderTextStyle}"/>
<TextBlock Style="{StaticResource ScenarioDescriptionTextStyle}" Text="This page is where your exercise starts " FontSize="20"/>
<TextBlock TextWrapping="Wrap" Margin="0,20,0,0" FontSize="20">
Follow the instruction and press "Start" to begin the exercise.
</TextBlock>
<TextBlock TextWrapping="Wrap" Margin="0,0,0,0" FontSize="15">
(Ensure the connected BLE device is working before starting the exercise.)
</TextBlock>
<TextBlock x:Name="txtClock" TextWrapping="Wrap" Margin="0,10,0,0" FontSize="20"/>
<Button x:Name="btnStart" Content="Start" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,10,0,0" Height="38" Width="106" Click="btnStart_Click_1"/>
<TextBlock x:Name="txtExercise" TextWrapping="Wrap" Margin="0,10,0,0" FontSize="15"/>
<TextBlock x:Name="txtAngle" TextWrapping="Wrap" Margin="0,10,0,0" FontSize="15"/>
<TextBlock x:Name="txtDisplay" TextWrapping="Wrap" Margin="0,10,0,0"/>
<TextBlock x:Name="txtAgain" Text="" TextWrapping="Wrap" Margin="0,10,0,0" FontSize="15"/>
<Button x:Name="btnRefresh" Content="Refresh" HorizontalAlignment="Left" VerticalAlignment="Top" Height="38" Width="106" Margin="150,-158,0,0" Click="btnRefresh_Click"/>

Since you are using the Margin-Property of the button it makes sense that it will pop up somewhere else.
To be honest I don't really know why but I had the same problems.
I would advise you to either use a RelativePanel a StackPanel or a Grid.
You can have a read on this microsoft page. To find out more about the difference between the various types.
A grid would look something like this:
(Keep in mind a grid is 0 indexed)
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100"/> //For a Row of 100 units height
<RowDefinition Height="*"/> //For a Row which fills the rest of the available screen space
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/> //For a column of 100 units width
<ColumnDefinition Width="*"/> //For a column which fills the rest of the screen
</Grid.ColumnDefinitions>
<Button x:Name="Button1" Grid.Row="0" Grid.Column="0" />
<Button x:Name="Button2" Grid.Row="1" Grid.Column="1" />
</Grid>
A Stackpanel would look like this:
(A thing to keep in mind here is that a Stackpanel will not resize its elements when the screen/window size changes)
<Stackpanel Orientation="horizontal">
<Button x:Name="Button1"/>
<Button x:Name="Button2"/>
</Stackpanel>

C# WPF - Make Polygon encapsulate text

I'm working on a chat client and I'm having a bit of trouble making it look pretty. I have a polygon defined as this:
<Polygon
Points="0,25 5,27 5,35 200,35 200,15 5,15 5,23 0,25"
Stroke="Purple"
Margin="4, 0, 4, 0">
<Polygon.Fill>
<SolidColorBrush Color="#e4eef2" />
</Polygon.Fill>
</Polygon>
This polygon makes a chat message window similar to the one Skype uses.
A textblock is used directly below it to display the text.
<TextBlock FontSize="14" Width="auto" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="12, 0, 4, 0" TextWrapping="WrapWithOverflow" Text="{Binding text}"/>
If the text is too long and wraps, it falls outside of the polygon. Also, there may be multi-line text, which also falls outside of the polygon. Finally, I'm having trouble getting the polygon to extend the full width of the listitem it is contained in.
The full code is below.
<ListBox Grid.Column="2" Name="MessageList" ScrollViewer.HorizontalScrollBarVisibility="Disabled"> <!-- Messages -->
<ListBox.ItemTemplate>
<DataTemplate>
<DockPanel Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" LastChildFill="True">
<Image Visibility="{Binding visibility}" Height="50" Width="50" Stretch="Fill" Source="sampleavatar.png"/>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Polygon
Points="0,25 5,27 5,35 200,35 200,15 5,15 5,23 0,25"
Stroke="Purple"
Margin="4, 0, 4, 0">
<Polygon.Fill>
<SolidColorBrush Color="#e4eef2" />
</Polygon.Fill>
</Polygon>
<TextBlock FontSize="14" Width="auto" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="12, 0, 4, 0" TextWrapping="WrapWithOverflow" Text="{Binding text}"/>
</Grid>
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
How a message should look, except it should be more centered
Even less centered text when there's no avatar
Text wrapping, also notice the polygon doesn't shrink horizontally(Nor does it grow horizontally when the listboxitem is bigger)

What you can do, is use a combination of Polygons and a TextBox (read only) to achieve what you want.
The key point here is you want the polygon to grow whenever the text grows/wraps. So to get this to work, we can use a TextBox's border, and a combination of polygons to get the triangle.
See below:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Polygon Grid.Column="0"
x:Name="Polygon"
Points="8,0 0,5, 8,10"
Stroke="Purple"
Fill="#e4eef2"
StrokeThickness="2"
VerticalAlignment="Center"
Margin="2,2,-4,0"/>
<Polygon Grid.Column="1"
Panel.ZIndex="10"
Points="8,0 0,5, 8,10"
Stroke="#e4eef2"
Fill="#e4eef2"
StrokeThickness="2"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="-2.5,2,0,0"/>
<TextBox Grid.Column="1"
Background="#e4eef2"
BorderBrush="Purple"
BorderThickness="2,2,2,2"
VerticalAlignment="Center"
Padding="8,0,8,0"
FontSize="14"
Width="auto"
TextWrapping="WrapWithOverflow"
Text="This is a test"
IsReadOnly="True"/>
</Grid>

Your polygon is not going to shrink horizontally with the text because that is actually a different polygon, I think an option is to scale the polygon horizontally or vertically or both which might require some IValueConverters.
Start with this,
<Border VerticalAlignment="Center" BorderThickness="0,1,1,1" BorderBrush="Purple" CornerRadius="5">
<TextBlock x:Name="textBlock"
FontSize="14" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="12, 0, 0, 0" TextWrapping="WrapWithOverflow" Text="blah blah blah blah blah blah blah blah blah "/>
</Border>
Then add your curly thing to the left side.

WPF: How can I stretch the middle child in a DockPanel?

I added a DockPanel to a RadioButton element such that I can distribute the radio button label, a textbox and a button horizontally using 100% of the width.
Using LastChildFill="True"within the DockPanel stretches the last element. This works out nicely if the textbox is the last child in the panel. But, as the button is the last element and has a fixed width, the textbox should be stretched. However, there's no such property like 2ndChildFill="True".
My code looks like this:
<RadioButton HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch">
<DockPanel >
<TextBlock VerticalAlignment="Center">in location:</TextBlock>
<TextBox Grid.Column="1" Margin="10,0,0,0">Path string</TextBox>
<Button HorizontalAlignment="Right"
Margin="10,0,0,0" Padding="3,0">...</Button>
</DockPanel>
</RadioButton>
And it gives me this:
Any ideas, hints to fix this? Many thanks in advance...

You need to set DockPanel.Dock attached property for your elements and leave TextBox as the last element:
<RadioButton HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch">
<DockPanel LastChildFill="True">
<TextBlock DockPanel.Dock="Left"
VerticalAlignment="Center"
Text="in location:" />
<Button DockPanel.Dock="Right"
Margin="10,0,0,0"
Padding="3,0"
Content="..." />
<TextBox Margin="10,0,0,0">
Path string
</TextBox>
</DockPanel>
</RadioButton>

Accepted answer is fixing your problem but creates another one. If someone uses keyboard (TAB) to navigate through your interface, Button will be focused before TextBox. This could be very annoying on a long run. If you don't want to brake your tab orders use Grid instead of DockPanel:
<RadioButton HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" VerticalAlignment="Center">in location:</TextBlock>
<TextBox Grid.Column="1" Margin="10,0,0,0">Path string</TextBox>
<Button Grid.Column="2" HorizontalAlignment="Right" Margin="10,0,0,0" Padding="3,0">...</Button>
</Grid>
</RadioButton>
Alternative would be to control tab orders yourself using TabIndex attribute. This can be tricky though, especially when you display your control in a collection.
<RadioButton HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" TabIndex="0">
<DockPanel LastChildFill="True">
<TextBlock DockPanel.Dock="Left" VerticalAlignment="Center" Text="in location:" />
<Button DockPanel.Dock="Right" Margin="10,0,0,0" Padding="3,0" Content="..." TabIndex="2"/>
<TextBox Margin="10,0,0,0" TabIndex="1">Path string</TextBox>
</DockPanel>
</RadioButton>

How to Validate 4 Sequential Button Clicks (WPF Application)

What I am having trouble figuring out:
- How to capture 4 button clicks and check if they match the correct sequence similar to entering a 4 digit ATM debit card PIN number
I have a WPF Application and added a new Window that has a PIN pad, numbers 0-9, a question mark button (used as a help button), a backspace button (in case you clicked the wrong number), a TextBox at the top which displays a dot instead of the number (Wingdings - letter 'l'), and a hidden TextBlock which would show an Incorrect PIN message if the numbers were not entered in the correct order. For the time being, I am just going to hard code the 4 digit PIN (7410 for example) since my main goal is learning how to capture and validate the button click sequence. Since I will not be using an Enter key button, I want to continue to the next page as soon as the last number is clicked and the sequence was correct, else display the notification message that the PIN is incorrect. I will also put code in to not allow anything except mouse clicks work and limit the TextBox to only allow a max of 4 digits.
I'm guessing I need a method that is called on each button click which keeps track of the sequence and loops back through each time until all 4 numbers are clicked in the correct sequence then moves on to the next page. Sorry if I'm not explaining well, still learning, so if you need more details I'll do my best to give more.
Thank you in advance.
Below is the xaml code for the PIN pad.
<Border BorderThickness="1" BorderBrush="Black">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Background="Black" Height="50" Grid.ColumnSpan="3" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<TextBlock x:Name="PINTextBlock" Foreground="White" FontSize="18" FontFamily="Wingdings" VerticalAlignment="Center" HorizontalAlignment="Center" MaxWidth="4" />
</Border>
<TextBlock x:Name="ErrorMessageTextBlock" Foreground="Red" Visibility="Collapsed" Grid.ColumnSpan="3" Grid.Row="1" />
<StackPanel Orientation="Horizontal" Grid.Row="2">
<Button x:Name="SevenButton" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="50" Height="50" Click="SevenButton_Click" TabIndex="9">
<TextBlock Text="7" FontSize="24" FontWeight="Bold" />
</Button>
<Button x:Name="EightButton" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="50" Height="50" Click="EightButton_Click" TabIndex="10">
<TextBlock Text="8" FontSize="24" FontWeight="Bold" />
</Button>
<Button x:Name="NineButton" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="50" Height="50" Click="NineButton_Click" TabIndex="11">
<TextBlock Text="9" FontSize="24" FontWeight="Bold" />
</Button>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Row="3">
<Button x:Name="FourButton" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="50" Height="50" Click="FourButton_Click" TabIndex="6">
<TextBlock Text="4" FontSize="24" FontWeight="Bold" />
</Button>
<Button x:Name="FiveButton" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="50" Height="50" Click="FiveButton_Click" TabIndex="7">
<TextBlock Text="5" FontSize="24" FontWeight="Bold" />
</Button>
<Button x:Name="SixButton" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="50" Height="50" Click="SixButton_Click" TabIndex="8">
<TextBlock Text="6" FontSize="24" FontWeight="Bold" />
</Button>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Row="4">
<Button x:Name="OneButton" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="50" Height="50" Click="OneButton_Click" TabIndex="3">
<TextBlock Text="1" FontSize="24" FontWeight="Bold" />
</Button>
<Button x:Name="TwoButton" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="50" Height="50" Click="TwoButton_Click" TabIndex="4">
<TextBlock Text="2" FontSize="24" FontWeight="Bold" />
</Button>
<Button x:Name="ThreeButton" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="50" Height="50" Click="ThreeButton_Click" TabIndex="5">
<TextBlock Text="3" FontSize="24" FontWeight="Bold" />
</Button>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Row="5">
<Button x:Name="QuestionMarkButton" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="50" Height="50" Click="QuestionMarkButton_Click" TabIndex="0">
<TextBlock Text="?" FontSize="24" FontWeight="Bold" />
</Button>
<Button x:Name="ZeroButton" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="50" Height="50" Click="ZeroButton_Click" TabIndex="1">
<TextBlock Text="0" FontSize="24" FontWeight="Bold" />
</Button>
<Button x:Name="BackspaceButton" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="50" Height="50" Click="BackspaceButton_Click" TabIndex="2">
<TextBlock Text="Õ" FontFamily="Wingdings" FontSize="24" FontWeight="Bold" />
</Button>
</StackPanel>
</Grid>
</Border>

You can do the validation using Xaml and converters. All you have to do is;
Use binding with ErrorTextBlock and listen for PinTextBlock.Text and run it through converter which will do the actual validation.
This way the validation logic will be seperated nicely and will be reusable. There are other WPF inbuilt validation ways and you can google about them. (IDataErrorInfo and ValidationRules). This would be the "WPF" way.
But the learning curve is little steep. If you just wanna finish this thing, then yes, add this to StackPanel: Button.Click="buttonClickHandler", and in code-behind you will be recieve every button you click in single place. And do your calculations there.

I would have a string that gets appended to (or modified in the case of Backspace or Clear) with each button click, and base my validation off if that string is 4 characters long and equals the PIN #
If it's 4 characters and matches, move to next page. If it's 4 characters and doesn't match, display the error message.
I know this is a learning application, but I'd highly recommend learning the MVVM design pattern if you will be working with WPF.
In that case, I'd have something like a List<KeyValuePair<string, ICommand>> Buttons that gets bound to an ItemsControl with an ItemsPanelTemplate set to a UniformGrid with 3 rows and 3 columns, and the ItemTemplate set to a Button that binds the Content to the Key and the Command to the Value, and an bool IsErrorDisplayed value that gets set to true anytime the error message should be displayed.
<TextBlock x:Name="ErrorMessageTextBlock" Foreground="Red"
Visibility="{Binding IsErrorDisplayed, Converter={StaticResource BooleanToVisibiltyConverter}}"
Grid.ColumnSpan="3" Grid.Row="1" />
<ItemsControl ItemsSource="{Binding Buttons}">
<!-- ItemsPanelTemplate -->
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="3" Rows="3" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<!-- ItemTemplate -->
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Width="50" Height="50" Command="{Binding Value}">
<TextBlock Text="{Binding Key}" FontSize="24" FontWeight="Bold" />
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I'd also probably do something to secure the PIN # so isn't being stored as plain text.

Associate them all to the same event handler. In that event uselogic to associate the x:Name with an Integer and build up the 4 digit PIN. This just lets you consolidate logic.
private void one_Click(object sender, RoutedEventArgs e)
{
Button btn = (Button)sender;
Int32 num;
switch (btn.Name)
{
case "one":
num = 1;
break;
case "two":
num = 2;
break;
default:
// problem
}
if (PIN > 1000) // logic
// now you have you have num and can deal with the logic in one click event;
PIN = (PIN * 10) + num;
if (PIN = correctPIN)
{
}
else
{
}
}

How to make Silverlight UserControl fill webpage?

I am building a webapp in Silverlight 4.0 and I would like it to have it expand to fill the width and height of the web browser. However, I can only get it to remain top center at the moment.
I have a Grid with 3 rows, 2 columns and Controls inside these which fill the cells. Therefore I only believe that I need the Grid to stretch to the size of the UserControl and the UserControl to the size of the page. But how should I do this?
Example XAML:
<UserControl x:Class="RepentWeb.MainPage"
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:local="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls.WatermarkedTextBox"
mc:Ignorable="d"
d:DesignHeight="740" d:DesignWidth="1020" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<Grid x:Name="LayoutRoot" Background="White" Width="1020">
<Grid Height="740" HorizontalAlignment="Stretch" Name="grid1" VerticalAlignment="Stretch" Width="1020" ShowGridLines="False">
<Grid.RowDefinitions>
<RowDefinition Height="372*" />
<RowDefinition Height="40*" />
<RowDefinition Height="328" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="415*" />
<ColumnDefinition Width="411*" />
</Grid.ColumnDefinitions>
<local:WatermarkedTextBox Watermark="Source" Margin="12,6,8,8" Name="tbCode" AcceptsReturn="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" FontFamily="Courier New" FontSize="12" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" KeyDown="tbCode_KeyDown" IsTabStop="True" />
<local:WatermarkedTextBox Grid.Column="1" Watermark="Output" AcceptsReturn="True" Margin="9,6,15,8" Name="tbOutput" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" VerticalAlignment="Stretch" FontFamily="Courier New" FontSize="12" />
<local:WatermarkedTextBox Grid.Row="1" Grid.Column="1" Watermark="Stack" Grid.RowSpan="2" AcceptsReturn="True" Margin="9,6,15,6" Name="tbStack" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" d:LayoutOverrides="GridBox" VerticalAlignment="Stretch" FontFamily="Courier New" FontSize="12" />
<local:WatermarkedTextBox Grid.Row="2" Grid.Column="0" Watermark="Command line args, one per line. Strings/arrays wrapped in quotes" AcceptsReturn="True" HorizontalScrollBarVisibility="Auto" Margin="12,8,8,6" Name="tbArgs" VerticalAlignment="Stretch" VerticalScrollBarVisibility="Auto" FontFamily="Courier New" FontSize="12" />
<Button Grid.Row="1" Grid.Column="0" Content="Run" Height="23" HorizontalAlignment="Left" Margin="12,8,0,0" Name="btnRun" VerticalAlignment="Top" Width="75" Click="btnRun_Click" />
<Button Grid.Row="1" Grid.Column="0" Content="Step Forward" Height="23" HorizontalAlignment="Left" Margin="93,8,0,0" Name="btnStep" VerticalAlignment="Top" Width="115" Click="btnStep_Click" />
<Button Grid.Row="1" Grid.Column="0" Content="Stop" Height="23" HorizontalAlignment="Left" Margin="214,8,0,0" Name="btnStop" VerticalAlignment="Top" Width="75" Click="btnStop_Click" IsEnabled="False" />
<Button Grid.Row="1" Content="Clear All" Height="23" HorizontalAlignment="Right" Margin="0,8,142,0" Name="btnClear" VerticalAlignment="Top" Width="75" Click="btnClear_Click" />
<TextBlock Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="376,0,0,0" Name="lblCurrPos" Text="Current Position:" VerticalAlignment="Top" />
<TextBlock Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="376,17,0,0" Name="lblChar" Text="Char: 0" VerticalAlignment="Top" />
<TextBlock Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="433,17,0,0" Name="lblSymbol" Text="Symbol: " VerticalAlignment="Top" />
</Grid>
</Grid>
</UserControl>

Take 2:
Thanks for the example XAML. Makes it much easier than guessing.
There are a number of changes needed.
First you need to remove the fixed
width and height from your outer
grids as previously mentioned.
Next your left column should be an auto width as the row of buttons determines the width of the left side.
The right column should be simply 1* (or just *) to use up the remaining column space.
The middle row needs to be either auto (to fit the row of buttons) or fixed pixel height. As you have a text box on the right overlapping that row, auto would cause problems if you add a splitter later, so I recommend a fixed pixel height of 40.
The first and last row should both be * in height. They then use 50% of the remaining height.
The buttons should be in a stack panel (as mentioned in the other answer) and the info text in a grid within that stack panel.
If you resize they should change as per the pictures below:
Updated XAML below:
<Grid x:Name="LayoutRoot" Background="White">
<Grid HorizontalAlignment="Stretch" Name="grid1" VerticalAlignment="Stretch" ShowGridLines="False">
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
<RowDefinition Height="40" />
<RowDefinition Height="0.5*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="510" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<local:WatermarkedTextBox Watermark="Source" Margin="12,6,8,8" Name="tbCode" AcceptsReturn="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" FontFamily="Courier New" FontSize="12" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" KeyDown="tbCode_KeyDown" IsTabStop="True" />
<TextBox Grid.Column="1" Watermark="Output" AcceptsReturn="True" Margin="9,6,15,8" Name="tbOutput" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" VerticalAlignment="Stretch" FontFamily="Courier New" FontSize="12" />
<TextBox Grid.Row="1" Grid.Column="1" Watermark="Stack" Grid.RowSpan="2" AcceptsReturn="True" Margin="9,6,15,6" Name="tbStack" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" d:LayoutOverrides="GridBox" VerticalAlignment="Stretch" FontFamily="Courier New" FontSize="12" />
<TextBox Grid.Row="2" Grid.Column="0" Watermark="Command line args, one per line. Strings/arrays wrapped in quotes" AcceptsReturn="True" HorizontalScrollBarVisibility="Auto" Margin="12,8,8,6" Name="tbArgs" VerticalAlignment="Stretch" VerticalScrollBarVisibility="Auto" FontFamily="Courier New" FontSize="12" />
<StackPanel Orientation="Horizontal" Grid.Row="1" d:LayoutOverrides="Width" HorizontalAlignment="Left" Margin="12,0,0,0">
<Button Content="Run" Height="23" Margin="5,0,0,0" x:Name="btnRun" VerticalAlignment="Center" Width="75" Click="btnRun_Click" />
<Button Content="Step Forward" Height="23" Margin="5,0,0,0" x:Name="btnStep" VerticalAlignment="Center" Width="115" Click="btnStep_Click" />
<Button Content="Stop" Height="23" HorizontalAlignment="Left" Margin="5,0,0,0" x:Name="btnStop" VerticalAlignment="Center" Width="75" Click="btnStop_Click" IsEnabled="False" />
<Button Content="Clear All" Height="23" Margin="5,0,0,0" x:Name="btnClear" VerticalAlignment="Center" Width="75" Click="btnClear_Click" />
<Grid Width="107" Margin="13,0,0,0">
<local:WatermarkedTextBox Height="23" HorizontalAlignment="Left" x:Name="lblCurrPos" Text="Current Position:" VerticalAlignment="Top" />
<local:WatermarkedTextBox HorizontalAlignment="Left" Margin="0,17,0,0" x:Name="lblChar" Text="Char: 0" VerticalAlignment="Top" d:LayoutOverrides="HorizontalAlignment" />
<local:WatermarkedTextBox Height="23" HorizontalAlignment="Left" Margin="57,17,0,0" x:Name="lblSymbol" Text="Symbol: " VerticalAlignment="Top" />
</Grid>
</StackPanel>
</Grid>
</Grid>
Take 1:
The overall Silverlight shell size is determined by the settings in your web hosting page and defaults to full browser so the problem is likely your control or more likely the grid within the control.
Make sure you do not have a fixed size specified in either the user-control or the inner grid. Then both default to stretching to the parent.
The exception is if all your columns
are fixed width, then the grid will
collapse back to the total width of
the columns, or if both are "auto" width in
which case the columns will collapse
to the width of the objects within
them (and not force them to stretch).
Make sure at least one of your grid columns is star sized (e.g. 1*) to ensure it takes up the remaining space of the grid. If you want each column to take up 50% of the browser, make them both "1*" width.
If you can post your sample XAML it will be easier to provide an exact fix.

There are a number of things you should consider. #1, remove any fixed width items, such as on the layout grid. (1020)
When you use "*" syntax within row & column definitions with numbers, this is like using a weighting. It isn't like a minimum size or anything like that. Typically this would be for something to use 1/3rd of available width would be to have a two columns with widths of "" (or "1") and "2*" respectively. 2* tells that column to request double the space. (In this case 2/3rds) using heights of 372* and 238* are weighted for available space. If you want controls to have a minimum size then assign the controls MinimumWidth/Height values. (They'll use avaialable space beyond that size as available.)
Generally it's a good idea to use 1 control per cell in a grid. If you want to position more than one control in a cell, then make that another layout control such as a StackPanel or Grid. Stack panels plus left margins work well for arranging things like buttons or text elements. Positioning multiple controls in a layout area using margins is quite messy. If you want controls arranged in multiple rows, or evenly taking up avaiable space, a Grid is preferable.