Visual Studio 템플릿 데이터를 사용자 지정하는 방법(XAML)

Applies to Windows and Windows Phone

데이터가 허브, 그리드, 분할피벗 프로젝트의 페이지에 이미 표시됩니다. 이러한 템플릿에는 이와 같은 동작이 가능하게 하는 XAML 태그, 코드 및 파일이 포함되어 있기 때문입니다. 빈 페이지로 시작하여 처음부터 모두 추가하는 것보다 이러한 파일을 수정하여 데이터를 표시하는 것이 더 쉽습니다.

더욱 자세한 예제는 빠른 시작: 서비스에서 데이터 읽기를 참조하세요.

항목 및 그룹

허브, 그리드, 분할피벗 프로젝트에서는 데이터가 항목 그룹으로 구성됩니다. 프로젝트의 SampleDataSource 파일에는 이러한 항목 그룹이 포함되어 있습니다. 다음 세 개의 클래스를 정의하여 수행합니다.

  • SampleDataGroup
  • SampleDataItem
  • SampleDataSource

The SampleDataSource는 그룹과 항목의 인스턴스를 만들고 프로젝트의 SampleData.json 파일의 데이터를 사용하여 채웁니다.

데이터가 SampleDataItem 및 SampleDataGroup 클래스의 구조와 매우 비슷한 경우 GetSampleDataAsync 함수의 코드를 업데이트하여 데이터를 검색할 수 있습니다. 새 데이터 속성을 추가하려는 경우 SampleDataItem과 SampleDataGroup 생성자를 업데이트해야 합니다.

디자인 타임에 사용하지 못하거나 빠르게 로드되지 않을 수 있는 라이브 데이터에 연결하는 경우 DesignData 원본을 변경하여 대체 샘플 데이터를 제공할 수 있습니다. 이렇게 하면 XAML 디자이너의 디자인 화면에서 데이터를 볼 수 있습니다. 다음은 그리드 앱 템플릿의 GroupDetailPage.xaml에서 발췌한 예제입니다. 여기에서는 또한 디자인 타임에 SampleData.json에 정의된 기본 샘플 데이터를 사용합니다.


<CollectionViewSource
    x:Name="itemsViewSource"
    Source="{Binding Items}"
    d:Source="{Binding Groups[0].Items, Source={d:DesignData Source=/DataModel/SampleData.json}}"/>


XAML 파일의 다른 모든 DesignData 참조와 함께 DesignData 원본을 그대로 두면 SampleData.json에서 디자인 타임 값을 가져옵니다.

사용자 인터페이스에 그룹 및 항목 데이터를 바인드하는 방법

템플릿에서 데이터는 일반적으로 기본 DataContext를 통해 UI에 바인딩됩니다. DataContext는 각 페이지에 정의된 DefaultViewModel에 바인딩됩니다.

각 페이지에서 데이터는 SampleDataSource 호출을 통해 LoadState 이벤트에 로드됩니다. 데이터가 검색되면 다음 예제에 표시된 대로 DefaultViewModel에 할당됩니다.


var sampleDataGroups = await SampleDataSource.GetGroupsAsync((String)e.NavigationParameter);
this.DefaultViewModel["Groups"] = sampleDataGroups;

일반적으로 XAML 페이지에 구현된 데이터 템플릿을 사용하여 데이터의 여러 인스턴스에 서식을 지정하고 표시합니다. 각 데이터 템플릿은 다음 예제와 같이 xaml에 명시적으로 정의된 속성에 바인딩됩니다.


<DataTemplate>
    <Grid HorizontalAlignment="Left" Width="250" Height="250">
        <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
            <Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
        </Border>
        <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
             <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}"
                 Style="{StaticResource TitleTextBlockStyle}" Height="60" Margin="15,0,15,0"/>
             <TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}"
                 Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
        </StackPanel>
    </Grid>
</DataTemplate>>

