Binding ItemsControl to ScrollViewer

Question

At the begining I'll show some code:

private ObservableCollection<otwarteBezStolika> otwarteBezStolika = new ObservableCollection<otwarteBezStolika>();

        public ObservableCollection<otwarteBezStolika> listunia
        {
            get { return otwarteBezStolika; }
            set { otwarteBezStolika = value; }
        }
    }
    public class otwarteBezStolika
    {
        public string number { get; set; }
        public string date { get; set; }
        public int orderID { get; set; }
        public decimal price { get; set; }
        public decimal priceR { get; set; }
        public string opisRach { get; set; }
        public string sum { get; set; }
    }

And now in xaml:

<Window.Resources>
    <DataTemplate x:Key="dataTempl">
        <Border BorderBrush="Coral" BorderThickness="1" Width="170">
            <Button Name="goToPOS" Tag="{Binding orderID}" Click="goToPOS_Click" Style="{StaticResource TabCloseButtonStyle}" Margin="1">
                <StackPanel>
                    <Label Content="{Binding number}" HorizontalAlignment="Center" FontSize="15" FontWeight="ExtraBold" HorizontalContentAlignment="Center"></Label>
                    <Border BorderBrush="Turquoise" BorderThickness="1" Width="170"></Border>
                    <Label Content="{Binding date}" FontSize="12" HorizontalAlignment="Center"></Label>
                    <TextBlock Text="{Binding opisRach}" FontStyle="Italic" FontSize="12" Foreground="Black" TextAlignment="Center" TextWrapping="Wrap" Margin="0,0,0,2"></TextBlock>
                    <Border BorderBrush="WhiteSmoke" BorderThickness="1" Width="170"></Border>
                    <Label Content="{Binding sum}" FontSize="19" HorizontalAlignment="Center"></Label>
                </StackPanel>
            </Button>
        </Border>
    </DataTemplate>

    <DataTemplate x:Key="mainTemplate">
        <StackPanel>

            <ItemsControl x:Name="imageContent" ItemsSource="{Binding listunia}" ItemTemplate="{StaticResource dataTempl}" >
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </StackPanel>
    </DataTemplate>
</Window.Resources>

Grid:

<Grid Grid.Row="0">
        <ScrollViewer VerticalScrollBarVisibility="Auto">
            <ItemsControl Name="templ" ItemsSource="{Binding ElementName=UI, Path=listunia }" ItemTemplate="{StaticResource mainTemplate}" />
        </ScrollViewer>
    </Grid>

Problem is that I cannot see any item (I'm filling items using sqldatareader, and adding them to list - by the way, does DataTable will also work? So instead while(rdr.Read()) i could ouse SqlDataAdapter sda and sda.fill(Datatable))

Second problem is that, it does work when I put "dataTempl" inside scrollviewer ,like :

<Grid Grid.Row="0">
        <ScrollViewer VerticalScrollBarVisibility="Auto">
            <ItemsControl Name="templ" ItemsSource="{Binding ElementName=UI, Path=listunia }" ItemTemplate="{StaticResource dataTempl}" />
        </ScrollViewer>
    </Grid>

but items are show vertically, but I need to see them from left to right horizontal.

Thanks for answers!

Answer 1

Try doing this.. you dont need maintemplate.

<ScrollViewer VerticalScrollBarVisibility="Auto">
  <ItemsControl Name="templ" ItemsSource="{Binding ElementName=UI, Path=listunia }" ItemTemplate="{StaticResource dataTempl}">
    <ItemsControl.ItemsPanel>
          <ItemsPanelTemplate>
               <StackPanel Orientation="Vertical" ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
           </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
  </ItemsControl>
</ScrollViewer>

OR you can simply use:

  <ListBox Name="templ" ItemsSource="{Binding ElementName=UI, Path=listunia }" ItemTemplate="{StaticResource dataTempl}">
  </ListBox>