How to layout controls in the top right hand corner in XAML/Silverlight?

Question

I am going through the process of designing my first Silverlight application based upon the PivotViewer control from Silverlight 4. I am having problems organizing the bar at the top as per my design:

I have found ways of left aligning the Logo and Title, a way of right aligning the buttons with various combinations of panels however there are two major problems with it.

1. The XAML looks really really ugly, nesting panels seems to work but doesn't seem like good practice.
2. I can't seem to find a way of handling resizing the window down without either clipping or overlapping.

I have acheived the best results with the following code:

<StackPanel x:Name="LayoutHeader" Margin="4" Height="50" Grid.Column="0" Grid.Row="0" Orientation="Horizontal">
    <Image x:Name="LogoImage" Height="50" Width="50" Source="/EVEMonPivot;component/EVEMonLogoBlue.png" Grid.Column="0" Grid.Row="0" />
    <TextBlock x:Name="TitleText" Height="50" Text="EVEMon Pivot" FontSize="40" Grid.Column="1" Grid.Row="0" VerticalAlignment="Center" FontWeight="Bold" Padding="10,0,0,0" />
</StackPanel>
<StackPanel x:Name="NavHeader" Margin="4" Height="50" Grid.Column="0" Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Right">
    <Button x:Name="StackExButton" Style="{StaticResource NavButton}" Click="StackExButton_Click">EVE Online StackExchange</Button>
    <Button x:Name="BugsButton" Style="{StaticResource NavButton}">Bugs &amp; Suggestions</Button>
</StackPanel>

I intend to move some of the properties into styles, however it still feels messy.

The above code can also result in the following in small windows:

Is there a better way?

Answer 1

If you don't like nesting panels, a Grid might be a better option. With your four elements, have a five column grid like this:

<Grid HorizontalAlignment="Stretch">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="Auto"/>
  </Grid.ColumnDefinitions>
    <Image x:Name="LogoImage" 
           Height="50" 
           Width="50" 
           Source="/EVEMonPivot;component/EVEMonLogoBlue.png" 
           Grid.Column="0" />
    <TextBlock x:Name="TitleText" 
               Height="50" 
               Text="EVEMon Pivot" 
               FontSize="40" 
               Grid.Column="1" 
               Grid.Row="0" 
               VerticalAlignment="Center" 
               FontWeight="Bold" 
               Padding="10,0,0,0" />
    <Button x:Name="StackExButton" 
            Grid.Column="4" 
            Style="{StaticResource NavButton}" 
            Click="StackExButton_Click">EVE Online StackExchange</Button>
    <Button x:Name="BugsButton" 
            Grid.Column="5" 
            Style="{StaticResource NavButton}">Bugs &amp; Suggestions</Button>
</Grid>

This sets four columns to Auto-size, so they adjust to the size of your UI elements, and the centre column is Star-sized so it fills the rest of the space between them.

Answer 2

While you can use a star-sized grid column to enforce a collapsible region between the controls, you're still left to account for what happens when there simply isn't enough room (eg. 600 pixels of display in a 400-pixel wide area.) What I think you need is a ScrollViewer, which is a ContentControl that lets you determine when scroll bars appear.

In the markup below I am doing 2 things: First, I am using the Silverlight toolkit's DockPanel to isolate the left and right sections of the display (a very similar thing can be accomplished with a 3-column Grid with Cols 0 and 2 set to "Auto" and Col 1 set to "*", but the specific use of Left and Right in the DockPanel may make the intent more readable.) Second, the whole thing is being wrapped in a ScrollViewer with the HorizontalScrollBarVisibility set to "Auto" - when the contents is too big to fit, put up a scrollbar.

<UserControl xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"  x:Class="SilverlightApplication2.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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <ScrollViewer Grid.Row="0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <toolkit:DockPanel >
            <StackPanel toolkit:DockPanel.Dock="Left" Orientation="Horizontal" VerticalAlignment="Top"  Height="50" Margin="5">
                <TextBlock Text="Some long text" FontSize="30"/>
            </StackPanel>
            <StackPanel toolkit:DockPanel.Dock="Right"  Orientation="Horizontal" VerticalAlignment="Top"  HorizontalAlignment="Right" Height="50" Margin="5">
                <Button Content="First Button" Margin="5"/>
                <Button Content="Second Button" Margin="5"/>
            </StackPanel>
        </toolkit:DockPanel>
    </ScrollViewer>
    <TextBlock Grid.Row="1" Text="Body Content (DataGrid, etc.)" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>