프로젝트 템플릿을 사용하려면 데이터에 특정 속성이 있어야 하며, 이러한 속성은 XTML에 명시되어 있습니다. GroupedItemsPage에 대한 위 XAML 코드에서 제목, 부제목 및 이미지 경로 등의 속성을 찾을 수 있습니다. 사용자 지정 앱 데이터에서 이러한 속성 이름을 사용하지 않는 경우 다음 중 하나를 수행해야 합니다.

  • 일반적으로 SampleDataSource에서 이러한 데이터를 속성 이름에 매핑합니다.
  • 템플릿 코드의 이러한 속성에 대한 모든 XTML 및 코드 참조가 데이터에 사용된 속성 이름과 일치하도록 수정합니다.

데이터를 프로젝트에 통합하는 방법의 예제

먼저 그룹과 항목이 데이터의 필드를 정의하도록 SampleDataSource 파일을 업데이트합니다. 그런 다음 페이지의 필드에 데이터를 바인드합니다. 이 섹션에서는 RSS 데이터를 생성하는 요청을 사용합니다.

JJ655409.wedge(ko-kr,WIN.10).gifSampleDataSource 업데이트

  1. Visual Studio 메뉴에서 파일 > 새 프로젝트를 클릭합니다.
  2. 새 프로젝트 대화 상자에서 Visual C#, Visual Basic 또는 Visual C++ 노드를 확장합니다.
  3. 가운데 창에서 허브 앱,그리드 앱 또는 분할 앱을 클릭합니다.
  4. 이름 상자에 DataModelExample을 입력하고 확인을 클릭합니다.

    솔루션이 만들어지고 솔루션 탐색기에 프로젝트 파일이 나타납니다. 프로젝트 파일에 대한 설명은 C#, VB 및 C++ 프로젝트 템플릿을 참조하세요.

    중요  Visual Studio를 처음 실행하면 개발자 라이선스를 다운로드하라는 메시지가 표시됩니다. 자세한 내용은 개발자 라이선스 가져오기를 참조하세요.

  5. DataModel 폴더에서 SampleDataSource를 엽니다.
  6. SampleDataItem에서 게시 날짜, 만든 이 및 링크에 대한 속성을 추가하고 생성자를 업데이트합니다. 다음은 SampleDataItem에 대한 새 생성자 코드입니다.
    
    public SampleDataItem(String uniqueId, String title, String subtitle, String imagePath,
         String description, String content, String pubDate, String author, String uriLink)
    {
        this.UniqueId = uniqueId;
        this.Title = title;
        this.Subtitle = subtitle;
        this.Description = description;
        this.ImagePath = imagePath;
        this.Content = content;
        // Added
        this.PubDate = pubDate;
        this.Author = author;
        this.Link = uriLink;
    }
    
    
    
  7. 새 속성에 대한 다음 선언을 SampleDataItem에 추가합니다.
    
        // Added
        public string PubDate { get; private set; }
        public string Author { get; private set; }
        public string Link { get; private set; }
    
    
  8. SampleDataGroup에서 게시된 날짜에 대한 새 속성을 추가하고 생성자를 업데이트합니다. 다음은 SampleDataGroup에 대한 새 생성자 코드입니다.
    
    public SampleDataGroup(String uniqueId, String title, String subtitle, String imagePath,
        String description, String pubDate)
    {
        this.UniqueId = uniqueId;
        this.Title = title;
        this.Subtitle = subtitle;
        this.Description = description;
        this.ImagePath = imagePath;
        // Added
        this.PubDate = pubDate;
    
        this.Items = new ObservableCollection<SampleDataItem>();
    
    }
    
    
  9. 새 속성에 대한 선언을 SampleDataGroup에 추가합니다.
    
        public string PubDate { get; private set; }
    
    
  10. SampleDataSource에서 GetSampleDataAsync 함수와 이 함수에 포함된 모든 코드를 제거합니다. 이 함수를 이름이 GetSampleDataAsync로 동일한 다음 함수로 바꿉니다.
    
    private async Task GetSampleDataAsync()
    {
        if (this._allGroups.Count != 0)
            return;
    
        await GetFeedsAsync();
    
    }
    
    

      JSON 형식의 데이터를 검색할 수 있는 경우 GetSampleDataAsync의 샘플 코드를 더 많이 재사용할 수 있습니다.

  11. SampleDataSource에서 다음 함수를 추가합니다.
    
    
    public async Task GetFeedsAsync()
    {
        Task<SampleDataGroup> feed1 =
            GetFeedAsync("http://windowsteamblog.com/windows/b/developers/atom.aspx");
        Task<SampleDataGroup> feed2 =
            GetFeedAsync("http://windowsteamblog.com/windows/b/windowsexperience/atom.aspx");
        Task<SampleDataGroup> feed3 =
            GetFeedAsync("http://windowsteamblog.com/windows/b/extremewindows/atom.aspx");
        Task<SampleDataGroup> feed4 =
            GetFeedAsync("http://windowsteamblog.com/windows/b/business/atom.aspx");
        Task<SampleDataGroup> feed5 =
            GetFeedAsync("http://windowsteamblog.com/windows/b/bloggingwindows/atom.aspx");
        Task<SampleDataGroup> feed6 =
            GetFeedAsync("http://windowsteamblog.com/windows/b/windowssecurity/atom.aspx");
        Task<SampleDataGroup> feed7 =
            GetFeedAsync("http://windowsteamblog.com/windows/b/springboard/atom.aspx");
        Task<SampleDataGroup> feed8 =
            GetFeedAsync("http://windowsteamblog.com/windows/b/windowshomeserver/atom.aspx");
        // There is no Atom feed for this blog, so we use the RSS feed.
        Task<SampleDataGroup> feed9 =
            GetFeedAsync("http://windowsteamblog.com/windows_live/b/windowslive/rss.aspx");
        Task<SampleDataGroup> feed10 =
            GetFeedAsync("http://windowsteamblog.com/windows_live/b/developer/atom.aspx");
        Task<SampleDataGroup> feed11 =
            GetFeedAsync("http://windowsteamblog.com/ie/b/ie/atom.aspx");
        Task<SampleDataGroup> feed12 =
            GetFeedAsync("http://windowsteamblog.com/windows_phone/b/wpdev/atom.aspx");
        Task<SampleDataGroup> feed13 =
            GetFeedAsync("http://windowsteamblog.com/windows_phone/b/wmdev/atom.aspx");
    
        this._allGroups.Add(await feed1);
        this._allGroups.Add(await feed2);
        this._allGroups.Add(await feed3);
        this._allGroups.Add(await feed4);
        this._allGroups.Add(await feed5);
        this._allGroups.Add(await feed6);
        this._allGroups.Add(await feed7);
        this._allGroups.Add(await feed8);
        this._allGroups.Add(await feed9);
        this._allGroups.Add(await feed10);
        this._allGroups.Add(await feed11);
        this._allGroups.Add(await feed12);
        this._allGroups.Add(await feed13);
    }
    
    
  12. 다음과 같은 using 문을 맨 위에 추가합니다.
    
    using Windows.Web.Syndication;
    
    
    
  13. 다음 메서드를 SampleDataSource에 추가합니다.
    
    private async Task<SampleDataGroup> GetFeedAsync(string feedUriString)
    {
        // using Windows.Web.Syndication;
        SyndicationClient client = new SyndicationClient();
        Uri feedUri = new Uri(feedUriString);
    
        try
        {
            SyndicationFeed feed = await client.RetrieveFeedAsync(feedUri);
    
            string description = "tbd";
            // Use the date of the latest post as the last updated date.
            string date = feed.Items[0].PublishedDate.DateTime.ToString();
    
    
            if (feed.Subtitle != null && feed.Subtitle.Text != null)
            {
                description = feed.Subtitle.Text;
            }
    
            // This code is executed after RetrieveFeedAsync returns the SyndicationFeed.
            // Process it and copy the data we want into our FeedData and FeedItem classes.
            SampleDataGroup feedData = new SampleDataGroup(feed.Id, feed.Title.Text, 
                feed.Subtitle.Text, null, description, date);
    
            foreach (SyndicationItem item in feed.Items)
            {
                string content = "tbd";
                string uriLink = "tbd";
                string author = item.Authors[0].Name.ToString();
                string datePub = item.PublishedDate.DateTime.ToString();
    
                // Handle the differences between RSS and Atom feeds.
                if (feed.SourceFormat == SyndicationFormat.Atom10)
                {
                    content = item.Content.Text;
                    uriLink = new Uri("http://windowsteamblog.com" + item.Id).ToString();
                }
                else if (feed.SourceFormat == SyndicationFormat.Rss20)
                {
                    content = item.Summary.Text;
                    uriLink = item.Links[0].Uri.ToString();
                }
    
                SampleDataItem feedItem = new SampleDataItem(item.Id, item.Title.Text, "tbd",
                    null, null, content, datePub, author, uriLink);
               
                feedData.Items.Add(feedItem);
            }
    
            return feedData;
        }
        catch (Exception)
        {
           return null;
        }
    }
    
    
    
  14. 빌드 > 솔루션 빌드를 클릭하거나 F7 키를 눌러 오류 없이 솔루션이 빌드되는지 확인합니다.

