如何在xamarin.forms中按照网格行实现水平列表视图并设置高度?

时间:2016-12-29 05:51:50

标签: c# xamarin xamarin.ios xamarin.android xamarin.forms

我是xamarin.forms的新手。我想在 Grid.row = 6 中实现水平列表视图。行高是" 4 *"。

对于水平列表视图,我会通过以下链接

https://zepfiro.wordpress.com/2016/05/31/xamarin-forms-horizontal-listview/

我正在使用"旋转"水平listView的相对布局,但面临在屏幕某个特定位置设置位置的问题(设置位置相对于父级)。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HRMS.MenuController.Home"
             xmlns:local="clr-namespace:HRMS;assembly=HRMS"
             BackgroundImage="login_bg.png"
                   Title="{x:Static local:AppResources.TitleHome}"
             xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
             xmlns:fftransformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations">
  <ContentPage.Resources>
    <ResourceDictionary>
      <Style x:Key="lbllistData" TargetType="Label" >
        <Setter Property="FontSize" Value="Small" />
        <Setter Property="TextColor" Value="#585858" />
        <Setter Property="VerticalTextAlignment" Value="Center" />
        <Setter Property="FontAttributes" Value="Bold"/>
      </Style>
    </ResourceDictionary>
  </ContentPage.Resources>
  <ContentPage.Content>
    <AbsoluteLayout x:Name="AbsMain">
      <Grid Padding="10" HorizontalOptions="FillAndExpand" BackgroundColor="Aqua">
        <Grid.RowDefinitions>
          <RowDefinition Height="2*" />
          <RowDefinition Height="3*" />
          <RowDefinition Height="0.4*" />
          <RowDefinition Height="7*" />
          <RowDefinition Height="0.4*" />
          <RowDefinition Height="1*" />
          <RowDefinition Height="4*" />
          <RowDefinition Height="2*" />
        </Grid.RowDefinitions>
        <StackLayout Orientation="Horizontal" Grid.Row="0">
          <Label Text="Leave Status" FontAttributes="Bold" FontSize="Small" TextColor="Black"
                 HorizontalTextAlignment="Start" HorizontalOptions="StartAndExpand"
                 VerticalTextAlignment="Center" VerticalOptions="Center"/>
          <Button x:Name="btnApplyForLeave" Text="Leave Apply" BackgroundColor="#f15a23" TextColor="White" Image="leave_apply_icon.png"
                  HorizontalOptions="EndAndExpand"
                  VerticalOptions="Center"/>
        </StackLayout>
        <Grid Grid.Row="1">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
          </Grid.ColumnDefinitions>
          <StackLayout Orientation="Vertical" Grid.Column="0">
            <Label Text="PL" FontSize="Small" TextColor="#585858"
                 HorizontalTextAlignment="Center" HorizontalOptions="Center"
                 VerticalTextAlignment="Center" VerticalOptions="Center"/>
            <Label Text="05" FontSize="Large" TextColor="Black"
                 HorizontalTextAlignment="Center" HorizontalOptions="Center"
                 VerticalTextAlignment="Center" VerticalOptions="Center"/>
          </StackLayout>
          <StackLayout Orientation="Vertical" Grid.Column="1">
            <Label Text="PL" FontSize="Small" TextColor="#585858"
                 HorizontalTextAlignment="Center" HorizontalOptions="Center"
                 VerticalTextAlignment="Center" VerticalOptions="Center"/>
            <Label Text="05" FontSize="Large" TextColor="Black"
                 HorizontalTextAlignment="Center" HorizontalOptions="Center"
                 VerticalTextAlignment="Center" VerticalOptions="Center"/>
          </StackLayout>
          <StackLayout Orientation="Vertical" Grid.Column="2">
            <Label Text="PL" FontSize="Small" TextColor="#585858"
                 HorizontalTextAlignment="Center" HorizontalOptions="Center"
                 VerticalTextAlignment="Center" VerticalOptions="Center"/>
            <Label Text="05" FontSize="Large" TextColor="Black"
                 HorizontalTextAlignment="Center" HorizontalOptions="Center"
                 VerticalTextAlignment="Center" VerticalOptions="Center"/>
          </StackLayout>
          <StackLayout Orientation="Vertical" Grid.Column="3">
            <Label Text="PL" FontSize="Small" TextColor="#585858"
                 HorizontalTextAlignment="Center" HorizontalOptions="Center"
                 VerticalTextAlignment="Center" VerticalOptions="Center"/>
            <Label Text="05" FontSize="Large" TextColor="Black"
                 HorizontalTextAlignment="Center" HorizontalOptions="Center"
                 VerticalTextAlignment="Center" VerticalOptions="Center"/>
          </StackLayout>
        </Grid>
        <StackLayout Grid.Row="2"/>
        <StackLayout Grid.Row="3" BackgroundColor="Red">
          <!--<ListView x:Name="lstLeaveApplication" RowHeight="120" SeparatorVisibility="None" BackgroundColor="White"
              IsVisible="false">
            <ListView.ItemTemplate>
              <DataTemplate>
                <ViewCell>
                  <ViewCell.View>-->
          <Grid VerticalOptions="Center" BackgroundColor="Gray">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="50" />
              <ColumnDefinition Width="7*" />
              <ColumnDefinition Width="3*" />
            </Grid.ColumnDefinitions>
            <StackLayout Orientation="Vertical" Grid.Column="0">
              <Label Text="05" FontSize="Large" TextColor="#f15a23"
                   HorizontalTextAlignment="Center" HorizontalOptions="Center"
                   VerticalTextAlignment="Center" VerticalOptions="Center"/>
              <Label Text="Nov" FontSize="Small" TextColor="Black"
                   HorizontalTextAlignment="Center" HorizontalOptions="Center"
                   VerticalTextAlignment="Center" VerticalOptions="Center"/>
            </StackLayout>
            <Grid Grid.Column="1" RowSpacing="3">
              <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
              </Grid.RowDefinitions>
              <Label Text="To Go out of station from my native to Mombai and then Goa"
                     Grid.Row="0" LineBreakMode="TailTruncation"
                     HorizontalTextAlignment="Start" />
              <Grid RowSpacing="0" Grid.Row="1">
                <Grid.RowDefinitions>
                  <RowDefinition Height="Auto" />
                  <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="*" />
                  <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Label Text="From" Grid.Row="0" Grid.Column="0" TextColor="#B7B7B7"
                       VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand" VerticalOptions="Center"
                       FontSize="Micro" />
                <Label Text="To" Grid.Row="0" Grid.Column="1" TextColor="#B7B7B7"
                       HorizontalOptions="StartAndExpand" VerticalOptions="Center" VerticalTextAlignment="Center"
                       FontSize="Micro" />
                <Label Text="26/11/2016" Grid.Row="1" Grid.Column="0" TextColor="Black"
                       HorizontalOptions="StartAndExpand" VerticalOptions="Center" VerticalTextAlignment="Center"
                       FontSize="Small" />
                <Label Text="05/12/2016" Grid.Row="1" Grid.Column="1" TextColor="Black"
                       HorizontalOptions="StartAndExpand" VerticalOptions="Center" VerticalTextAlignment="Center"
                       FontSize="Small"/>
              </Grid>
            </Grid>
            <StackLayout Grid.Column="2" BackgroundColor="#4fa411" HeightRequest="30"
                         HorizontalOptions="CenterAndExpand" VerticalOptions="Center">
              <Label Text="Approved" TextColor="White"
                     Margin="5" VerticalTextAlignment="Center"/>
            </StackLayout>
          </Grid>
          <!--</ViewCell.View>
                </ViewCell>
              </DataTemplate>
            </ListView.ItemTemplate>
          </ListView>-->
        </StackLayout>
        <StackLayout Grid.Row="4"/>
        <StackLayout Grid.Row="5" BackgroundColor="White">
          <Label Text="UpComing Events" FontAttributes="Bold" FontSize="Small" TextColor="Black"
                  HorizontalTextAlignment="Start" HorizontalOptions="StartAndExpand"
                  VerticalTextAlignment="Center" VerticalOptions="Center"/>
        </StackLayout>
        <StackLayout Grid.Row="6" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="Red">
          <ListView Rotation="270" BackgroundColor="Gray" x:Name="HorizontalListViewForEvents" SeparatorVisibility="None">
            <ListView.ItemTemplate>
              <DataTemplate>
                <ViewCell>
                  <ContentView Rotation="90">
                    <StackLayout Padding="1" BackgroundColor="Black">
                      <StackLayout BackgroundColor="White" Orientation="Vertical">
                        <Grid>
                          <ffimageloading:CachedImage Source="no_img_ava" Aspect="Fill" />
                          <ffimageloading:CachedImage Source="{Binding EventPrimaryImage}" Aspect="Fill" />
                          <StackLayout HeightRequest="50" WidthRequest="50" BackgroundColor="Black" Opacity="0.5"
                                       HorizontalOptions="Start" VerticalOptions="Start">
                            <Label Text="25" FontSize="Medium" TextColor="#f15a23"
                                   HorizontalTextAlignment="Center" HorizontalOptions="Center"
                                   VerticalTextAlignment="Center" VerticalOptions="Center"/>
                            <Label Text="Dec" FontSize="Small" TextColor="White"
                                   HorizontalTextAlignment="Center" HorizontalOptions="Center"
                                   VerticalTextAlignment="Center" VerticalOptions="Center"/>
                          </StackLayout>
                        </Grid>
                        <Label Text="{Binding EventName}" FontAttributes="Bold" FontSize="Small" TextColor="Black"
                               Margin="10,0,0,0" HorizontalOptions="StartAndExpand" HorizontalTextAlignment="Start"/>
                      </StackLayout>
                    </StackLayout>
                  </ContentView>
                </ViewCell>
              </DataTemplate>
            </ListView.ItemTemplate>
          </ListView>
        </StackLayout>
        <Grid x:Name="GrdForDownloadPaySlip" Grid.Row="7">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="4*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="4*" />
          </Grid.ColumnDefinitions>
          <StackLayout Grid.Column="0" VerticalOptions="Center" HorizontalOptions="FillAndExpand">
            <Label Text="{x:Static local:AppResources.LMonth}" Style="{StaticResource lbllistData}"
                   HorizontalOptions="StartAndExpand" VerticalTextAlignment="Center" VerticalOptions="Center"/>
          </StackLayout>
          <StackLayout Grid.Column="1">
            <Frame OutlineColor="#DCDCDC" Padding="1"
                       HorizontalOptions="FillAndExpand"
                       VerticalOptions="FillAndExpand"
                       BackgroundColor="White">
              <Frame.Content>
                <Picker x:Name="MonthPicker1" TextColor="#6d6d6d" Title="Month"/>
              </Frame.Content>
            </Frame>
          </StackLayout>
          <StackLayout Grid.Column="2" VerticalOptions="Center" HorizontalOptions="FillAndExpand">
            <Label Text="{x:Static local:AppResources.LYear}" Style="{StaticResource lbllistData}"
                   HorizontalOptions="EndAndExpand" VerticalTextAlignment="Center" VerticalOptions="Center"/>
          </StackLayout>
          <StackLayout Grid.Column="3">
            <Frame OutlineColor="#DCDCDC" Padding="1"
                       HorizontalOptions="FillAndExpand"
                       VerticalOptions="FillAndExpand"
                       BackgroundColor="White">
              <Frame.Content>
                <Picker x:Name="YearPicker1" TextColor="#6d6d6d" Title="Year"/>
              </Frame.Content>
            </Frame>
          </StackLayout>
        </Grid>
      </Grid>
    </AbsoluteLayout>
  </ContentPage.Content>
