6

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.

4

2 回答 2

24

这就是 StackPanel 用于布局内容的方式。如果您想将一个左对齐，另一个右对齐，我建议您使用 Grid 控件。

您可以通过以下两种方式之一来布局网格

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

或选项 2

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

选项一有按钮相互重叠的可能性。选项二的优点是每个按钮都具有相同的宽度。

于 2013-07-04T06:48:31.463 回答
1

我认为您的代码的主要问题是堆栈面板仅采用适合组件所需的宽度......有很多方法可以解决这个问题..

1）使stackpanel的水平对齐到strech。

2）通过在其中任何一个中设置边距来设置文本块和按钮之间的边距。

3）您可以使用网格列而不是 stackpanel 它将解决问题。

于 2013-07-04T06:50:05.817 回答