So wird's gemacht: Anpassen von Visual Studio-Vorlagendaten (XAML)

So wird's gemacht: Anpassen von Visual Studio-Vorlagendaten (XAML)

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Auf den Seiten eines Projekts vom Typ Hub, Raster, Geteilt und Pivot werden bereits Daten angezeigt. Dies liegt daran, dass diese Vorlagen Dateien, Code und XAML-Tags enthalten, um dies zu ermöglichen. Es ist einfacher, diese Dateien zum Anzeigen Ihrer Daten abzuändern, als mit einer leeren Seite zu beginnen und alles ganz neu hinzuzufügen.

Ein ausführlicheres Beispiel finden Sie unter Schnellstart: Lesen von Daten aus einem Dienst.

Elemente und Gruppen

In den Projekten vom Typ Hub, Raster, Geteilt und Pivot sind Daten nach Elementgruppen unterteilt. Diese Elementgruppen sind im Projekt in der Datei SampleDataSource enthalten. Dazu werden drei Klassen definiert:

  • SampleDataGroup
  • SampleDataItem
  • SampleDataSource

The SampleDataSource erstellt Instanzen von Gruppen und Elementen und füllt diese auf, indem Daten aus der Datei "SampleData.json" des Projekts verwendet werden.

Wenn Ihre Daten eng an die Struktur der Klassen SampleDataItem und SampleDataGroup angelehnt sind, können Sie den Code in der GetSampleDataAsync-Funktion aktualisieren, um die Daten abzurufen. Falls Sie neue Dateneigenschaften hinzufügen möchten, müssen Sie die Konstruktoren SampleDataItem und SampleDataGroup aktualisieren.

Sofern Sie eine Verbindung mit Livedaten herstellen, die unter Umständen zur Entwurfszeit nicht verfügbar sind (oder nicht schnell genug geladen werden können), können Sie die DesignData-Quelle ändern, um alternative Beispieldaten bereitzustellen. Auf diese Weise können Sie Daten auf der Entwurfsoberfläche des XAML-Designers sehen. Im Folgenden sehen Sie ein Beispiel aus "GroupDetailPage.xaml" in der Vorlage "Raster-App". Hier werden die in "SampleData.json" definierten Standardbeispieldaten auch zur Entwurfszeit verwendet.


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


Wenn Sie die DesignData-Quelle und alle anderen DesignData-Verweise in der XAML-Datei unverändert lassen, werden die Entwurfszeitwerte aus "SampleData.json" abgerufen.

Binden von Gruppen- und Elementdaten an die Benutzeroberfläche

In den Vorlagen werden Daten normalerweise über den standardmäßigen DataContext an die Benutzeroberfläche gebunden. Der "DataContext" ist an das "DefaultViewModel" gebunden, das auf jeder Seite definiert ist.

Auf jeder Seite werden Daten im LoadState-Ereignis mit einem SampleDataSource-Aufruf geladen. Nach dem Abrufen werden die Daten wie im folgenden Beispiel gezeigt dem "DefaultViewModel" zugewiesen.


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

In der Regel verwenden Sie in den XAML-Seiten implementierte Datenvorlagen zum Formatieren und Anzeigen mehrerer Dateninstanzen. Jede Datenvorlage wird an Eigenschaften gebunden, die explizit in XAML definiert sind. Dies ist im folgenden Beispiel dargestellt:


<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>>

Sie sollten immer beachten, dass Projektvorlagen davon ausgehen, dass in den Daten bestimmte Eigenschaften enthalten sind, die explizit in der XAML benannt sind. Der obige XAML-Code für "GroupedItemsPage" enthält Eigenschaften wie "title", "subtitle" und "image path". Wenn diese speziellen Eigenschaftennamen in Ihren benutzerdefinierten App-Daten nicht verwendet werden, gehen Sie nach einer der folgenden Vorgehensweisen vor:

  • Weisen Sie Ihre Daten diesen Eigenschaftennamen zu (i. d. R. in SampleDataSource).
  • Korrigieren Sie alle im Vorlagencode enthaltenen Verweise auf diese Eigenschaften in XAML und im Code, damit diese den Eigenschaftennamen entsprechen, die in Ihren Daten verwendet werden.

Beispiel für die Einbindung Ihrer Daten in das Projekt

Aktualisieren Sie zuerst die SampleDataSource-Datei, damit Gruppen und Elemente Felder Ihrer Daten definieren. Binden Sie diese Daten anschließend an Felder auf Ihren Seiten. In diesem Abschnitt wird eine Anforderung zum Generieren der RSS-Daten verwendet.

