Windows phone 7 如何在windows phone 8的堆栈面板中将一个组件向左对齐,另一个组件向右对齐

Windows phone 7 如何在windows phone 8的堆栈面板中将一个组件向左对齐,另一个组件向右对齐,windows-phone-7,windows-phone-8,stackpanel,Windows Phone 7,Windows Phone 8,Stackpanel,我想在windows phone 8中水平对齐的堆栈面板中安排两个组件,一个向左,另一个向右 我需要左对齐的组件应该在页面的左侧,右对齐的组件应该在页面的右侧。这两个组件之间应该有间隙 左对齐组件是静态的,右对齐组件是动态的。 对于静态组件,我将宽度=auto和剩余空间放在动态组件上 下面是我的代码 <Border x:Name="DataBorder" Grid.Row="1" BorderBrush="Gray" CornerRadius="5,5,5,5" BorderThickne

我想在windows phone 8中水平对齐的堆栈面板中安排两个组件,一个向左,另一个向右

我需要左对齐的组件应该在页面的左侧,右对齐的组件应该在页面的右侧。这两个组件之间应该有间隙

左对齐组件是静态的,右对齐组件是动态的。 对于静态组件,我将宽度=auto和剩余空间放在动态组件上

下面是我的代码

<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>


但是右对齐的组件直接到左对齐的组件。

这就是StackPanel如何设计来布局内容的。如果您想左对齐一个,右对齐另一个,我建议使用网格控件

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

<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>


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

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

1) 使stackpanel水平对齐以拉伸

2) 通过设置textblock和button之间的边距来设置它们之间的边距

3) 您可以使用网格列而不是stackpanel,这样可以解决问题