(WP8) Membuat AutoComplete Text

Salam Pagi yang cerah, masih di operekan windows phone 8, dan masih ketemu dengan saya annabe arthdi putra, kali ini kita akan membahas AutoComplete Text, sama dengan postingan di android developer, karena semua nya itu tidak jauh beda, mungkin ada sedikit perbedaann pada pembuatan UI nya saja. langsung saja ke lembar project…

1. Create Project dengan nama AutoComplete

2. Masukkan gambar dalam bentuk jpeg,png dengan resolusi kecil

2

3. Buka File main.xaml untuk membuat tampilan

 <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
			<toolkit:AutoCompleteBox x:Name="acBox" FilterMode="StartsWith" ValueMemberBinding="{Binding Name}">
				<toolkit:AutoCompleteBox.ItemTemplate>
					<DataTemplate>
						<StackPanel Orientation="Horizontal">
							<Image Source="{Binding Image}" Stretch="None" Margin="0,0,5,5"/>
							<TextBlock Text="{Binding Name}"/>
						</StackPanel>
					</DataTemplate>
				</toolkit:AutoCompleteBox.ItemTemplate>
			</toolkit:AutoCompleteBox>
		</StackPanel>

disini kita membuat toolkit dengan aktifitas autoComplete

4. Buka file main.cs

 List dataSource = new List() 
			{
			new WP7Phone(){Image="/Images/DellVenue.jpg", Name = "Dell Venue"},
			new WP7Phone(){Image="/Images/HTChd7.jpg", Name = "HTC HD 7"},
			new WP7Phone(){Image="/Images/HTCMozart.jpg", Name = "HTC Mozart"},
			new WP7Phone(){Image="/Images/LGOptimus.jpg", Name = "LG Optimus"},
			new WP7Phone(){Image="/Images/LGQuantumC900.jpg", Name = "LG Quantum C 900"},
			};
			this.acBox.ItemsSource = dataSource;

			//this.acBox.ItemFilter = SearchPhones;

		}

		bool SearchPhones(string search, object value)
		{
			if (value != null)
			{
				WP7Phone datasourceValue = value as WP7Phone;
				string name = datasourceValue.Name;

				if (name.ToLower().StartsWith(search.ToLower()))
					return true;
			}
			//... If no match, return false. 
			return false;
		} 
	}


	public class WP7Phone 
	{

		public string Image
		{
			get;
			set;
		}

		public string Name
		{
			get;
			set;
		}

		//public override string ToString()
		//{
		//    return "Selected Phone: " +Name;
		//}
	}

5. Run dan hasilnya seperti di bawah ini :

1

Advertisements

Published by

jarcode

hello I am jarcode

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s