locked
Azure Mobile Services and ListView RRS feed

  • Question

  • Hi

    I have a ListView that is displaying data from an azure mobile data service and I want to be able to select an item from this ListView which would then populate an adjacent text with more information from the selected record on the data service and also pass location data onto a <map>.

    not sure if I should be writing a query in C# or if there is a way to do this xaml. here is what I have in my MainPage.xaml and MainPage.xaml.cs

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Navigation;
    using Microsoft.WindowsAzure.MobileServices;
    using System.Runtime.Serialization;
    using Newtonsoft.Json;
    using System.Collections.ObjectModel;
    using Windows.UI.Popups;
    
    // The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
    
    namespace uniworldBlank
    {
        /// <summary>
        /// An empty page that can be used on its own or navigated to within a Frame.
        /// </summary>
        /// 
        public class uniworld
        {
            public string Id { get; set; }
            
            [JsonProperty(PropertyName = "ProviderName")]
            public string ProviderName { get; set; }
    
            [JsonProperty(PropertyName = "Town")]
            public string Town { get; set; }
    
            [JsonProperty(PropertyName = "Postcode")]
            public string Postcode { get; set; }
    
            [JsonProperty(PropertyName = "Groups")]
            public string Groups { get; set; }
    
            [JsonProperty(PropertyName = "Website")]
            public Uri Website { get; set; }
    
            [JsonProperty(PropertyName = "Latitude")]
            public string Latitude { get; set; }
    
            [JsonProperty(PropertyName = "Longitude")]
            public string Longitude { get; set; }
    
        }
    
        public sealed partial class MainPage : Page
        {
                   
                private MobileServiceCollection<uniworld, uniworld> items;
                private IMobileServiceTable<uniworld> uniWorldTable = App.MobileService.GetTable<uniworld>();
    
                public object selectedItemsShort { get; set; }
    
               public MainPage()
                {
                    this.InitializeComponent();
                }
    
            async private void RefreshItems()
            {
                items = await uniWorldTable.ToCollectionAsync();
                ListItems.ItemsSource = items;
    
            }
    
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                RefreshItems();
            }
    
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
                RefreshItems();
            }
    
            private void ListItems_SelectionChanged(object sender, SelectionChangedEventArgs e)
            {
    	//effectively this is what I want to happen but not sure how to get it to work
                //shortItems.ItemsSource = ListItems.SelectedItem;
    
            }
    
            /*private void seachInput_QuerySubmitted(Windows.UI.Xaml.Controls.SearchBox sender, Windows.UI.Xaml.Controls.SearchBoxQuerySubmittedEventArgs args)
            {
                //code for courses searchBox
            }*/  
        }
    }

    xaml

    <Page
        x:Class="uniworldBlank.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:uniworldBlank"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        xmlns:bm="using:Bing.Maps">
    
    
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    
            <Grid.RowDefinitions>
                <RowDefinition Height="250"/>
                <RowDefinition Height="150"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50"/>
                <ColumnDefinition Width="400"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="400"/>
            </Grid.ColumnDefinitions>
    
            <Grid Grid.Column="0" Grid.RowSpan="2" Background="Coral">
                <Button x:Name="uniButton" RenderTransformOrigin="0.5,0.5" Background="{x:Null}" Content="Uni" BorderThickness="0" Margin="-75,158.246,-75,208.246" UseLayoutRounding="False" Width="200" d:LayoutRounding="Auto" Foreground="#FFC9C9C9">
                    <Button.RenderTransform>
                        <CompositeTransform Rotation="-90"/>
                    </Button.RenderTransform>
                </Button>
            </Grid>
            <Grid Grid.Column="0" Grid.Row="2" Background="Honeydew">
                <Button x:Name="courseButton" Background="{x:Null}" BorderThickness="0" Content="Courses" RenderTransformOrigin="0.5,0.5" Margin="-75,142.246,-75,192.246" UseLayoutRounding="False" Width="200" d:LayoutRounding="Auto" Foreground="#FFC9C9C9">
                    <Button.RenderTransform>
                        <CompositeTransform Rotation="-90"/>
                    </Button.RenderTransform>
                </Button>
            </Grid>
            <Grid Grid.Column="1" Grid.RowSpan="3" Margin="10,10">
                <StackPanel>
                    <!--<SearchBox x:Name="seachInput" Height="35" FocusOnKeyboardInput="True" QuerySubmitted="seachInput_QuerySubmitted"/>-->
                    <TextBox Height="35"/>
                    <Button Content="Refresh" HorizontalAlignment="Left" VerticalAlignment="Top" Click="Button_Click"/>
                    <ListView x:Name="ListItems" HorizontalAlignment="Left" Margin="0" VerticalAlignment="Top" Width="400" DisplayMemberPath="Name">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Name="Provider" Text="{Binding ProviderName}" Margin="10"/>
                                    <TextBlock Name="Group" Text="{Binding Groups}"/>
                                </StackPanel>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
    
                </StackPanel>
            </Grid>
            <Grid Grid.Column="2" Margin="10,10,0,10">
                <ListView x:Name="shortItems">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                           <StackPanel Orientation="Vertical">
                            <TextBlock x:Name="Towns" Text="{Binding Town}}"/>
                            <TextBlock x:Name="Postcodes" Text="{Binding Postcode}}"/>
                            <TextBlock x:Name="Websites" Text="{Binding Website}}"/>
                            </StackPanel>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
                
            </Grid>
            <Grid Grid.Column="3" Margin="0,10,10,10">
                <bm:Map Credentials="******" ZoomLevel="7.5" x:Name="myMap">
                    <bm:Map.Center>
                        <bm:Location Latitude="Latitude" Longitude="Longitude"/>
                    </bm:Map.Center>
                </bm:Map>
            </Grid>
            <Grid Grid.Column="2" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="2" Margin="10">
                <StackPanel>
                    <ListView x:Name="courseList">
    
                    </ListView>
                </StackPanel>
            </Grid>
        </Grid>
    </Page>

     

    • Edited by bramptons Tuesday, January 7, 2014 12:52 PM
    Tuesday, January 7, 2014 12:49 PM