이 단계에서는 그리드 프로젝트 템플릿을 사용하여 프로젝트를 만들었다고 가정합니다.

JJ655409.wedge(ko-kr,WIN.10).gif페이지에 데이터를 바인드하는 방법의 예제

  1. 그리드 앱 프로젝트 템플릿에서 예제 코드를 사용하려면 GroupedItemsPage.xaml을 엽니다.
  2. GroupedItemsPage.xaml에서 XAML 디자이너 GridView에 대한 바로 가기 메뉴를 열고 Edit Additional Templates(추가 템플릿 편집), Edit Generated Items (ItemTemplate)(생성된 항목 편집(ItemTemplate)), Edit current(현재 항목 편집)를 선택합니다.

    GridView에 대한 DataTemplate이 XAML 편집기에 선택되어 있습니다.

  3. Subtitle 속성에 대한 바인딩을 PubDate 속성에 대한 바인딩으로 바꿉니다.

    이 바인딩이 포함된 TextBox 컨트롤은 다음 예제와 같아야 합니다.

    
    <TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}"
        Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
    
    
  4. GroupDetailPage.xaml을 엽니다.
  5. XAML 디자이너 GridView에 대한 바로 가기 메뉴를 열고 Edit Additional Templates(추가 템플릿 편집), Edit Generated Items (ItemTemplate)(생성된 항목 편집(ItemTemplate)), Edit current(현재 항목 편집)를 선택합니다.

    GridView에 대한 DataTemplate이 XAML 편집기에 선택되어 있습니다.

  6. DataTemplate에서 StackPanel을 찾은 다음 Subtitle을 Author로 변경합니다.

    이 바인딩이 포함된 TextBox 컨트롤은 다음 예제와 같아야 합니다.

    
    <TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextBlockStyle}"
        TextWrapping="NoWrap"/>
    
    
  7. XAML 디자이너의 왼쪽 창에서 Group subtitle(그룹 부제목): 1을 선택합니다.

    해당하는 TextBlock이 XAML 편집기에서 선택됩니다.

  8. Subtitle 속성에 대한 바인딩을 그룹 PubDate 속성에 대한 바인딩으로 바꿉니다.

    이 바인딩이 포함된 TextBox 컨트롤은 다음 예제와 같아야 합니다.

    
    <TextBlock Text="{Binding PubDate}" Margin="0,0,0,20" Style="{StaticResource SubheaderTextBlockStyle}"
        MaxHeight="60"/>
    
    
  9. 프로젝트를 저장하고 F5 키를 선택하여 앱을 디버그합니다.

    페이지 제목은 바로 나타나지만 피드 데이터를 검색하는 데 몇 초 정도 걸릴 수 있습니다. 모든 약속이 이행되면 홈페이지에 각 블로그가 표시됩니다. 그룹 제목 중 하나를 선택하여 그룹 세부 정보 페이지를 표시합니다.

 

 

표시:
© 2015 Microsoft