Kali ini saya akan menshare bagaimana cara membuat hubtile secara simple. Hubtile sudah terdapat pada library windows phone toolkit yang ada dalm SDK windows phone 8. Hubtile ini dapat membuat aplikasi anda menjadi menarik karna control ini dapat membuat animasi tile di aplikasi anda.
Langsung saja, pertama anda dapat membuat project baru di visual studio express 2012 anda dan pilih menggunakan pivot. Setelah anda membuat project baru selanjutnya anda dapat menambahkan references HubtileControl di project anda dengan cara mengklik kanan pada folder references. Lalu anda klik add dan anda pilih HubTileControl.dll.
Setelah anda add reference control toolkitnya, sekarang anda dapat menambahkan di mainpage.xaml code ini
xmlns:HubTile="clr-namespace:HubTileControl;assembly=HubTileControl"
Setelah anda menambahkan code di atas sekarang anda siapkan class News.cs dan class NewsViewModel.cs. Selanjutnya anda dapat menuliskan code di bawah ini pada content
class News.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace PhoneApp7.Model
{
public class Result
{
public string id { get; set; }
public string title { get; set; }
public string link_title_url { get; set; }
public string link_url { get; set; }
public string message { get; set; }
public string creator_id { get; set; }
public string creator_name { get; set; }
public int creation_date { get; set; }
public string creation_date_txt { get; set; }
public int last_update { get; set; }
public string last_update_txt { get; set; }
public string channel_id { get; set; }
public string channel_name { get; set; }
public string domain { get; set; }
public string small_images { get; set; }
public string medium_images { get; set; }
public string large_images { get; set; }
public string type { get; set; }
public List<string> tag { get; set; }
public List<object> tag2 { get; set; }
public int views { get; set; }
}
public class News
{
public List<Result> result { get; set; }
}
}
Class NewsViewModel.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using PhoneApp7.Model;
using Newtonsoft.Json;
using System.Collections.ObjectModel;
using System.Net;
using System.Windows;
namespace PhoneApp7.ViewModels
{
public class NewsViewModel
{
public NewsViewModel()
{
this.NewsItems = new ObservableCollection<Result>();
}
public ObservableCollection<Result> NewsItems { get; private set; }
public bool isDataNewsLoaded
{
get;
private set;
}
public void NewsSeach()
{
Uri url = new Uri("http://www.lintas.me/rest/getstreampopular/&channel=lifestyle&offset=0&limit=8&rt=json");
WebClient client = new WebClient();
client.DownloadStringCompleted += new DownloadStringCompletedEventHandler(client_DownloadStringCompleted);
client.DownloadStringAsync(url);
}
void client_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
if (e.Error == null)
{
if (e.Result != null)
try
{
string NewsResult = e.Result;
Model.News item = JsonConvert.DeserializeObject<Model.News>(NewsResult);
foreach (Result data in item.result)
{
NewsItems.Add(data);
}
this.isDataNewsLoaded = true;
}
catch (Exception)
{
MessageBox.Show("Getting Data Error");
}
}
else
{
Deployment.Current.Dispatcher.BeginInvoke(() => { MessageBox.Show("Internet connection error"); });
}
}
}
}
Selanjutnya di mainpage.xaml tuliskan code ini.
<ListBox x:Name="lbnews" Margin="0,-12,-12,0" Width="800" VerticalAlignment="Top" HorizontalAlignment="Left" Height="366" toolkit:TiltEffect.IsTiltEnabled="True" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Template>
<ControlTemplate>
<ItemsPresenter />
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemTemplate>
<DataTemplate>
<HubTile:HubTile Title="{Binding title}" Source="{Binding small_images}" Foreground="Black" Margin="-12,0,0,-12" Background="Pink" Width="200" Height="200" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
di mainpage.xaml.cs
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
if (!App.NewsViewModel.isDataNewsLoaded)
{
App.NewsViewModel.NewsSeach();
}
lbnews.ItemsSource = App.NewsViewModel.NewsItems;
}
Di app.xaml.cs
private static NewsViewModel NewsViewModell = null;
/// <summary>
/// A static ViewModel used by the views to bind against.
/// </summary>
/// <returns>The MainViewModel object.</returns>
public static NewsViewModel NewsViewModel
{
get
{
// Delay creation of the view model until necessary
if (NewsViewModell == null)
NewsViewModell = new NewsViewModel();
return NewsViewModell;
}
}
Untuk source code anda dapat mendownload di sini http://sdrv.ms/1brFsrt
Selamat mencoba..
Jangan lupa berkomentar ya.. hehehe
Terimakasih telah mengunjungi blog saya..
Tidak ada komentar:
Posting Komentar