Hai teman-teman, saya mencoba menampilkan data dalam format kolom menggunakan tampilan daftar seperti gambar di bawah ini. Bagaimana cara mencapainya di Xamarin.Forms atau Xamarin.Android.
Tampilkan data dalam kolom Tampilan Daftar, bukan di Xamarin.Forms baris
Jawaban (2)
Solusi:
Saya menulis kode xaml
sederhana untuk mencapai tata letak pada gambar Anda. Saya menggunakan Grid
:
<ContentPage.Content>
<Grid x:Name="controlGrid" RowSpacing="2" ColumnSpacing="2">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout Orientation="Vertical" Grid.Row="0" Grid.Column="0" BackgroundColor="White">
<StackLayout Orientation="Horizontal">
<Label Text="1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" HorizontalOptions="CenterAndExpand" HeightRequest="40" />
<Label Text="TEXT" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="Blue" WidthRequest="50" HeightRequest="40"/>
</StackLayout>
<BoxView BackgroundColor="Gray" VerticalOptions="FillAndExpand"/>
</StackLayout>
<StackLayout Orientation="Vertical" Grid.Row="0" Grid.Column="1" BackgroundColor="White">
<StackLayout Orientation="Horizontal">
<Label Text="2" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" HorizontalOptions="CenterAndExpand" HeightRequest="40" />
<Label Text="TEXT" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="Blue" WidthRequest="50" HeightRequest="40"/>
</StackLayout>
<BoxView BackgroundColor="Orange" VerticalOptions="FillAndExpand" />
</StackLayout>
<StackLayout Orientation="Vertical" Grid.Row="0" Grid.Column="2" BackgroundColor="White">
<BoxView BackgroundColor="Green" />
<BoxView BackgroundColor="Pink" VerticalOptions="FillAndExpand"/>
</StackLayout>
<StackLayout Orientation="Vertical" Grid.Row="0" Grid.Column="3" BackgroundColor="White">
<BoxView BackgroundColor="Green" />
<BoxView BackgroundColor="Yellow" VerticalOptions="FillAndExpand" />
</StackLayout>
<StackLayout Orientation="Vertical" Grid.Row="1" Grid.Column="0" BackgroundColor="White">
<StackLayout Orientation="Horizontal">
<Label Text="5" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" HorizontalOptions="CenterAndExpand" HeightRequest="40" />
<Label Text="TEXT" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="Blue" WidthRequest="50" HeightRequest="40"/>
</StackLayout>
<BoxView BackgroundColor="Gray" VerticalOptions="FillAndExpand"/>
</StackLayout>
<StackLayout Orientation="Vertical" Grid.Row="1" Grid.Column="1" BackgroundColor="White">
<BoxView BackgroundColor="Green" />
<BoxView BackgroundColor="Pink" VerticalOptions="FillAndExpand" />
</StackLayout>
<StackLayout Orientation="Vertical" Grid.Row="1" Grid.Column="2" BackgroundColor="White" >
<Label Text="777" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="Green" HeightRequest="40"/>
<BoxView BackgroundColor="Orange" VerticalOptions="FillAndExpand" />
</StackLayout>
<StackLayout Orientation="Vertical" Grid.Row="1" Grid.Column="3" BackgroundColor="White">
<StackLayout Orientation="Horizontal">
<Label Text="8" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" HorizontalOptions="CenterAndExpand" HeightRequest="40" />
<Label Text="TEXT" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="Blue" WidthRequest="50" HeightRequest="40"/>
</StackLayout>
<BoxView BackgroundColor="Gold" VerticalOptions="FillAndExpand" />
</StackLayout>
</Grid>
</ContentPage.Content>
Dan saya menyetel BackgroundColor="Black"
ContentPage
agar terlihat seperti ada garis hitam di antara Grids
.
Anda dapat menyesuaikan tata letak Anda sendiri dengan changing
kontrol dalam kode saya.
Ini Screen Shot
:
Anda dapat merujuk: kisi
person
Jack Hua
schedule
12.02.2019
Hai teman-teman, terima kasih atas semua balasannya. Saya mencapai tata letak dengan menggunakan plugin DLToolkit.Forms.Controls.FlowListView
Xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
BackgroundColor="Black"
xmlns:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView" >
<ContentPage.Content>
<flv:FlowListView x:Name="FlowListViewH" FlowColumnCount="{Binding ColumnCount}" SeparatorVisibility="Default" HasUnevenRows="True"
FlowItemTappedCommand="{Binding ItemTappedCommand}" FlowLastTappedItem="{Binding LastTappedItem}"
FlowItemsSource="{Binding Items}" FlowColumnMinWidth="220" >
<flv:FlowListView.FlowColumnTemplate>
<DataTemplate>
<StackLayout Margin="5" BackgroundColor="Red" >
<Grid x:Name="controlGrid">
<Grid.RowDefinitions>
<RowDefinition Height="25*" />
<RowDefinition Height="25*" />
<RowDefinition Height="25*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="50*" />
</Grid.ColumnDefinitions>
<Label HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="Red" TextColor="Black"
Text="{Binding TableNumber}" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" FontSize="Large"/>
<Label HorizontalOptions="Fill" VerticalOptions="Fill"
XAlign="Center" YAlign="Center" Text="{Binding ItemName}" Grid.Row="1" Grid.Column="0" TextColor="Black"/>
<Label HorizontalOptions="FillAndExpand" VerticalOptions="Fill"
XAlign="Center" YAlign="Center" Text="{Binding OrderedQuantity}" Grid.Row="1" Grid.Column="1" TextColor="Black"/>
<Label HorizontalOptions="FillAndExpand" VerticalOptions="Fill"
XAlign="Center" YAlign="Center" Text="{Binding Status}" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" TextColor="Black" BackgroundColor="White"/>
</Grid>
</StackLayout>
</DataTemplate>
</flv:FlowListView.FlowColumnTemplate>
</flv:FlowListView>
</ContentPage.Content>
xaml.cs
public Page ()
{
NavigationPage.SetHasNavigationBar(this, false); //remove nav bar
InitializeComponent ();
LoadOrders();//populates Observable collection
FlowListViewH.FlowItemsSource = OrdersForKitchenPage;//sets source to Observable collection
}
person
Community
schedule
13.02.2019
FlexLayout
,BindableLayout
periksa dokumen resmi dan pilih salah satu. - person EvZ   schedule 12.02.2019