Answers

  • Hi bramptons,

     private void ListItems_SelectionChanged(object sender, SelectionChangedEventArgs e)
            {
    	//effectively this is what I want to happen but not sure how to get it to work
                //shortItems.ItemsSource = ListItems.SelectedItem;
                 shortItems.ItemsSource = ListItems.SelectedItems;
            }
    
    

    Seems to be a correct method, but you have to notice that "ListItems.SelectedItem" is a uniword type, I would suggest you to use "ListItems.SelectedItems" instead, SelectedItems property returns a List and you could apply the List data to a ListView with DataTemplate.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by bramptons Friday, January 10, 2014 9:35 AM
    Wednesday, January 8, 2014 3:05 AM
    Moderator

All replies

  • Hi bramptons,

     private void ListItems_SelectionChanged(object sender, SelectionChangedEventArgs e)
            {
    	//effectively this is what I want to happen but not sure how to get it to work
                //shortItems.ItemsSource = ListItems.SelectedItem;
                 shortItems.ItemsSource = ListItems.SelectedItems;
            }
    
    

    Seems to be a correct method, but you have to notice that "ListItems.SelectedItem" is a uniword type, I would suggest you to use "ListItems.SelectedItems" instead, SelectedItems property returns a List and you could apply the List data to a ListView with DataTemplate.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by bramptons Friday, January 10, 2014 9:35 AM
    Wednesday, January 8, 2014 3:05 AM
    Moderator
  • Thanks James, thank kind of worked, I had to move the line into my refreshItems() method and presto it all works.
    Friday, January 10, 2014 9:35 AM