INDE'S Monolog

Silverlight 예제 100선

# Binding + Open API + LINQ  를 이용한 이미지 검색


# 프로젝트 만들기

검색 Application 을 만들기 위해 새 프로젝트를 생성 합니다. 상단 메뉴에서 파일-> 새로만들기 -> 프로젝트 ->   Visual C# -> Silverlgiht 텝에서 Silverlight 응용프로그램 으로 프로젝트를 생성 합니다. 프로젝트 이름은 ImageSearch 라고 하겠습니다. ^^

# MainPage.xaml 수정 하기

이번에 만들 검색 App 의 화면은 간단합니다. 키워드가 들어간  TextBox 박스 한개와 , 리스트가 뿌려질 ListBox 1개 그리고 검색을 실행할 버튼 한개를 구성하여 App UI 만들도록 하겠습니다.

MainPage.xaml  페이지를 열어 아래와 같이 수정 합니다.
<UserControl x:Class="SearchApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" Width="600" Height="400">
  <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <TextBox Width="450" HorizontalAlignment="Left" Grid.Row="0" Height="30" Margin="20,0,0,0" x:Name="KeyWord"/>
        <Button Width="100" Height="30" HorizontalAlignment="Right" Margin="0,0,20,0" Content="Search" x:Name="SearchButton"/>
        <ListBox Grid.Row="1" Margin="20" x:Name="ImageListBox">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Image Width="50" Height="50" HorizontalAlignment="Left" Source="{Binding ImageUrl}" Stretch="UniformToFill"/>
                        <HyperlinkButton Margin="60,0,20,0" Content="{Binding Title}" NavigateUri="{Binding LinkUrl}" VerticalAlignment="Center" TargetName="_Blank"/>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</UserControl>

# LINQ 참조 추가하기

LINQ 는 기본적으로 시스템에 참조 되어 있지만 XML LINQ는 시스템 참조에 추가되어 있지 않습니다. 그래서 Xml Linq 를 직접 추가 해야 됩니다.

솔루션 탐색기 에서 참조부분에 우클릭을 하신 후 참조 추가를 누릅니다.

using System.Collections.ObjectModel;
using System.Xml.Linq;
using System.Windows.Browser;

    public class ImageData
    {
        public string ImageUrl { get; set; }
        public string LinkUrl { get; set; }
        public string Title { get; set; }
    }

    public partial class MainPage : UserControl
    {
        string apiKey = "API 키";
        ObservableCollection imageList = new ObservableCollection();
        public MainPage()
        {
            InitializeComponent();
            Loaded += (object sender, RoutedEventArgs e) =>
                {
                    ImageListBox.ItemsSource = imageList;
                };
            SearchButton.Click += (object sender, RoutedEventArgs e) =>
                {
                    Search();
                };
            KeyWord.KeyUp += (object sender, KeyEventArgs e) =>
                {
                    if (e.Key == Key.Enter)
                    {
                        Search();
                    }
                };
        }
        void Search()
        {
            if (KeyWord.Text.Length <= 0)
            {
                MessageBox.Show("검색어를 입력하세요.");
                KeyWord.Focus();
                return;
            }
            
            WebClient wc = new WebClient();
            
            wc.DownloadStringAsync(new Uri(string.Format("http://openapi.naver.com/search?key={0}&query={1}&target=image&start=1&display=100",apiKey,HttpUtility.UrlEncode(KeyWord.Text))));
            wc.DownloadStringCompleted += (object sender, DownloadStringCompletedEventArgs e) =>
            {
                XDocument doc = XDocument.Parse(e.Result);
                var xmlData = from data in doc.Descendants("item")
                              select new ImageData
                              {
                                  ImageUrl = (string)data.Element("thumbnail"),
                                  LinkUrl = (string)data.Element("link"),
                                  Title = (string)data.Element("title")
                              };

                imageList.Clear();
                foreach (ImageData data in xmlData)
                {
                    imageList.Add(data);
                }
            };
        }       
    }

디버그 -> 디버깅 시작을 눌러 Silverlight 프로젝트를 빌드하고 Silverlight Application 을 실행 합니다.

미적 감각이라곤 전혀 찾아 볼 수 있는 화면이 나옵니다. 키워드박스에 검색어를 놓고 버튼을 누릅니다.