CODEWITHSUNDEEP
c#xamlwindows-phone
psj01
psj01

Reputation: 3245

Getting text boxes on the same line

Right now the two text boxes and the '=' sign are on two different line.

like this:

enter image description here

I like to get them all on the same line , like this:

enter image description here

How can I go about doing this?

Upvotes: 0

Views: 1107

Answers (3)

Keith Frechette
Keith Frechette

Reputation: 91

A simple horizontal stack panel will work, but you may like the auto-sizing capabilities of the grid.

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

enter image description here

See http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.columndefinition.width.aspx for details on how to define the grid columns.

Upvotes: 3

Mahesh Malpani
Mahesh Malpani

Reputation: 1989

There are multiple ways. You can use stackpanel or wrappanel and use orientation = horizontal. Or you can use the grid and use two columns and put the textboxes in those.

Upvotes: 1

kennyzx
kennyzx

Reputation: 12993

  1. put them inside a StackPanel
  2. set StackPanel's Orientation=Horizontal

Upvotes: 3

Related Questions