CODEWITHSUNDEEP
xamarin.forms
dotnetdevcsharp
dotnetdevcsharp

Reputation: 3980

Running style app with side by side controls

I am using a stack layout as its the easiest with responsive but I am trying to get to items side by side I am trying to mimic running apps with speed and distance.

My Main question is how would one get the speed and distance to look similar to the design I can't get the spacing right in a stack layout

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="WellbeingNinja.Views.BmiInfo">
<ContentPage.Content>
  <StackLayout Orientation="Horizontal" Spacing="0" Padding="0"  VerticalOptions="StartAndExpand"> 
        <Frame x:Name="frameTotalSpeed"    CornerRadius="7" >
            <StackLayout>
            <Label x:Name="lblSpeedText" Text="Distance"></Label>
            <Label x:Name="lblSpeed" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
                </StackLayout>
        </Frame>



         <Frame x:Name="frameTotalDistance"    CornerRadius="7">
             <StackLayout>
             <Label x:Name="lbldistanceText" Text="Distance"></Label>
            <Label x:Name="lblDistance" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
                 </StackLayout>
        </Frame>

enter image description here

I am trying to mimic this style here

enter image description here

Upvotes: 0

Views: 30

Answers (1)

Jason
Jason

Reputation: 89169

use a Grid

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="50*" />
    <ColumnDefinition Width="50*" />
  </Grid.ColumnDefinitions>
  <Frame Grid.Column="0" x:Name="frameTotalSpeed"    CornerRadius="7" >
    <StackLayout>
      <Label x:Name="lblSpeedText" Text="Distance"></Label>
      <Label x:Name="lblSpeed" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
    </StackLayout>
  </Frame>
  <Frame Grid.Column="1" x:Name="frameTotalSpeed"    CornerRadius="7" >
    <StackLayout>
      <Label x:Name="lbldistanceText" Text="Distance"></Label>
      <Label x:Name="lblDistance" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
    </StackLayout>
  </Frame>
</Grid>

Upvotes: 1

Related Questions