title: how to align one component to left and other to right in stack panel in windows phone 8
body: <p>I want to arrange two components, one to left and the other to right in stack panel which is horizontally aligned in windows phone 8.</p>
  
  <p>I need left aligned component should come left side of the page and right aligned component should come right side of the page. There should be gap between these two components.</p>
  
  <p>And left aligned component is static and right aligned component is dynamic.
  for static component i put the <strong>width = auto</strong> and remaining space for dynamic component.</p>
  
  <p>Below is my code.</p>
  
  <pre><code>&lt;Border x:Name="DataBorder" Grid.Row="1" BorderBrush="Gray" CornerRadius="5,5,5,5" BorderThickness="2,2,2,2" Margin="10,30,10,10"&gt;
          &lt;StackPanel x:Name="settingsPanel" Orientation="Vertical"&gt;
              &lt;StackPanel x:Name="langPanel" Orientation="Horizontal"&gt;
                  &lt;TextBlock x:Name="langTextBlock" Text="{Binding Path=LocalizedResources.DefaultLanguageText, Source={StaticResource LocalizedStrings}}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0"  Foreground="#FF501F6E" FontWeight="Bold" FontSize="25" Width="Auto"/&gt;
  
                  &lt;Button Content="English" Height="70" HorizontalAlignment="Right" Margin="5,1,0,0" Name="langbutton" VerticalAlignment="Center" MinWidth="160" Foreground="#FF501F6E"  Click="language_Btn_clicked" BorderBrush="{x:Null}"&gt;
                      &lt;Button.Background&gt;
                          &lt;ImageBrush Stretch="Fill" ImageSource="Images/blank_button_nav.png" /&gt;
                      &lt;/Button.Background&gt;
                  &lt;/Button&gt;
  
                  &lt;!--&lt;Image x:Name="arrow" Stretch="Fill" Margin="0,0,0,0" Source="Images/arrow.png" Height="20"/&gt;--&gt;
              &lt;/StackPanel&gt;
  
              &lt;StackPanel x:Name="pagePanel" Orientation="Horizontal"&gt;
                  &lt;TextBlock x:Name="pageTextBlock" Text="{Binding Path=LocalizedResources.PerPageText, Source={StaticResource LocalizedStrings}}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0"  Foreground="#FF501F6E" FontWeight="Bold" FontSize="25" Width="Auto"/&gt;
  
                  &lt;Button Content="25" Height="70" HorizontalAlignment="Right" Margin="5,1,0,0" Name="pagebutton" VerticalAlignment="Center" MinWidth="160" Foreground="#FF501F6E" Click="page_Btn_clicked" BorderBrush="{x:Null}"&gt;
                      &lt;Button.Background&gt;
                          &lt;ImageBrush Stretch="Fill" ImageSource="Images/blank_button_nav.png" /&gt;
                      &lt;/Button.Background&gt;
                  &lt;/Button&gt;
              &lt;/StackPanel&gt;
   &lt;/StackPanel&gt;
  &lt;/Border&gt;
  </code></pre>
  
  <p>But the right aligned component is coming immediate to the left aligned component.</p>