How to align one component on the left and the other on the right in the stack pane on a Windows 8 phone

Question

I want to arrange two components: one on the left and the other on the right in the stack panel, which is horizontally aligned with the phone window 8.

I need the left-aligned component to appear on the left side of the page, and the right-aligned component to appear to the right of the page. There must be a gap between the two components.

And the left-aligned component is static, and the right-aligned component is dynamic. for the static component, I put width = auto and the remaining space for the 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 immediately goes to the left aligned component.

Answer 1

So StackPanel is designed to compose content. If you want to align one to the left and the other to the right, I would recommend using a grid control.

You can compose a 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 1 has the ability to overlap each other. The advantage of the second option is that each button will have the same width.

Answer 2

I think the main problem with your code is that the stack panel only accepts the width needed to fit the components ... there are many ways to solve this problem.

1) Make horizontal alignment of the stack panel to enlarge.

2) set the border between the text block and the button by setting the marker in any of them.

3) you can use grid columns instead of stackpanel, this will solve the problem.