</ContentPage>

对于服务电话后的绑定事件。

using HRMS.ServiceLayer;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Net;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using static HRMS.ServiceLayer.ServiceClasses;

namespace HRMS.MenuController
{
    public partial class Home : ContentPage
    {
        ObservableCollection<SbEventLst> lstEventList;
        public Home()
        {
            InitializeComponent();
        }
        protected async override void OnAppearing()
        {
            await CallWebServiceForForms();
        }
        public async Task CallWebServiceForForms()
        {
            try
            {
                var response = await GetResponseFromWebService.GetResponse<ServiceClasses.RootObject_EventList>("http://14.141.36.213:100/HRMSMobileService.svc/GetEventList?EmpCd=10008");
                if (response.Flag == true)
                {
                    lstEventList = new ObservableCollection<SbEventLst>();
                    for (int i = 0; i < response.SbEventLst.Count; i++)
                    {
                        var objEventList = new SbEventLst();
                        objEventList.EventID = response.SbEventLst[i].EventID;
                        objEventList.EventDate = response.SbEventLst[i].EventDate;
                        objEventList.EventName = response.SbEventLst[i].EventName;
                        objEventList.EventPrimaryImage = response.SbEventLst[i].EventPrimaryImage;
                        lstEventList.Add(objEventList);
                    }
                    HorizontalListViewForEvents.ItemsSource = lstEventList;
                }
                else
                {
                    //stkForNoRecordFound.IsVisible = true;
                    //lstEvents.IsVisible = false;
                }
            }
            catch (WebException exception)
            {
                await DisplayAlert(AppResources.LError, AppResources.LConnectionError, "OK");
            }
        }
    }
}

服务类: -

public class SbEventLst
        {
            public string EventDate { get; set; }
            public string EventID { get; set; }
            public string EventName { get; set; }
            public string EventPrimaryImage { get; set; }
        }

        public class RootObject_EventList
        {
            public bool Flag { get; set; }
            public string Message { get; set; }
            public List<SbEventLst> SbEventLst { get; set; }

        }

0 个答案:

没有答案