在xamarin中单击按钮事件时,在主xaml页面内加载列表视图

时间:2018-05-14 09:47:34

标签: xaml listview xamarin xamarin.forms

我一直在开发一个xamarin混合应用程序。我有一个带有按钮的内容页面,我想在按钮的点击事件中加载内容页面内的列表视图。从API获取数据的功能

    public static async Task<List<TranslationWords>> GetTranslation()
    {           
        string url = "";//api url here

        dynamic results = await DataService.GetDataFromService(url).ConfigureAwait(false);

        if (results != null)
        {

            var wordsList = JsonConvert.DeserializeObject<List<TranslationWords>>(results);
            Console.WriteLine(wordsList);
            return wordsList;
        }
        else
        {
            return null;
        }

    public static async Task<List<dynamic>> GetDataFromService(string url)
    {
        HttpClient client = new HttpClient();
        var json = "{'word':'wide','type':'eng_to_tam'}";
        var content = new StringContent(json, Encoding.UTF8, "application/json");
        var response = await client.PostAsync(url, content);

        dynamic data = null;
        if (response != null)
        {
            string res = response.Content.ReadAsStringAsync().Result;
            data = JsonConvert.DeserializeObject(res);    
            return data;           

        } else {
            //code to handle null response
         }   

       }
主页详细信息xaml的

代码

    <ContentPage.Content>
      <StackLayout Padding="10">

    <Switch HorizontalOptions="Start" VerticalOptions="Start" Toggled="Switcher_Toggled"></Switch>
    <Label Text="Enter a Word:" />
    <Entry x:Name="wordToFind" Text="" />
    <Button x:Name="searchButton" Text="Search" Clicked="Load_List"/>
    <ContentView x:Name="MainPageContainer" 
                     HorizontalOptions="FillAndExpand" 
                     VerticalOptions="FillAndExpand" 
                     />           
    </StackLayout>
</ContentPage.Content>

列表视图xaml

列表视图放置在主页面的内容视图(MainPageContainer)中。单击主详细信息页面中的按钮时,内容视图将加载数据

     <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout
                     Padding="10">
                    <Label
                        Text="{Binding TamilWord}"
                        LineBreakMode="NoWrap"
                        Style="{DynamicResource ListItemTextStyle}"
                        FontSize="16" />
                    <Label
                        Text="{Binding TamilMeaning}"
                        LineBreakMode="NoWrap"
                        Style="{DynamicResource ListItemDetailTextStyle}"
                        FontSize="13" />
                    <Label
                        Text="{Binding EnglishTranslation}"
                        LineBreakMode="NoWrap"
                        Style="{DynamicResource ListItemDetailTextStyle}"
                        FontSize="13" />


                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
   </ListView>
<。h2> .cs文件中的数据绑定
     public List<TranslationWords> Words;


    public TransList ()
    {
        InitializeComponent ();
        Words = Core.GetTranslation().Result;  //method to get data from api
        transListView.ItemsSource = Words;
    }

1 个答案:

答案 0 :(得分:0)

最简单的方法可能是将IsVisible设置为False,并将点击事件设置为True。如果“加载”表示“显示”。

你的XAML

<?xml version="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:XFIntro"
         x:Class="XFIntro.MainPage">
    <StackLayout>
    <Button Text="Click" Clicked="ListClicked" />

    <ListView x:Name="LView" IsVisible="False"/>
</StackLayout>

</ContentPage>

The Code Behin

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        LView.ItemsSource = new List<string>() { "foo", "bar", "baz"};
    }

    void ListClicked(object sender, EventArgs e)
    {
        LView.IsVisible = true;
    }
}

如果加载意味着您​​希望使用click事件将项目加载到列表视图中,则代码几乎相同,只需使用即可 LView.ItemsSource = new List<string>() { "foo", "bar", "baz"}; 现在,在您的点击事件中,将ListView始终设置为可见