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>