JJ655409.wedge(de-de,WIN.10).gifAktualisieren von SampleDataSource

  1. Klicken Sie im Visual Studio-Menü auf Datei > Neues Projekt.
  2. Erweitern Sie im linken Bereich des Dialogfelds Neues Projekt den Knoten Visual C#, Visual Basic oder Visual C++.
  3. Klicken Sie im mittleren Bereich auf Hub App, Grid App oder Split App.
  4. Geben Sie im Feld NameDataModelExample ein, und klicken Sie auf OK.

    Die Projektmappe wird erstellt, und die Projektdateien werden im Projektmappen-Explorer angezeigt. Weitere Informationen zu den Projektdateien finden Sie unter C#-, VB- und C++-Projektvorlagen.

    Wichtig  Wenn Sie Visual Studio zum ersten Mal ausführen, werden Sie auf die Entwicklerlizenz hingewiesen. Weitere Informationen finden Sie unter Anfordern einer Entwicklerlizenz.
     
  5. Öffnen Sie im Ordner DataModel die Datei SampleDataSource.
  6. Fügen Sie in SampleDataItem Eigenschaften für das Veröffentlichungsdatum, den Autor und den Link hinzu, und aktualisieren Sie den Konstruktor. Der neue Konstruktorcode für SampleDataItem sieht wie folgt aus:
    
    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. Fügen Sie SampleDataItem die folgenden Deklarationen für die neuen Eigenschaften hinzu:
    
        // Added
        public string PubDate { get; private set; }
        public string Author { get; private set; }
        public string Link { get; private set; }
    
    
  8. Fügen Sie in SampleDataGroup eine neue Eigenschaft für das Veröffentlichungsdatum hinzu, und aktualisieren Sie den Konstruktor. Der neue Konstruktorcode für SampleDataGroup sieht wie folgt aus:
    
    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. Fügen Sie SampleDataGroup eine Deklaration für die neue Eigenschaft hinzu:
    
        public string PubDate { get; private set; }
    
    
  10. Entfernen Sie in SampleDataSource die GetSampleDataAsync-Funktion und den gesamten darin enthaltenen Code. Ersetzen Sie die Funktion durch die folgende Funktion, die ebenfalls den Namen GetSampleDataAsync hat:
    
    private async Task GetSampleDataAsync()
    {
        if (this._allGroups.Count != 0)
            return;
    
        await GetFeedsAsync();
    
    }
    
    
    Tipp  Wenn Sie die Daten im JSON-Format abrufen können, können Sie unter Umständen mehr vom Beispielcode in "GetSampleDataAsync" wieder verwenden.
     
  11. Fügen Sie in SampleDataSource die folgende Funktion hinzu:
    
    
    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. Fügen Sie am Anfang die folgende Anweisung hinzu:
    
    using Windows.Web.Syndication;
    
    
    
  13. Fügen Sie SampleDataSource die folgende Methode hinzu:
    
    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. Klicken Sie auf Erstellen > Projektmappe erstellen, oder drücken Sie F7, damit die Projektmappe ohne Fehler erstellt wird.

Bei diesen Schritten wird angenommen, dass Sie mit der Projektvorlage Raster (Grid) ein Projekt erstellt haben.

JJ655409.wedge(de-de,WIN.10).gifBeispiel für das Binden von Daten an Ihre Seiten

  1. Öffnen Sie GroupedItemsPage.xaml, um den Beispielcode in der App-Projektvorlage Raster zu verwenden.
  2. Öffnen Sie in GroupedItemsPage.xaml das Kontextmenü für GridView im XAML-Designer, und wählen Sie dann Weitere Vorlagen bearbeiten, Erstellte Elemente bearbeiten (ItemTemplate), Aktuelle bearbeiten.

    Die Datenvorlage für die GridView wird im XAML-Editor ausgewählt.

  3. Ersetzen Sie die Bindung an die Subtitle-Eigenschaft durch eine Bindung an die PubDate-Eigenschaft.

    Das TextBox-Steuerelement, das diese Bindung enthält, sollte wie das folgende Beispiel aussehen:

    
    <TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}"
        Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
    
    
  4. Öffnen Sie die Datei "GroupDetailPage.xaml".
  5. Öffnen Sie das Kontextmenü für GridView im XAML-Designer, und wählen Sie dann Weitere Vorlagen bearbeiten, Erstellte Elemente bearbeiten (ItemTemplate), Aktuelle bearbeiten.

    Die Datenvorlage für die GridView wird im XAML-Editor ausgewählt.

  6. Suchen Sie in der Datenvorlage nach dem StackPanel-Element, und ändern Sie "Subtitle" in "Author".

    Das TextBox-Steuerelement, das diese Bindung enthält, sollte wie das folgende Beispiel aussehen:

    
    <TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextBlockStyle}"
        TextWrapping="NoWrap"/>
    
    
  7. Wählen Sie im linken Bereich des XAML-Designers Group subtitle: 1 aus.

    Das entsprechende TextBlock-Steuerelement wird im XAML-Editor ausgewählt.

  8. Ersetzen Sie die Bindung an die Subtitle-Eigenschaft durch eine Bindung an die PubDate-Eigenschaft der Gruppe.

    Das TextBox-Steuerelement, das diese Bindung enthält, sollte wie das folgende Beispiel aussehen:

    
    <TextBlock Text="{Binding PubDate}" Margin="0,0,0,20" Style="{StaticResource SubheaderTextBlockStyle}"
        MaxHeight="60"/>
    
    
  9. Speichern Sie das Projekt, und wählen Sie dann die F5-Taste, um die App zu debuggen.

    Der Seitentitel wird sofort angezeigt, das Abrufen der Feeddaten dauert jedoch vielleicht ein paar Sekunden. Wenn alles geklappt hat, werden alle Blogs auf der Startseite angezeigt. Wählen Sie eine der Gruppenüberschriften aus, um die Gruppendetailseite anzuzeigen.

 

 

Anzeigen:
© 2017 Microsoft