Статьи

Достижения Visual Studio для Windows Phone — Информация о пользователе и официальная страница проекта

Январь 14, 2019

Если вы пропустили предыдущие две части, вы можете легко найти их здесь:

Сегодня я покажу вам, как можно просмотреть конкретные сведения о Niner, учитывая, что этот пользователь добавлен в «список наблюдения». Во-первых, вам нужно установить структуру главной страницы. Нечто похожее на это:

Ничего особо сложного, поэтому я собрал этот XAML для UserDetail.xaml — это страница, на которой будет отображаться информация о пользователе.

<phone:PhoneApplicationPage 
    x:Class="VisualStudioAchievements.UserDetail"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True"
    xmlns:local="clr-namespace:VisualStudioAchievements">

    <phone:PhoneApplicationPage.Resources>
        <local:BindingPoint x:Key="LocalBindingPoint"></local:BindingPoint>
    </phone:PhoneApplicationPage.Resources>
    
    <Grid DataContext="{Binding Path=CurrentNiner,Source={StaticResource LocalBindingPoint}}" x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="200"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions> 
        
        <StackPanel Orientation="Horizontal">
            <Image Height="200" Width="200" Source="{Binding Avatar}"></Image>
            <StackPanel>
                <TextBlock Foreground="Black" Text="{Binding Alias}" FontFamily="{StaticResource PhoneFontFamilySemiLight}" FontSize="{StaticResource PhoneFontSizeLarge}" TextWrapping="Wrap"></TextBlock>
                <TextBlock Foreground="Gray" Text="{Binding Name}" FontFamily="{StaticResource PhoneFontFamilySemiLight}" FontSize="{StaticResource PhoneFontSizeLarge}" TextWrapping="Wrap"></TextBlock>
                <TextBlock Foreground="Gray" Text="{Binding Caption}" FontFamily="{StaticResource PhoneFontFamilySemiLight}" FontSize="{StaticResource PhoneFontSizeLarge}" TextWrapping="Wrap"></TextBlock>
                <TextBlock Foreground="Gray" Text="{Binding Points}" FontFamily="{StaticResource PhoneFontFamilySemiLight}" FontSize="{StaticResource PhoneFontSizeLarge}" TextWrapping="Wrap"></TextBlock>
            </StackPanel>
        </StackPanel>

        <ListBox Grid.Row="1" ItemsSource="{Binding Achievements}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Height="140" Orientation="Horizontal">
                        <Image Height="64" Width="64" Source="{Binding Icon}"></Image>
                        <StackPanel>
                            <TextBlock Text="{Binding FriendlyName}" Foreground="Gray"></TextBlock>
                            <TextBlock Text="{Binding Description}" Foreground="Gray"></TextBlock>
                            <TextBlock Text="{Binding DateEarned}" Foreground="Gray"></TextBlock>
                            <TextBlock Text="{Binding Points}" Foreground="Gray"></TextBlock>
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</phone:PhoneApplicationPage>

Давайте проясним части этой страницы, и я собираюсь начать с объявлений пространства имен в заголовке. Есть ссылка на xmlns: local :

xmlns:local="clr-namespace:VisualStudioAchievements"

Эта ссылка на пространство имен указывает на корень проекта — основное пространство имен. Я использую его для доступа к классу BindingPoint — это показано в разделе ресурсов страницы:

<phone:PhoneApplicationPage.Resources>
    <local:BindingPoint x:Key="LocalBindingPoint"></local:BindingPoint>
</phone:PhoneApplicationPage.Resources>

Как быстрое напоминание, это класс для глобальных связывающих элементов, таких как коллекция Niners (пользователи 9-го канала) и текущий выбранный Niner. Говоря о том, что теперь он представлен назначенным свойством:

using System;
using System.Collections.ObjectModel;

namespace VisualStudioAchievements
{
    public class BindingPoint
    {
        public static ObservableCollection<Niner> Niners { get; set; }

        public static Niner CurrentNiner { get; set; }
    }
}

Вернувшись к теме главной страницы, вы, вероятно, заметили, что в основной сетке установлен набор DataContext. Таким образом, я проверяю , что все элементы внутри него получат доступ к данным через связанные свойства относительно свойства CurrentNiner .

Остальное в основном макет — Сетка разбита на два ряда. Первый — это заголовок, который отображает метаданные пользователя. ListBox во втором ряду отображаются все достижения , которые были заработаны пользователем. DataTemplate установлен соответствующим образом , так что я могу показать довольно много всю информацию достижения, как изображения, количество точек добавляется для зарабатывания его, его описания и понятного имени.

Возникает вопрос — как именно установить CurrentNiner ? Когда добавляется новый Niner, он отображается на главной странице:

Когда пользователь приложения решает нажать на один из Niners, страница должна переключиться на подробный вид. Вот почему я реализовал две вещи в ListBox, который показывает все зарегистрированные Niners:

  • Привязка свойства Tag из StackPanel в DataTemplate к псевдониму пользователя
  • Обработка обработчика событий Tap для StackPanel в DataTemplate

Посмотрите на его объявление:

<ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Tap="StackPanel_Tap" Tag="{Binding Alias}" Orientation="Horizontal" Height="200">

Сам обработчик событий не содержит ничего особенного, кроме кода выбора и навигации:

private void StackPanel_Tap(object sender, GestureEventArgs e)
{
    BindingPoint.CurrentNiner = (from c in BindingPoint.Niners where c.Alias == ((StackPanel)sender).Tag select c).Single();
    NavigationService.Navigate(new Uri("/UserDetail.xaml", UriKind.Relative));
}

Это выглядит некрасиво в этот момент? Да, но так как мы сейчас фокусируемся на функциональности, то, что она работает, является наиболее важным. Теперь вы можете перемещаться назад и вперед между главной и подробной страницами, чтобы просматривать информацию о пользователе и описания достижений.

Страница проекта! Теперь вы можете получить достижения Visual Studio для Windows Phone непосредственно из CodePlex. Если вас смущают фрагменты, которые я публикую, или вам лень вводить / копировать весь код самостоятельно, просто зайдите сюда, чтобы получить последний источник:

http://vsa.codeplex.com

 

40
Share: