CODEWITHSUNDEEP
wpfxamlwinrt-xamlwin-universal-appwindows-10-universal
INNVTV
INNVTV

Reputation: 3367

Horizontal scrolling a row of ViewBox images in Xaml

I'm working on a UWP Windows 10 app with a XAML UI. One of my pages requires that images fill the height of the window (or screen in tablet mode) and uniformly scale as one long row of images from left to right (going off-screen). I've got this set up perfectly using ViewBoxes for the images inside of a StackPanel set to a Horizontal Orientation like so:

<StackPanel Orientation="Horizontal">
    <Viewbox>
        <Image Source="http://lorempixel.com/200/200/" />
    </Viewbox>
    <Viewbox>
        <Image Source="http://lorempixel.com/400/600/" />
    </Viewbox>
    <Viewbox>
        <Image Source="http://lorempixel.com/700/700/" />
    </Viewbox>
    <Viewbox>
        <Image Source="http://lorempixel.com/100/300/" />
    </Viewbox>
    <Viewbox>
        <Image Source="http://lorempixel.com/100/500/" />
    </Viewbox>
</StackPanel>

The intention is for the images to flow off-screen with a horizontal scroll that allows the user to pan from left to right to see the gallery of images as one long row.

I've tried enabling HorizontalScrollMode on the parent StackPanel like so:

<StackPanel Orientation="Horizontal" ScrollViewer.HorizontalScrollMode="Enabled">

But this did not enable any scrolling at all.

I also tried to wrap everything inside of a ScrollViewer like so:

<ScrollViewer HorizontalScrollMode="Enabled">
    <StackPanel Orientation="Horizontal">
        <Viewbox>
            <Image Source="http://lorempixel.com/200/200/" />
        </Viewbox>
        <Viewbox>
            <Image Source="http://lorempixel.com/400/600/" />
        </Viewbox>
        <Viewbox>
            <Image Source="http://lorempixel.com/700/700/" />
        </Viewbox>
        <Viewbox>
            <Image Source="http://lorempixel.com/100/300/" />
        </Viewbox>
        <Viewbox>
            <Image Source="http://lorempixel.com/100/500/" />
        </Viewbox>
    </StackPanel>
</ScrollViewer>

But this completly breaks my ViewBox layout by shrinking all the images so they fit within a small portion of the screen and no longer fill the window/tablet height.

I've tried a number of other variations with similar results. Does anyone have some suggestions for solving this? Let me know if you need more info.

Upvotes: 0

Views: 1060

Answers (2)

Filip Skakun
Filip Skakun

Reputation: 31724

You do need a ScrollViewer to enable scrolling, although you might need to set a few properties to make it only scroll horizontally as mentioned in Windows 8 ListView with horizontal item flow

ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.VerticalScrollMode="Disabled"
ScrollViewer.ZoomMode="Disabled"

Now the Viewbox is not the most controllable... control. You could try using the SquareGrid panel from my toolkit instead of the Viewboxes. Maybe simplify it a bit. If that isn't enough - you could add some bindable properties that would update when the size of your window changes and bind the Width and Height of these images to these properties. Note that you can't use ActualWidth or ActualHeight because these don't raise change notifications on size changes.

Upvotes: 2

Nghia Nguyen
Nghia Nguyen

Reputation: 2665

<GridView x:Name="ImageGridView" 
                      SelectedItem="{x:Bind ViewModel.SelectedLocation, Mode=TwoWay}"
                      Margin="10,0"
                      ScrollViewer.VerticalScrollBarVisibility="Disabled"
                      ScrollViewer.HorizontalScrollBarVisibility="Auto"
                      ScrollViewer.VerticalScrollMode="Disabled" 
                      ScrollViewer.HorizontalScrollMode="Auto"
                      Grid.Row="4" Grid.ColumnSpan="5"
                      ItemsSource="{x:Bind ViewModel.CheckedLocations}"
                      ItemContainerStyle="{StaticResource PinsGridViewItemStyle}"
                      ItemTemplate="{StaticResource ImageOverlayGalleryFolderDataTemplate}" >
                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <ItemsWrapGrid MaximumRowsOrColumns="1"/>
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                </GridView>

This is my code to show 1 row of photos. You can adjust by the MaxiumRowsOrColumns. Also note that both HorizontalScrollBarVisibility and HorizontalScrollMode are present to custom as you want to.

Upvotes: 0

Related Questions