windows-phone-7 - 水平滚动嵌套项控件

Question

我正在开发一个 Windows Phone 7 应用程序。我需要垂直显示频道列表。在每个频道旁边，我需要显示该特定频道的节目，这些节目应该可以水平滚动。任何人都可以建议如何做到这一点？

Answer 1

您可以使用嵌套列表框，在子列表中设置滚动查看器，沿着这条线的东西应该让你开始

public class Channel
{
    public string Name { get; set; }

    public IEnumerable<Program> Programs { get; set; }
}

public class Program
{
    public string Name { get; set; }
}

在你的代码后面

 public MainPage()
    {
        InitializeComponent();

        BindChannels();
    }

  private void BindChannels()
  {
      lstChannels.ItemsSource = new[]
          {
              new Channel { Name = "BBC 1", Programs = new[] { new Program { Name = "Abbey Town" }, new Program { Name = "Early Bird" }, new Program { Name = "East enders" } } }, 
              new Channel { Name = "BBC 2", Programs = new[] { new Program { Name = "Dancing stars" }, new Program { Name = "David and G" }, new Program { Name = "The Eastern blocks" } } }, 
              new Channel { Name = "ITV", Programs = new[] { new Program { Name = "X Factor" }, new Program { Name = "X Factor reloaded" }, new Program { Name = "The game" } } }, 
              new Channel { Name = "Fox News", Programs = new[] { new Program { Name = "Early news" }, new Program { Name = "Talk C" }, new Program { Name = "Recap" } } }
          };
  }

Xaml

<ListBox x:Name="lstChannels">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" Margin="0,6,0,0" Height="Auto">
                        <ListBox ItemsSource="{Binding Programs}" ScrollViewer.VerticalScrollBarVisibility="Disabled" Margin="12,0,0,0">
                            <ListBox.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation ="Horizontal" >
                                        <StackPanel.RenderTransform>
                                            <TranslateTransform
                                 X="0" />
                                        </StackPanel.RenderTransform>

                                    </StackPanel>
                                </ItemsPanelTemplate>
                            </ListBox.ItemsPanel>
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <Border Height="100" Width="200" BorderBrush="Bisque" BorderThickness="3">
                                        <TextBlock Text="{Binding Name}"></TextBlock>
                                    </Border>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                    </ScrollViewer>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>