如何在Windows Phone 8的堆栈面板中将一个组件对齐到左侧和另一个组件

Question

我想在窗口电话8中水平对齐的堆叠面板中安排两个组件,一个在左边,另一个在右边.

我需要左对齐的组件应该在页面的左侧,右对齐的组件应该在页面的右侧.这两个组成部分之间应该存在差距.

左对齐组件是静态的,右对齐组件是动态的.对于静态组件,我为动态组件设置了width = 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>

但是右对齐组件会立即进入左对齐组件.

Answer 1

这就是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>

选项一可能是按钮彼此重叠.选项二的优点是每个按钮的宽度相同.