Question

这是一个非常基本的问题，但我想让这个问题解决我面临的问题是我有一个项目清单在我的mainpage.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？如果没有，那么我如何将它绑定到一个可以通过绑定的xml显示项目的单个xaml。我想要创建的是一本书作为应用程序。

希望我的问题清楚易懂。

Answer 1

使用Tap事件而不是SelectedChangedEvent更容易，也更少错误。如果您的目标是WP7.5，这将无需额外的库。如果您的目标是WP7.0，那么您应该使用Silverlight Toolkit中的GestureListener。

<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 Light等MVVM框架来帮助处理这种管道并删除View和ViewModel之间的紧密依赖关系，但这种方式更为先进。

基本透视项目列表框数据绑定

1 个答案: