WPF how to do this indentation? - wpf

I need to format a page as follows:
This code is obviously totally wrong but gives a general idea:
<Grid Grid.Row="10">
<Label Grid.Row="0" Grid.Column="0" Content="Label1"/>
<TextBox Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3"/>
<Label Grid.Row="0" Grid.Column="4" Content="Label2"/>
<TextBox Grid.Row="0" Grid.Column="5">
<Label Grid.Row="0" Grid.Column="6" Content="Label3"/>
<TextBox Grid.Row="0" Grid.Column="7">
<Label Grid.Row="1" Grid.Column="0" Content="Label4"/>
<TextBox Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3"/>
<Label Grid.Row="1" Grid.Column="0" Content="Label5"/>
<TextBox Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3"/>
</Grid>
The most tricky part for me is how to make label2/textbox2 & label3/textbox3 indented to textbox5.
The size of the labels should be dynamic according to the text source so using Width percentages for them is less desirable.
Also, this is a section of a long page (hence the Row="10") so it is best if solution doesn't affect rest of page (I think it won't since it's in the Grid).

Because you have encased this inside of its own Grid, you can divide it into however many rows and columns you want. You've already started with the appropriate column count by putting gray dividers in your image! Just use that and count the number of rectangles you've drawn from left-to-right to define your columns.
<Grid Grid.Row="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Content="Label1"/>
<TextBox x:Name="Textbox1" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="6" Text="text box 1"/>
<Label Grid.Row="0" Grid.Column="8" Content="Label2"/>
<TextBox x:Name="Textbox2" Grid.Row="0" Grid.Column="9" Grid.ColumnSpan="3" Text="text box 2"/>
<Label Grid.Row="0" Grid.Column="12" Content="Label3"/>
<TextBox x:Name="Textbox3" Grid.Row="0" Grid.Column="13" Grid.ColumnSpan="1" Text="text box 3"/>
<Label Grid.Row="1" Grid.Column="0" Content="Label4" />
<TextBox x:Name="Textbox4" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="6" Text="text box 4"/>
<Label Grid.Row="1" Grid.Column="8" Content="Label5"/>
<TextBox x:Name="Textbox5" Grid.Row="1" Grid.Column="9" Grid.ColumnSpan="6" Text="text box 5"/>
</Grid>
Here's the output:

Related

WPF Datepicker shows the content of a nearby Textblock

anybody got an idea why the datepicker shows the content of a nearby label? The label which is displayed is in a different grid. When I delete the Labels text and leave it blank the text of the next label of the grid is displayed and so on.
Cant figure out why this happens. Once im hovering over the datepicker with the mouse it shows the correct watermark.
[EDIT] Sorry, following a part of the code.
<StackPanel Grid.Row="1" Grid.Column="0">
<Grid Margin="10,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Content="Beauftragt durch:"
Grid.Row="0" Grid.Column="0"
Width="110" Margin="10,2"
HorizontalAlignment="Left" />
<TextBox x:Name="OrderedByEmp"
IsEnabled="False"
Text="{Binding OrderedByEmpName}"
Grid.Row="0" Grid.Column="1"
Width="110" Margin="10,2"
/>
<Label Content="Projekt:"
Grid.Row="1" Grid.Column="0"
Width="110" Margin="10,2"
HorizontalAlignment="Left" />
<TextBox x:Name="Project"
MaxLength="10"
Text="{Binding Project}"
Grid.Row="1" Grid.Column="1"
Width="110" Margin="0,2"
/>
<Label Content="Auftrag:"
Grid.Row="2" Grid.Column="0"
Width="110" Margin="10,2"
HorizontalAlignment="Left" />
<TextBox x:Name="Order" Text="{Binding Commission}"
MaxLength="8"
Grid.Row="2" Grid.Column="1"
Width="110" Margin="0,2"
/>
</Grid>
</StackPanel>
<StackPanel Grid.Row="1" Grid.Column="1">
<Grid Margin="10,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Content="Erstellt am:"
Grid.Row="0" Grid.Column="0"
Width="110" Margin="10,2"
HorizontalAlignment="Left" />
<TextBox x:Name="OrderDate" Text="{Binding OrderDate, Mode=TwoWay,StringFormat='{}{0:dd.MM.yyyy}'}"
IsEnabled="False"
Grid.Row="0" Grid.Column="1"
Width="110" Margin="0,2"
/>
<Label Content="Benötigt bis:"
Grid.Row="1" Grid.Column="0"
Width="110" Margin="10,2"
HorizontalAlignment="Left" />
<DatePicker x:Name="ExpectedFinishDate"
Grid.Row="1" Grid.Column="1"
Width="110"></DatePicker>
<Label Content="Abteilung:"
Grid.Row="2" Grid.Column="0"
Width="110" Margin="10,2" />
<ComboBox x:Name="Departments" Grid.Row="2" Grid.Column="1">
<ComboBox.ItemTemplate>
<DataTemplate>
<Label Content="{Binding Bezeichnung}" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</Grid>
</StackPanel>
<StackPanel Grid.Column="2" Grid.Row="1">
<Grid Margin="10,10,2,2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0"
VerticalAlignment="Center" HorizontalAlignment="Right">
FLAG:
</TextBlock>
<Image Grid.Row="0" Grid.Column="1" Height="20" Source="/Pictures/NotStartetButton.png" />
<Label Content="Fertiggestellt am:"
Grid.Row="1" Grid.Column="0"
Width="110" Margin="10,2"
HorizontalAlignment="Left" />
<TextBox x:Name="FinishDatetime"
IsEnabled="False"
Grid.Row="1" Grid.Column="1"
Width="110" Margin="0,2"
/>
<Label Content="Fertiggestellt durch"
Grid.Row="2" Grid.Column="0"
Width="110" Margin="10,2"
HorizontalAlignment="Left" />
<TextBox x:Name="FinishedByEmp"
IsEnabled="False"
Grid.Row="2" Grid.Column="1"
Width="110" Margin="0,2"
/>
</Grid>
</StackPanel>
When I put the datepicker to another spot its working correct.
Tried now for hours to figure out why... but cant find the reason.
Thanks for any suggestion!
I've tried to reproduce the problem in another file and realized that the behavior has changed. Stupidly I left the further research on that problem since I've thought it's located anywhere in the related bindings and just went ahead to come back to that later.
But finally I made so many changes that the problem just disappeared.

