Настройка данных шаблона Visual Studio (XAML)

Данные уже отображаются на страницах проектов Приложение-концентратор, Приложение таблицы, Приложение с разделением и Сводное приложение. Это происходит, потому что эти шаблоны содержат файлы, код и теги 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}}"/>


Если вы оставите источник DesignData, а также все ссылки на DesignData в XAML-файле без изменений, значения времени разработки будут извлекаться из SampleData.json.

Привязка данных групп и элементов к пользовательскому интерфейсу

В шаблонах данные, как правило, привязаны к пользовательскому интерфейсу с помощью DataContext по умолчанию. DataContext привязан к DefaultViewModel, который определяется на каждой странице.

На каждой странице данные загружаются в событие LoadState с вызовом SampleDataSource. После извлечения данные назначаются объекту 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>>

Важно понимать, что шаблоны проектов предполагают наличие у данных определенных свойств и эти свойства явным образом указаны в XAML-коде. В предыдущем XAML-коде для GroupedItemsPage вы можете найти свойства заголовка, подзаголовка и пути к изображению. Если в пользовательских данных приложения имена этих свойств не используются, поступите следующим образом.

  • Сопоставьте свои данные с именами этих свойств (обычно это нужно сделать в файле SampleDataSource).
  • Исправьте в коде шаблона все ссылки XAML и кода на эти свойства таким образом, чтобы они соответствовали именам свойств, используемых в ваших данных.

Пример встраивания данных в проект

Сначала обновите файл SampleDataSource, чтобы группы и элементы определили поля ваших данных. Затем привяжите данные к полям на страницах. В этом разделе используется запрос для создания данных RSS.

JJ655409.wedge(ru-ru,WIN.10).gifОбновление SampleDataSource

  1. В меню Visual Studio выберите File (Файл) > New Project (Создать проект).
  2. На левой панели диалогового окна New Project (Создать проект) разверните узел Visual C#, Visual Basic или Visual C++.
  3. В центральной области щелкните шаблон Приложение-концентратор, Приложение таблицы или Приложение с разделением.
  4. В поле Name (Имя) введите 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. Нажмите Build (Сборка) > Build solution (Собрать решение) или клавишу F7, чтобы убедиться, что сборка решения идет без ошибок.

Эти шаги предполагают, что вы создали проект с помощью шаблона проекта Приложение таблицы.

JJ655409.wedge(ru-ru,WIN.10).gifПример привязки данных к страницам

  1. Чтобы использовать пример кода в шаблоне проекта Приложение таблицы, откройте GroupedItemsPage.xaml.
  2. В GroupedItemsPage.xaml в конструкторе XAML откройте контекстное меню для GridView и выберите Edit Additional Templates (Изменить дополнительные шаблоны), Edit Generated Items (ItemTemplate) (Изменить созданные шаблоны [ItemTemplate]), Edit current (Изменить текущий).

    DataTemplate для GridView выбирается в редакторе 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 (Изменить текущий).

    DataTemplate для GridView выбирается в редакторе XAML.

  6. Найдите StackPanel в DataTemplate и измените свойство 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