Horizontally scrollable nested itemscontrol [closed] - windows-phone-7

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am developing a windows phone 7 application.
I need to display list of channels vertically. Next to each channel i need to display programs for that particular channel which should be horizontally scrollable. Can any one suggest how to do this?

Answer 1

You can use a nested listbox, setting a scrollviewer in the child list, something along this lines should get you started
public class Channel
{
public string Name { get; set; }
public IEnumerable<Program> Programs { get; set; }
}
public class Program
{
public string Name { get; set; }
}
In your code behind
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>