How do i make the textboxes expand to fill the remaining space of the Grid Cell?

I have the following window with some input textboxes. But these textboxes will not expand to fill the remaining space of the second column. Furthermore when the window resizes the textboxes doesn't resize accordingly,
Here is my window
Here is my XAML markup
<Window x:Class="WpfApplication8.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="28"></RowDefinition>
</Grid.RowDefinitions>
<Label Content="First Name" Grid.Column="0" Grid.Row="0"></Label>
<Label Content="Last Name" Grid.Column="0" Grid.Row="1"></Label>
<Label Content="Street Name" Grid.Column="0" Grid.Row="2"></Label>
<Label Content="Suburb" Grid.Column="0" Grid.Row="3"></Label>
<Label Content="City" Grid.Column="0" Grid.Row="4"></Label>
<TextBox Width="313" Grid.Column="1" Margin="3" HorizontalAlignment="Left"/>
<TextBox Width="313" Grid.Column="1" Grid.Row="1" Margin="3"
HorizontalAlignment="Left" ></TextBox>
<TextBox Width="313" Grid.Column="1" Grid.Row="2" Margin="3"
HorizontalAlignment="Left"></TextBox>
<TextBox Width="313" Grid.Column="1" Grid.Row="3" Margin="3"
HorizontalAlignment="Left"></TextBox>
<TextBox Width="313" Grid.Column="1" Grid.Row="4" Margin="3"
HorizontalAlignment="Left"></TextBox>
<StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="5"
HorizontalAlignment="Right">
<Button Content="Save" Grid.Column="1" Grid.Row="5" Width="100" Margin="3" />
<Button Content="Exit" Grid.Column="1" Grid.Row="5" Width="100"
HorizontalAlignment="Right" Margin="3"></Button>
</StackPanel>
<!--<TextBox Width="313" Grid.Column="1"></TextBox>-->
</Grid>
</Window>
Is there away to expand the textboxes to fill the remaining space in the second column?
Is there away to make the textboxes resize with the form resize?
You have the Width hardcoded, so it is always going to stay the same. Remove it, and change the alignment to stretch
<TextBox Grid.Column="1" Margin="3" HorizontalAlignment="Stretch">
Just a note, if somebody facing with the same problem:
For me the problem was that I use the SharedSizeGroup on the grid for both of my 2 columns.
If i deleted the sharedsizegroup="b" on the columns what is *, the problem solved.
<StackPanel Orientation="Vertical"
Grid.IsSharedSizeScope="True">
<Grid Margin="0 10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="a" />
<ColumnDefinition Width="*" **SharedSizeGroup="b"**/>
</Grid.ColumnDefinitions>
<TextBlock Text="Size (m): " />
<TextBox x:Name="RealObjSize"
Grid.Column="1"
MinWidth="50"
HorizontalAlignment="Stretch"
TextChanged="RealObjSize_OnTextChanged" />
</Grid>
<Grid Margin="0 10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="a" />
<ColumnDefinition Width="*" **SharedSizeGroup="b"**/>
</Grid.ColumnDefinitions>
<TextBlock Text="Distance (m): " />
<TextBox x:Name="RealObjDist"
Grid.Column="1"
MinWidth="50"
HorizontalAlignment="Stretch"
TextChanged="RealObjDist_OnTextChanged" />
</Grid>
</StackPanel>
just put HorizontalAlignment="Stretch" and remove the Width

How to do superscript in WP XAML?

Here is the usercontrol which is used in my WP8 app. It displays current time. The fontsize is specified by the screen which uses this control. I want AM to be on top but with inline with the text.
Here is my XAML code for control. Also note that Typography.Variants is not supported in WP8
<TextBlock Text="{Binding BindingHour}" FontWeight="Bold" Name="txtHour"
Grid.Row="0" Grid.Column="0"
FontSize="{Binding BindingHourFontSize}" />
<TextBlock Text=":" FontWeight="ExtraLight"
Grid.Row="0" Grid.Column="1"
FontSize="{Binding BindingColonFontSize}" />
<TextBlock Text="{Binding BindingMinute}" FontWeight="Thin"
Grid.Row="0" Grid.Column="2"
FontSize="{Binding BindingMinuteFontSize}"/>
<TextBlock Text="{Binding BindingAmPm}" FontWeight="SemiBold" Grid.Row="0" Grid.Column="3" />
<TextBlock Grid.Row="1" HorizontalAlignment="Center" FontWeight="SemiBold"
Text="{Binding BindingFreeText}" Grid.ColumnSpan="5"/>
Here is how it looks on the screen where i use above control.
Here is how i want it to look but not able to do it in XAML. Also, superscript and subscript is not supported in WP XAML. odd.
Well, it appears that you can do it the same way it is done via WPF, through the Typography.Variants attached property.
http://msdn.microsoft.com/en-us/library/windowsphone/develop/system.windows.documents.typography.variants(v=vs.105).aspx
which allows you to specify superscript/subscript variants of the font. However, that's not really what you want. Your AM/PM appears vertically aligned within the grid control. If it appears too high relative to neighboring characters, simply push it down via its Margin.
Here is an example of the layout
<Grid
Width="auto"
Height="100"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="0"
Grid.Row="0"
FontSize="80"
Text="09"/>
<TextBlock
Grid.Column="1"
Grid.Row="0"
VerticalAlignment="Center"
FontSize="50"
Text=":"/>
<TextBlock
Grid.Column="2"
Grid.Row="0"
FontSize="80"
Text="11"/>
<TextBlock
Margin="0 20 0 0"
Grid.Column="3"
Grid.Row="0"
FontSize="20"
Text="AM"/>
</Grid>
And a snapshot of how it looks
To keep relative positions the same while stretching/compressing to fill existing space, use ViewBoxes.
If you create the following, and paste the grid into each of the following ViewBoxes
<Grid
Width="auto"
Height="auto"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Viewbox Grid.ColumnSpan="2"></Viewbox>
<Viewbox Grid.Row="1"></Viewbox>
<Viewbox Grid.Row="1" Grid.Column="1"></Viewbox>
</Grid>
you get the following

Merge Grid column Header in WPF

I have a wpf Grid, i want to merge the two Column Header.I have tried using the below code the problem here is the column spawn to 2 but in the cell is one that why the for each column grid line is not visible.Can any body answer the better solution to achieve this
<toolkit:DataGridTemplateColumn>
<toolkit:DataGridTemplateColumn.Header>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.ColumnSpan="3" HorizontalAlignment="Center" Text="Missing from FISAP Summary Part II Section F"/>
<TextBlock Grid.Column="0" Grid.Row="1" Text="A" Width="60" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="1" Grid.Row="1" Text="C" Width="60" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="2" Grid.Row="1" Text="D" Width="60" HorizontalAlignment="Center"/>
</Grid>
</toolkit:DataGridTemplateColumn.Header>
<toolkit:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Path=A}" Width="60" HorizontalAlignment="Right" />
<TextBlock Grid.Column="1" Text="{Binding Path=C}" Width="60" HorizontalAlignment="Right" />
<TextBlock Grid.Column="2" Text="{Binding Path=D}" Width="60" HorizontalAlignment="Right" />
</Grid>
</DataTemplate>
</toolkit:DataGridTemplateColumn.CellTemplate>
</toolkit:DataGridTemplateColumn>

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>

Resources