Xamarin表单-如何创建简单的订单清单/注解?

时间:2018-08-12 06:01:33

标签: c# xaml xamarin xamarin.forms

我的应用程序是在线订购咖啡馆

这是一个菜单,您可以在其中选择要订购的食物,如果点击它,将显示弹出窗口以输入数量。

同样在右上角,您可以看到购物车徽标(如果点击它),该页面将移至购物车/订单列表页面,您可以在其中查看所有当前订单

OrdernowMenu的屏幕截图 Menus 链接:https://i.stack.imgur.com/CxVU2.jpg

基本上我想发生的是,如果您输入数量并点击“确定”,它将自动显示/添加到购物车中 此图像是选择菜单时的弹出窗口。 Popup of quantity 链接:https://i.stack.imgur.com/mECd1.jpg

我的代码

OrdernowMenu.xaml.cs

<ContentPage.ToolbarItems>
        <ToolbarItem Icon="cartimage.png" Clicked="ToolbarItem_Clicked"></ToolbarItem>

    </ContentPage.ToolbarItems>

    <ListView x:Name="MyOrder" ItemSelected="MyOrder_ItemSelected" RowHeight="100">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid ColumnSpacing="0" RowSpacing="0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <StackLayout Grid.Row="0" Grid.Column="0" >
                            <Image Source="{Binding menu_image ,StringFormat='https://i.imgur.com/{0:F0}.png'}"  Aspect="AspectFill"/>
                        </StackLayout>
                        <StackLayout Grid.Row="0" Grid.Column="1" VerticalOptions="Center">
                            <Label Text="{Binding menu_name}" Font="30"/>
                            <Label Text="{Binding menu_price,StringFormat='₱ {0:F0}'}" Font="20"/>
                            <Label Text="{Binding menu_availability} " Font="10" />
                        </StackLayout>
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

OrdernowMenu.xaml.cs

public partial class OrdernowMenu : ContentPage
    {
        public string json_response { get; set; }
        public string tester { get; set; }
        public string seletedMenu { get; set; }
        public string menuPrice { get; set; }
        public string quantity { get; set; }
        public string myinput { get; set; }

        public OrdernowMenu(PostSender posts1)
        {
            InitializeComponent();


            json_response = posts1.response;
            tester = posts1.teststring;
            GetUserAsync();
        }



        private async Task GetUserAsync()
        {

            var user = JsonConvert.DeserializeObject<List<Menus>>(json_response);

            MyOrder.ItemsSource = user;


        }



        public async Task MyOrder_ItemSelected(object sender, SelectedItemChangedEventArgs e)
        {

            var selectedOrder = e.SelectedItem as Menus;

            if (selectedOrder != null)

            seletedMenu = selectedOrder.menu_name;
            menuPrice = selectedOrder.menu_price;


             myinput = await InputBox(this.Navigation);

            quantity = myinput;




        }

        public static Task<string> InputBox(INavigation navigation)
        {
            // wait in this proc, until user did his input 
            var tcs = new TaskCompletionSource<string>();

            var lblTitle = new Label { Text = "Input ", HorizontalOptions = LayoutOptions.Center, FontAttributes = FontAttributes.Bold,  };
            var lblMessage = new Label { Text = "Quantity" };
            var txtInput = new Entry { Text = "" };

            var btnOk = new Button
            {
                Text = "Ok",
                WidthRequest = 100,
                BackgroundColor = Color.FromRgb(0.8, 0.8, 0.8),
            };
            btnOk.Clicked += async (s, e) =>
            {
                // close page
                var result = txtInput.Text;
                await navigation.PopModalAsync();
                // pass result
                tcs.SetResult(result);
            };

            var btnCancel = new Button
            {
                Text = "Cancel",
                TextColor = Color.White,

                WidthRequest = 100,
                   BackgroundColor = Color.FromRgb(0.8, 0.8, 0.8)
              //  BackgroundColor = Color.FromHex("#ff5300")

            };
            btnCancel.Clicked += async (s, e) =>
            {
                // close page
                await navigation.PopModalAsync();
                // pass empty result
                tcs.SetResult(null);
            };

            var slButtons = new StackLayout
            {
                Orientation = StackOrientation.Horizontal,
                Children = { btnOk, btnCancel },
            };

            var layout = new StackLayout
            {
               // BackgroundColor = Color.FromHex("#ff5300"),
                Padding = new Thickness(0, 40, 0, 0),
                VerticalOptions = LayoutOptions.StartAndExpand,
                HorizontalOptions = LayoutOptions.CenterAndExpand,
                Orientation = StackOrientation.Vertical,
                Children = { lblTitle, lblMessage, txtInput, slButtons },
            };

            // create and show page
            var page = new ContentPage();
            page.Content = layout;
            navigation.PushModalAsync(page);
            // open keyboard
            txtInput.Focus();

            // code is waiting her, until result is passed with tcs.SetResult() in btn-Clicked
            // then proc returns the result
            return tcs.Task;
        }




public void ToolbarItem_Clicked(object sender, EventArgs e)
        {

           // DisplayAlert("Tester", seletedMenu + menuPrice + quantity, "OK");

            Carting cart = new Carting()
            {
                menuname = seletedMenu,
                price = menuPrice,
                qty = quantity
            };

            var viewcart = new OrderCart();
            viewcart.BindingContext = cart;

            Navigation.PushAsync(viewcart);

        }

这是我的购物车/订单列表的列表视图。 我的问题是我无法显示所有订单,我认为代码的逻辑是错误的。当前仍然空白,我找不到显示订单的方法,请帮助它显示菜单名称,数量和价格。

此屏幕截图为OrderCart.xaml,它为空,因为我无法将数据传递到listview

Current Cart 链接:https://i.stack.imgur.com/waMhp.jpg

Ordercart.xaml

<ListView x:Name="MyCart" ItemSelected="MyCart_ItemSelected"  RowHeight="50">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell >
                    <Grid>



                        <StackLayout Orientation="Horizontal">
                            <Label  Text="{Binding menuname}" Font="40" TextColor="White" FontAttributes="Bold"/>
                            <Label  Text="{Binding price}" Font="20" TextColor="White" FontAttributes="Bold"/>
                            <Label  Text="{Binding qty }" Font="15" TextColor="White" FontAttributes="Bold"/>
                        </StackLayout>


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

    </ListView>

Ordercart.xaml.cs

public partial class OrderCart : ContentPage
    {
        public OrderCart ()
        {
            InitializeComponent ();
        }

        private void MyCart_ItemSelected(object sender, SelectedItemChangedEventArgs e)
        {

        }
    }

购物车/订单清单的概念 注意:不要介意我只想显示菜单名称的数量和价格的行。

此屏幕截图只是第三屏幕截图的一个概念 这就是我想要发生的事情 concept 链接:https://i.stack.imgur.com/Te9Zd.jpg

1 个答案:

答案 0 :(得分:3)

首先,通过构造函数传递数据以显示

public partial class OrderCart : ContentPage
{
    List<Carting> _data;

    public OrderCart (List<Carting> data)
    {
        InitializeComponent ();

         _data = data;

         MyOrder.ItemsSource = data;
    }

然后在调用OrderCart时

        var data = new List<Carting>();
        data.Add(cart);
        var viewcart = new OrderCart(data);
        Navigation.PushAsync(viewcart);