Question

我想在堆叠面板中安排两个组件，一个在左侧，另一个在右侧，在Windows Phone 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>

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

Answer 2

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

1）使stackpanel水平对齐到strech。

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

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

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

2 个答案: