Search code examples
layoutwindows-phone-8windows-phone

Androids RelativeLayout for Windows Phone


I'm currently trying to design a table for contact information including a column for icons like telephone, email or similar symbols and I want to align them with the text from the next column

icon | Telephone:
     | +1212354567
icon | Email:
     | x@y.com

Is there any Layout which can be compared in functionality to Androids RelativeLayout? I tried to work with the Grid Layout but this seems to be error prone and not exact enough. I don't want to divide my layout into columns and rows, instead I want to describe their position as it is used in RelativeLayout (toLeft, toRight, AlignParentBottom etc.).

The StackPanel can be compared to the LinearLayout, which I want to avoid as it is not suitable for my current design.

Is there any comparison between Windows Phone and Android Layouts on which I can orientate? This one is incomplete and does not give advise for the RelativeLayout.


Solution

  • I know you said you did not want to use a Grid but I feel that you have to in this case.

    I would structure it with both a grid and stack panels though.

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
    
        <!-- Image for first row item -->
        <Image Grid.Column="0" Grid.Row="0" Source="icon-url" />
        <!-- Container for the details of the first row item -->
        <StackPanel Grid.Column="1" Grid.Row="0">
            <TextBlock Text="Telephone:" />
            <TextBlock Text="+1212354567" />
        </StackPanel>
    
        <!-- Image for second row item -->
        <Image Grid.Column="0" Grid.Row="1" Source="icon-url" />
        <!-- Container for the details of the second row item -->
        <StackPanel Grid.Column="1" Grid.Row="1">
            <TextBlock Text="Email:" />
            <TextBlock Text="x@y.com" />
        </StackPanel>
    
        <!-- Just add rows to the grid to continue the list -->
    </Grid>