Пользовательский ListView изнутри HubAppSection - Windows Phone 8.1

Question

Пользовательский ListView изнутри HubAppSection - Windows Phone 8.1

1

В настоящее время я создаю приложение Windows Phone Application, основанное на HubAppTemplate. Шаблон поставляется с образцом источника данных.JSON, который используется для заполнения данных каждого HubSection. Тем не менее, я хочу использовать данные типа не JSON в качестве основы для моего кода. Внутри моего кода на С# мне нужно сделать вызов функции на моем сервере, чтобы получить тип данных, которые я хочу извлечь из него.

Я могу поместить эти данные в свой собственный список (на стороне С#), но как я могу заставить этот список действовать как источник данных для моего HubSection? Любой старый список listview/list отлично работает. В принципе, мне нужна помощь в подключении С# к XAML - основная проблема заключается в том, что я не могу получить доступ к моему спискуView внутри datatemplate по имени.

Может ли кто-нибудь дать мне несколько указателей, чтобы идти в правильном направлении?

Вот некоторый ссылочный код, чтобы показать вам, о чем я говорю:

<HubSection x:Uid="Clubs" Header="Clubs" DataContext="{Binding Groups}" HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}">
            <DataTemplate>
                <ListView Name="ClubsList"
                    IsItemClickEnabled="True"
                    ItemsSource="{Binding}"
                    ItemClick="GroupSection_ItemClick"
                    ContinuumNavigationTransitionInfo.ExitElementContainer="True">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Margin="0,0,0,27.5">
                                <TextBlock Text="{Binding Title}" Style="{ThemeResource ListViewItemTextBlockStyle}" />
                            </StackPanel>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </DataTemplate>
        </HubSection>

Вышеупомянутый XAML в основном вытаскивается прямо из шаблона hubapp. Я хочу иметь возможность использовать собственный источник items внутри этого ListView, который генерируется из моего кода на С#. Однако я не могу понять, как работает этот элемент ItemsSource. Я также не могу получить доступ к моему списку по имени (ClubsList).

Вот код инициализации, идущий вверх (не был уверен, было ли важно опубликовать это или нет):

<Page
x:Class="HubAppTemplate.HubPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:HubAppTemplate"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:data="using:HubAppTemplate.Data"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
d:DataContext="{Binding Source={d:DesignData Source=/DataModel/SampleData.json, Type=data:SampleDataSource}}"
mc:Ignorable="d"> 

<Page.Resources>

    <DataTemplate x:Key="HubSectionHeaderTemplate">
        <TextBlock Margin="0,0,0,-9.5" Text="{Binding}"/>
    </DataTemplate>

    <!-- Grid-appropriate item template as seen in section 2 -->
    <DataTemplate x:Key="Standard200x180TileItemTemplate">
        <Grid Margin="0,0,9.5,9.5" Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
            <Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}" Height="138.5" Width="138.5"/>
            <TextBlock Text="{Binding Title}" VerticalAlignment="Bottom" Margin="9.5,0,0,6.5" Style="{ThemeResource BaseTextBlockStyle}"/>
        </Grid>
    </DataTemplate>

    <DataTemplate x:Key="StandardTripleLineItemTemplate">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Margin="0,9.5,0,0" Grid.Column="0" HorizontalAlignment="Left">
                <Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}" Height="79" Width="79"/>
            </Border>
            <StackPanel Grid.Column="1" Margin="14.5,0,0,0">
                <TextBlock Text="{Binding Title}" Style="{ThemeResource ListViewItemTextBlockStyle}"/>
                <TextBlock Text="{Binding Description}" Style="{ThemeResource ListViewItemContentTextBlockStyle}" Foreground="{ThemeResource PhoneMidBrush}" />
                <TextBlock Text="{Binding Subtitle}" Style="{ThemeResource ListViewItemSubheaderTextBlockStyle}" />
            </StackPanel>
        </Grid>
    </DataTemplate>

    <DataTemplate x:Key="StandardDoubleLineItemTemplate">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Margin="0,9.5,0,0" Grid.Column="0" HorizontalAlignment="Left">
                <Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}" Height="79" Width="79"/>
            </Border>
            <StackPanel Grid.Column="1" Margin="14.5,0,0,0">
                <TextBlock Text="{Binding Title}" Style="{ThemeResource ListViewItemTextBlockStyle}"/>
                <TextBlock Text="{Binding Subtitle}" Style="{ThemeResource ListViewItemSubheaderTextBlockStyle}"/>
            </StackPanel>
        </Grid>
    </DataTemplate>
</Page.Resources>

<Grid x:Name="LayoutRoot">
    <Hub x:Name="Hub" x:Uid="Hub" Header="Club Alert" Background="{ThemeResource HubBackgroundImageBrush}">

Он вытаскивает из бэкэнда JSON, но я хочу просто использовать собственный собственный список для каждого раздела. Однако удаление заголовков DataSource и заголовков данных дает мне ошибки.

Большое вам спасибо за вашу помощь заранее!

--A общий новичок

Flying Lawnmowers 31 окт. 2014, в 19:24

Источник

Теги:

c#

visual-studio

.net

xaml

windows-phone-8.1

1 ответ

Ещё вопросы

dslane · Accepted Answer · 2014-11-24T21-06-00.000Z

HubSection элементы HubSection требуют, чтобы их содержимое HubSection с помощью шаблона, поэтому вы не можете просто удалить теги <DataTemplate>. Однако есть простой способ выполнить то, что вы пытаетесь сделать, если я правильно вас понимаю.

Если вы начинаете с шаблона концентратора по умолчанию, вы должны иметь эту функцию в файле HubPage.xaml.cs

private async void NavigationHelper_LoadState(object sender, LoadStateEventArgs e)
        {
            // TODO: Create an appropriate data model for your problem domain to replace the sample data
            var sampleDataGroups = await SampleDataSource.GetGroupsAsync();
            this.DefaultViewModel["Groups"] = sampleDataGroups;

            MainViewModel viewModel = DataContext as MainViewModel;
            if (!viewModel.IsDataLoaded)
            {
                viewModel.Load();
            }
        }

this.DefaultViewModel - это просто словарь, и они загрузили образец JSON в переменную и сохранили его в ключе ["Groups"] словаря. Поскольку {Binding DefaultViewModel, RelativeSource={RelativeSource Self}} DataContext привязан к {Binding DefaultViewModel, RelativeSource={RelativeSource Self}}, объект DataContext HubSection привязан к {Binding Groups}, а ItemsSource ListView в каждом DataTemplate привязан к {Binding}, каждый элемент загруженного JSON используется для заполнения элементов ListView.

Простым решением было бы присвоить this.DefaultViewModel["Groups"] списку С#, который вы создаете, из данных, которые вы загружаете с вашего конца.

Что-то вроде этого:

private async void NavigationHelper_LoadState(object sender, LoadStateEventArgs e)
            {
                // TODO: Create an appropriate data model for your problem domain to replace the sample data
                var myData = await GetListOfThingsFromBackend();
                this.DefaultViewModel["Groups"] = myData;

                MainViewModel viewModel = DataContext as MainViewModel;
                if (!viewModel.IsDataLoaded)
                {
                    viewModel.Load();
                }
            }

Более подходящий подход, вероятно, состоит в том, чтобы разделить все функции ViewModel на свой собственный класс, который лучше подходит для ваших нужд, а затем настроить различные свойства DataContext во всем XAML, но это, скорее всего, займет больше времени. Я могу при необходимости разработать, но простого решения, вероятно, достаточно сейчас.

Большое спасибо! У меня недостаточно кармы, чтобы поддержать тебя, но я очень ценю это усилие.