Базовая привязка данных списка элементов сводного элемента - PullRequest
Новая
       15

Базовая привязка данных списка элементов сводного элемента

0 голосов
/ 15 сентября 2011

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

<controls:PivotItem Header="WATER">
        <controls:PivotItem.Background>
            <ImageBrush ImageSource="Water.png" Stretch="Uniform"/>
        </controls:PivotItem.Background>
        <!--Triple line list no text wrapping-->
        <ListBox x:Name="SecondListBox" ItemsSource="{Binding Water}" Margin="0,0,-12,0" BorderBrush="Black" BorderThickness="0">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="0,0,0,17" Width="432" Height="50">
                        <TextBlock Text="{Binding LineOne}" TextWrapping="NoWrap" Margin="12,0,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="40" FontFamily="/Survival_Handbook;component/Fonts/Fonts.zip#XXII ARMY" Foreground="Black"/>
                        <!--<TextBlock Text="{Binding LineThree}" TextWrapping="NoWrap" Margin="12,-6,0,0" Style="{StaticResource PhoneTextSubtleStyle}"/>-->
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </controls:PivotItem>

Вот как это выглядит в MainViewModelSampleData.xaml 

 <local:MainViewModel.Water>
    <local:ItemViewModel LineOne="Finding water" LineTwo="Image" LineThree="Description"/>
    <local:ItemViewModel LineOne="Purifying water" LineTwo="Image" LineThree="Description"/>
    <local:ItemViewModel LineOne="Springs" LineTwo="Image" LineThree="Description"/>
    <local:ItemViewModel LineOne="Digging" LineTwo="Image" LineThree="Description"/>
    <local:ItemViewModel LineOne="Catchments" LineTwo="Image" LineThree="Description"/>
    <local:ItemViewModel LineOne="Solar stills" LineTwo="Image" LineThree="Description"/>
    <local:ItemViewModel LineOne="Sal gathering" LineTwo="Image" LineThree="Description"/>
</local:MainViewModel.Water>

вот так это выглядит в MainViewModel.cs 

public MainViewModel()
{
    this.Water = new ObservableCollection<ItemViewModel>();  
} 
public ObservableCollection<ItemViewModel> Water { get; private set; }

public void LoadData()
{
    this.Water.Add(new ItemViewModel() { LineOne = "Finding water", LineTwo = "Image", LineThree = "Description" });
    this.Water.Add(new ItemViewModel() { LineOne = "Purifying water", LineTwo = "Image", LineThree = "Description" });
    this.Water.Add(new ItemViewModel() { LineOne = "Springs", LineTwo = "Image", LineThree = "Description" });
    this.Water.Add(new ItemViewModel() { LineOne = "Digging", LineTwo = "Image", LineThree = "Description" });
    this.Water.Add(new ItemViewModel() { LineOne = "Catchments", LineTwo = "Image", LineThree = "Description" });
    this.Water.Add(new ItemViewModel() { LineOne = "Solar stills", LineTwo = "Image", LineThree = "Description" });
    this.Water.Add(new ItemViewModel() { LineOne = "Sal gathering", LineTwo = "Image", LineThree = "Description" });
}

Я пытаюсь заставить каждый этот элемент из списка открыться на новой странице с заголовком в виде lineOne и изображением в виде второй строки и его описанием в третьей строке. мне нужно создать отдельные xaml для каждого элемента сводки? Если нет, то как мне связать его с одним xaml, который может отображать элементы через связанный XML я пытаюсь создать книгу как приложение.

Надеюсь, мой вопрос ясен и понятен.

1 Ответ

0 голосов
/ 15 сентября 2011

Проще и менее глючно использовать событие Tap вместо SelectedChangedEvent.Если вы ориентируетесь на WP7.5, это будет работать без дополнительных библиотек.Если вы нацеливаетесь на WP7.0, то вам следует использовать GestureListener из Silverlight Toolkit . 

<DataTemplate>
 <StackPanel Margin="0,0,0,17" Width="432" Height="50"
  Tap="TapEventHandler" >
  <TextBlock Text="{Binding LineOne}" TextWrapping="NoWrap" Margin="12,0,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="40" FontFamily="/Survival_Handbook;component/Fonts/Fonts.zip#XXII ARMY" Foreground="Black"/>
 </StackPanel>
</DataTemplate>

Затем поместите код навигации в TapEventHandler в вашем коде позади,Здесь вам нужно получить ссылку на экземпляр ViewModel элемента, к которому вы прикоснулись, рассчитать, куда вы переходите, а затем перейти на эту новую страницу.

void TapEventHandler(object sender, RoutedEventArgs e)
{
  ItemViewModel ivm = (ItemViewModel) sender.DataContext;
  // ... find out what page/query string to navigate to based on ivm.
  NavigationService.Navigate(new Uri(/*uri here*/);
}

Вы также можете использовать инфраструктуру MVVM, такую ​​как MVVM Light, чтобы помочь с этим видом сантехники и устранить тесную зависимость между View и ViewModel, но это более продвинутое.

...