CODEWITHSUNDEEP
wpf-controlsmaterial-design-in-xaml
CodeRed
CodeRed

Reputation: 903

How can I add add vertical orientation to ItemsControl while also having the Scroll?

I am creating a design that dynamically adds materialdesign:Card inside ItemsControl. My original design code is this:

<ItemsControl ItemsSource="{Binding Something}" HorizontalAlignment="Left">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <materialDesign:Card>
                ....
            </materialDesign:Card>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

However, I didn't liked the output that looks like this:

 ----------------------------------------
| [ Card here ]                          |
| [ Card here ]                          |
| [ Card here ]                          |
 ----------------------------------------

I researched adding vertical orientation and saw previous SO topics that suggest to add something like this:

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <WrapPanel Orientation="Vertical"/>
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

Indeed, it somehow answered my concern:

 -------------------------------------------
| [ Card here ] [ Card here ] [ Card here ] |
| [ Card here ] [ Card here ] [ Card here ] |
 -------------------------------------------

Problem now is that there are still Cards not shown below so I needed a ScrollBar to go down further. Previous SO topics suggested to add ScrollViewer, so I did before my ItemsControl.

<ScrollViewer>
   <ItemsControl>
        ....
   </ItemsControl>
</ScrollViewer>

However, it leads back to the first result. Is there a way to achieve this? Perhaps a replacement for WrapPanel or something?

Upvotes: 1

Views: 362

Answers (1)

LindaSingh
LindaSingh

Reputation: 84

You can try wrapping your ScrollViewer with DockPanel like this:

<DockPanel MaxHeight="300">
   <ScrollViewer VerticalScrollBarVisibility="Visible">
      <ItemsControl>
         ...
      </ItemsControl>
   </ScrollViewer>
</DockPanel>

Notice that I added VerticalScrollBarVisibility property to your ScrollViewer, it is your choice if it would be Vertical or Horizontal.

Upvotes: 1

Related Questions