how to align one component to left and other to right in stack panel in windows phone 8

Question

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.

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.

And left aligned component is static and right aligned component is dynamic. for static component i put the width = auto and remaining space for dynamic component.

Below is my code.

<Border x:Name="DataBorder" Grid.Row="1" BorderBrush="Gray" CornerRadius="5,5,5,5" BorderThickness="2,2,2,2" Margin="10,30,10,10">
        <StackPanel x:Name="settingsPanel" Orientation="Vertical">
            <StackPanel x:Name="langPanel" Orientation="Horizontal">
                <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"/>

                <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}">
                    <Button.Background>
                        <ImageBrush Stretch="Fill" ImageSource="Images/blank_button_nav.png" />
                    </Button.Background>
                </Button>

                <!--<Image x:Name="arrow" Stretch="Fill" Margin="0,0,0,0" Source="Images/arrow.png" Height="20"/>-->
            </StackPanel>

            <StackPanel x:Name="pagePanel" Orientation="Horizontal">
                <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"/>

                <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}">
                    <Button.Background>
                        <ImageBrush Stretch="Fill" ImageSource="Images/blank_button_nav.png" />
                    </Button.Background>
                </Button>
            </StackPanel>
 </StackPanel>
</Border>

But the right aligned component is coming immediate to the left aligned component.

Answer 1

This is how the StackPanel is designed to layout content. If you want to align one to the left and another to the right I would recommend using a Grid control.

You can layout the Grid in one of two ways

<Grid >
     <Button Content="One" Width="75" HorizontalAlignment="Left"/>
     <Button Content="Two" Width="75" HorizontalAlignment="Right"/>
</Grid>

Or option 2

<Grid >
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Button Content="One" />
    <Button Content="Two" Grid.Column="1"/>
</Grid>

Option one has the possibility that the buttons overlap each other. Option two has the advantage that each button will have the same width.

Answer 2

i think the main problem with your code is that the stack panel only takes the width it needs to fit the components ... there can many ways to resolve this..

1) Make the horizontal alignment of stackpanel to strech.

2) set the margin between textblock and button by setting margin in either of them.

3) you can use grid columns instead of stackpanel it will resolve the issue .