获取同一行的文本框

Getting text boxes on the same line

现在两个文本框和“=”符号在不同的两行。

像这样:

我喜欢让他们都在同一条线上,像这样:

我该怎么做?

  1. 将它们放在 StackPanel
  2. 设置 StackPanel 的方向=水平

一个简单的水平堆栈面板就可以了,但您可能会喜欢网格的 auto-sizing 功能。

<Grid Margin="10,0,10,0">
    <StackPanel Orientation="Vertical">
        <TextBlock>CONVERTER</TextBlock>
        <RadioButton>Area</RadioButton>
        <RadioButton>Currency</RadioButton>
        <RadioButton>Temperature</RadioButton>

        <!--
            For specific-sized widths, a simple horizontal stack panel will do,
            along with margins to make sure there is padding around the equal sign.
        -->
        <StackPanel Orientation="Horizontal">
            <TextBox Width="150"/>
            <TextBlock Text="=" VerticalAlignment="Center"
                       Margin="10,0,10,0" FontSize="24"/>
            <TextBox Width="150"/>
        </StackPanel>

        <!--
            For edit controls that scale based on the screen width,
            you can use a grid. 
        -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <TextBox Grid.Column="0"/>
            <TextBlock Grid.Column="1" HorizontalAlignment="Center"
                       VerticalAlignment="Center" Margin="10,0,10,0"
                       FontSize="24" Text="="/>
            <TextBox Grid.Column="2"/>
        </Grid>
    </StackPanel>
</Grid>

有关如何定义网格列的详细信息,请参见http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.columndefinition.width.aspx

有多种方法。您可以使用 stackpanel 或 wrappanel 并使用 orientation = horizo​​ntal。或者您可以使用网格并使用两列并将文本框放在其中。