While building an app in Silverlight 2 RC0, I was trying to use a Popup to display a login form. Pretty basic form: Username, Password, button. But I immediately noticed that I could not hit Tab to move from one field to the next.
Here's some XAML that demonstrates the problem:
1: <UserControl x:Class="PopupTabbing.Page"
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Width="400" Height="300">
5: <Grid x:Name="LayoutRoot" Background="White">
6: <Popup IsOpen="True">
7: <Popup.Child>
8: <StackPanel Width="150">
9: <TextBlock Text="Username" />
10: <TextBox />
11: <TextBlock Text="Password" />
12: <PasswordBox />
13: <Button Width="75" Content="Login" />
14: </StackPanel>
15: </Popup.Child>
16: </Popup>
17: </Grid>
18: </UserControl>
Fortunately, there's a really simple workaround for this. Just add a <UserControl> object to contain the contents of the Popup child, and set the TabNavigation property on the UserControl to Cycle. Here's the updated code:
1: <UserControl x:Class="PopupTabbing.Page"
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Width="400" Height="300">
5: <Grid x:Name="LayoutRoot" Background="White">
6: <Popup IsOpen="True">
7: <Popup.Child>
8: <UserControl TabNavigation="Cycle">
9: <StackPanel Width="150">
10: <TextBlock Text="Username" />
11: <TextBox />
12: <TextBlock Text="Password" />
13: <PasswordBox />
14: <Button Width="75" Content="Login" />
15: </StackPanel>
16: </UserControl>
17: </Popup.Child>
18: </Popup>
19: </Grid>
20: </UserControl>
Just by adding that <UserControl TabNavigation="Cycle"> around the content, you can now use the Tab key within the Popup contents.
UPDATE: This workaround was found to be insufficient. As Ian points out in the comments, you lose intellisense within the <UserControl> and you also cannot refer to controls within the UserControl in the code-behind.
Please see the updated workaround post here.