How to organize this Layout using Xamarin Forms?

Question

How to organize this Layout using Xamarin Forms?

Navigation

#1 by (2 votes)
#2 by (0 votes)

3

I have not been able to organize my layout in my ListView, it is disorganized, I tried to use several forms but so far nothing, I would like to have tips / help. I wish I could have Código at the beginning, Valor in the middle, and Hora lance at the end. No Genymotion:

OnanAndroiddevice:

Note:IamavoidingStackLayoutbecauseIhaveunderstoodfromsomesourcesthatitcandisrupttheuser'sfinalperformance.

FollowXAMLcode:

<!--ListagemdeLances--><StackLayout><ListViewx:Name="lstLance"  
                              ItemTapped="Lance_OnItemTapped"
                              BackgroundColor="LightGray"
                              HasUnevenRows="True">
                        <!--  HasUnevenRows = Serve para fazer com que o conteúdo digitado não seja cortado -->
                        <ListView.ItemTemplate>
                            <!-- DataTemplate  = exibe dados de uma coleção de objetos em um ListView -->
                            <DataTemplate>
                                <ViewCell>
                                    <Grid Margin="2">

                                        <!-- Colunas -->
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="50"/>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="*"/>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="Auto"/>
                                        </Grid.ColumnDefinitions>

                                        <!-- Linhas -->
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="1"/>
                                        </Grid.RowDefinitions>

                                        <!-- Código -->
                                        <Label Grid.Row="0" 
                                               Grid.Column="0" 
                                               Text="Código:"
                                               FontSize="Small"
                                               Margin="0"/>
                                        <Label Grid.Row="0" 
                                               Grid.Column="1"
                                               Text="{Binding ID_LANCE}" 
                                               FontSize="Small"
                                               TextColor="Black"
                                               HorizontalOptions="Start"
                                               Margin="0"/>

                                        <!-- Valor -->
                                        <Label Grid.Row="0" 
                                               Grid.Column="2"
                                               Text="Valor:"
                                               FontSize="Small"
                                               Margin="0"
                                               HorizontalOptions="Center"/>
                                        <Label Grid.Row="0" 
                                               Grid.Column="3"
                                               Text="{Binding VALOR}" 
                                               FontSize="Small"
                                               TextColor="Black"
                                               HorizontalOptions="Start"
                                               Margin="0"/>

                                        <!-- Hora do Lance -->
                                        <Label Grid.Row="0" 
                                               Grid.Column="4"
                                               Text="Hora lance:"
                                               FontSize="Small"
                                               HorizontalOptions="End"
                                               Margin="0"/>
                                        <Label Grid.Row="0" 
                                               Grid.Column="5"
                                               Text="{Binding HR_LANCE}" 
                                               FontSize="Small"
                                               TextColor="Black"
                                               HorizontalOptions="End"
                                               Margin="0"/>

                                        <!-- Repartir conteudo com cor -->
                                        <BoxView Grid.Row="1" 
                                                 Grid.Column="0"
                                                 Grid.ColumnSpan="6"
                                                 BackgroundColor="Red"/>

                                    </Grid>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>

                </StackLayout>

xamarin xamarin-forms

asked by anonymous 19.06.2018 / 16:12

2 answers

0

I've had some returns from other sources, and the middle field ( Valor ) is always clumsy, so to avoid this, especially if the app is installed on a small device, I've decided that I'll only use two columns to be sure about a layout organized.

Of course, if someone can help by answering how to leave the 3 columns well organized, great, it will be for learning.

Here's how I left (if anyone is interested in a possible resolution with 2 columns):

NoXAML:

<!--ListagemdeLances--><StackLayout><ListViewx:Name="lstLance"  
                              BackgroundColor="LightGray"
                              HasUnevenRows="True">
                        <!--  HasUnevenRows = Serve para fazer com que o conteúdo digitado não seja cortado -->
                        <ListView.ItemTemplate>
                            <!-- DataTemplate  = exibe dados de uma coleção de objetos em um ListView -->
                            <DataTemplate>
                                <ViewCell>

                                    <Grid Margin="2">

                                        <!-- Colunas -->
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*"/>
                                            <ColumnDefinition Width="*"/>
                                        </Grid.ColumnDefinitions>

                                        <!-- Linhas -->
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="1"/>
                                        </Grid.RowDefinitions>

                                        <!-- Código -->
                                        <StackLayout Grid.Row="0" 
                                                     Grid.Column="0" 
                                                     Orientation="Horizontal">
                                            <Label Text="Código:" 
                                                   FontSize="Small" />
                                            <Label Text="{Binding ID_LANCE}" 
                                                   FontSize="Small" 
                                                   TextColor="Black" 
                                                   Margin="0, 0, 0, 0"/>
                                        </StackLayout>

                                        <!-- Valor -->
                                        <StackLayout Grid.Row="1" 
                                                     Grid.Column="0" 
                                                     Orientation="Horizontal">
                                            <Label Text="Valor:   " 
                                                   FontSize="Small" />
                                            <Label Text="{Binding VALOR}" 
                                                   FontSize="Small" 
                                                   TextColor="Black"
                                                   FontAttributes="Bold"
                                                   Margin="0"/>
                                        </StackLayout>

                                        <!-- Hora -->
                                        <StackLayout Grid.Row="0" 
                                                     Grid.Column="2" 
                                                     Orientation="Horizontal" 
                                                     HorizontalOptions="End">
                                            <Label Text="Hora lance:" 
                                                   FontSize="Small" />
                                            <Label Text="{Binding HR_LANCE}"  
                                                   FontSize="Small" 
                                                   TextColor="Black" 
                                                   Margin="0"/>
                                        </StackLayout>

                                        <!-- Repartir conteudo com cor -->
                                        <BoxView Grid.Row="2" 
                                                 Grid.Column="0"
                                                 Grid.ColumnSpan="3"
                                                 BackgroundColor="Red"/> 
                                    </Grid>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackLayout>

20.06.2018 / 14:17

Error executing script in python in Laravel controller Use tuple with parentheses in query in django

score 2 · Accepted Answer

When you set the row or column measure of the grid to "Auto" , the row / column size will be determined when your content is allocated, increasing or decreasing as required.

In other words, if you are going to use variable size content in the cell and want all items to be aligned, you can not set this column to "Auto" . The latter should only be used if the content size is the same for all items. To fix, either you set the fixed size for the content or a size proportional to the total size of the Grid .

So, in your case, I think it's enough to define the columns that have varying content with 1/6 of the Grid width, the ones that contain the labels can be "Auto" (you just need to adjust the column definitions) :

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

And the result will be something like:

Thiswouldbetheresultifyouusedthesamedefinitionyouusedinthepresentedcode(whichispreciselythecauseoftheproblem):

Editing:Addingsamplesourcecode

<?xmlversion="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:App1"
             x:Class="App1.MainPage">
    <ContentPage.Resources>
        <ResourceDictionary>
            <x:Array x:Key="itens" Type="{x:Type x:String}">
                <x:String>311</x:String>
                <x:String>021026</x:String>
                <x:String>03248751739</x:String>
            </x:Array>
        </ResourceDictionary>
    </ContentPage.Resources>
    <StackLayout>
        <!-- Place new controls here -->
        <Label Text="Welcome to Xamarin.Forms!" 
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand" />

        <ListView HasUnevenRows="True"
                  ItemsSource="{StaticResource itens}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid Margin="2">
                            <!-- Colunas -->
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>

                            <!-- Linhas -->
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="1"/>
                            </Grid.RowDefinitions>

                            <!-- Código -->
                            <Label Grid.Row="0" 
                               Grid.Column="0" 
                               Text="Código:"
                               FontSize="Small"
                               Margin="0"/>
                            <Label Grid.Row="0" 
                               Grid.Column="1"
                               Text="{Binding Length}" 
                               FontSize="Small"
                               TextColor="Black"
                               HorizontalOptions="Start"
                               Margin="0"/>

                            <!-- Valor -->
                            <Label Grid.Row="0" 
                               Grid.Column="2"
                               Text="Valor:"
                               FontSize="Small"
                               Margin="0"
                               HorizontalOptions="Center"/>
                            <Label Grid.Row="0" 
                               Grid.Column="3"
                               Text="{Binding Length, StringFormat='{}{0:#0.00}'}" 
                               FontSize="Small"
                               TextColor="Black"
                               HorizontalOptions="Start"
                               Margin="0"/>

                            <!-- Hora do Lance -->
                            <Label Grid.Row="0" 
                               Grid.Column="4"
                               Text="Hora lance:"
                               FontSize="Small"
                               HorizontalOptions="End"
                               Margin="0"/>
                            <Label Grid.Row="0" 
                               Grid.Column="5"
                               Text="{Binding ., StringFormat='{}{0:00-00-00}'}" 
                               FontSize="Small"
                               TextColor="Black"
                               HorizontalOptions="End"
                               Margin="0"/>

                            <!-- Repartir conteudo com cor -->
                            <BoxView Grid.Row="1" 
                                 Grid.Column="0"
                                 Grid.ColumnSpan="6"
                                 BackgroundColor="Red"/>

                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>

</ContentPage>

I hope it helps.