Windows 8 için Blog RSS Reader uygulaması

Blog’ların RSS adreslerine bağlanacak, makalelerin listesini getirecek ve seçilen makaleyi okumamızı sağlayacak Windows 8 uygulaması geliştireceğiz.

Öncelikle BlogReader isimli Windows 8 projesini oluşturalım ve MainPage.xaml dosyasına aşağıdaki kodları yazarak ekran tasarımımızı yapalım;

<Page x:Class=”BlogReader.MainPage” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” xmlns:local=”using:BlogReader” xmlns:d=”http://schemas.microsoft.com/expression/blend/2008” xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006” mc:Ignorable=”d”>

&lt;Grid&gt;
    &lt;Grid.ColumnDefinitions&gt;
        &lt;ColumnDefinition Width="300" /&gt;
        &lt;ColumnDefinition Width="*" /&gt;
    &lt;/Grid.ColumnDefinitions&gt;


    &lt;ListView Name="BlogPostListView" Margin="20" Grid.Column="1" SelectionChanged="BlogPostListView_SelectionChanged"&gt;
        &lt;ListView.ItemTemplate&gt;
            &lt;DataTemplate&gt;
                &lt;StackPanel&gt;
                    &lt;TextBlock Text="{Binding Title}" FontSize="14" Margin="5,0,0,0" TextWrapping="Wrap" /&gt;
                    &lt;TextBlock Text="{Binding Description}" FontSize="12" Margin="15,0,0,0" /&gt;
                &lt;/StackPanel&gt;
            &lt;/DataTemplate&gt;
        &lt;/ListView.ItemTemplate&gt;
    &lt;/ListView&gt;

    &lt;Grid Margin="20" Grid.Column="2"&gt;
        &lt;Grid.RowDefinitions&gt;
            &lt;RowDefinition Height="40"/&gt;
            &lt;RowDefinition Height="*"/&gt;
        &lt;/Grid.RowDefinitions&gt;

        &lt;TextBlock Name="PostTitleText" Text="{Binding Title}" FontSize="20" Grid.Row="0" TextWrapping="Wrap" /&gt;
        &lt;WebView Name="ContentView" Grid.Row="1" Margin="0,50,0,0" /&gt;
    &lt;/Grid&gt;
&lt;/Grid&gt;

&lt;Page.TopAppBar&gt;
    &lt;AppBar Name="topBar"&gt;
        &lt;StackPanel Orientation="Horizontal" HorizontalAlignment="Right"&gt;
            &lt;Button Name="Refresh" Style="{StaticResource RefreshAppBarButtonStyle}" Click="Refresh_Click" /&gt;
        &lt;/StackPanel&gt;
    &lt;/AppBar&gt;
&lt;/Page.TopAppBar&gt; &lt;/Page&gt;</pre>

Böylece iki sütunlu bir Grid içerisinde soldaki sütunda Blog’un RSS adresinden çekeceğimiz makalelerin listesini göstereceğiz, sağdaki sütunda ise makale listesinden seçilen makalenin başlığını ve içeriğini göstereceğiz.

Ekranın TopAppBar‘ında verileri tekrar çekecek olan Refresh (Tazele) Button nesnesi yer alacak.

Projemize BlogPost isminde bir sınıf ekleyelim ve rss adresindeki bilgiyi parse ettiğimizde elde edeceğimiz veriyi tutacağımız property‘leri tanımlayalım;

public class BlogPost
{
    public string Title { get; set; }
    public string Author { get; set; }
    public string Content { get; set; }
    public DateTime PubDate { get; set; }
}

Artık MainPage.xaml.cs dosyasına gidebilir ve sayfa ekrana ilk geldiğinde yapılacak işleri OnNavigatedTo() methodunun içerisine yazabiliriz.

Öncelikle rss adresindeki veriyi parse ettiğimizde elde edeceğimiz BlogPost‘ların listesi için bir değişken tanımlaması yapıyoruz;

var postList = new List<BlogPost>();

Şimdi Windows.Web.Syndication namespace’inde tanımlı SyndicationClient tipinde bir değişken tanımlayabilir ve RetreiveFeedAsync() methodunu kullanarak belli bir adresteki rss verisini parse edebiliriz.

var client = new SyndicationClient();

var feed = await client.RetrieveFeedAsync(new Uri("http://feeds.feedburner.com/muammerbenzes"));

Not : Bu örnekte sevgili Muammer Benzeş‘in blogunun rss adresini kullandık, başka blogların rss adresleri için özel bir kod yazmaya gerek yok.

Parse ettiğimiz rss verisinin içerisinde dönerek BlogPost listesine teker teker ekliyoruz;

foreach (var item in feed.Items)
{
    var post = new BlogPost();

    post.Title = item.Title.Text;
    post.PubDate = item.PublishedDate.DateTime;
    post.Author = item.Authors[0].Name.ToString();
    if (feed.SourceFormat == SyndicationFormat.Atom10)
    {
        post.Content = item.Content.Text;
    }
    else if (feed.SourceFormat == SyndicationFormat.Rss20)
    {
        post.Content = item.Summary.Text;
    }

    postList.Add(post);
}

Tek yapmamız gereken ekrandaki BlogPostListView nesnesine elimizdeki BlogPost listesini bağlamak.

BlogPostListView.ItemsSource = postList;

BlogPostListView nesnesinden bir blog post seçildiğinde ekranın sağ tarafında başlığı ve içeriği ile göstermek için aşağıdaki method’u da MainPage.xaml.cs dosyasına eklememiz gerekiyor;

private void BlogPostListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (e.AddedItems.Count > 0)
    {
        var post = e.AddedItems[0] as BlogPost;
        if (post != null)
        {
            PostTitleText.Text = post.Title;
            ContentView.NavigateToString(post.Content);
        }
    }
    else
    {
        PostTitleText.Text = "";
        ContentView.NavigateToString("");
    }
}


Böylece *BlogPostListView* nesnesinden herhangi bir blog post seçilirse ekranın sağ tarafında seçilen blog post'un başlığı ve içeriği görüntüleniyor olacak.

![](/assets/uploads/2014/05/BlogRSSReader-1.png)

İlgili diğer makaleler

blog comments powered by Disqus

Engin Polat hakkında

Senior Software Engineer, @Microsoft

Ada ve Ege'nin babası ;)

Kategoriler

İstatistik

Makale Adedi: 484

Creative Commons Lisansı