CODEWITHSUNDEEP
xamlwindows-phone-8.1
Anbarasi
Anbarasi

Reputation: 421

Horizontal Listing of Images In GridView

I am new to windows phone development, i need to list the images in horizontal way with horizontal scroll. I have tried using the below Code

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <GridView Name="display" ItemsSource="{Binding}" Foreground="#FFE6D52E">
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="3"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
        <GridView.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal" Margin="10">
                    <Image Source="{Binding Image}" Width="300" Height="300"/>
                </StackPanel>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>
</Grid>

But it displays vertically as attached enter image description here

But I need to display it as below

enter image description here

Please guide me to achieve as expected

Thanks in advance

Upvotes: 1

Views: 360

Answers (1)

Andrii Krupka
Andrii Krupka

Reputation: 4306

At first, change Orientation from Horizontal from Horizontal to Vertical. At second, enable ScrollViewer.VerticalScrollMode. 

<GridView Name="display"
          VerticalAlignment="Top"
          ScrollViewer.HorizontalScrollBarVisibility="Auto"
          ScrollViewer.VerticalScrollBarVisibility="Disabled"
          ScrollViewer.HorizontalScrollMode="Enabled"
          ScrollViewer.VerticalScrollMode="Disabled"
          Foreground="#FFE6D52E">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid Orientation="Vertical"
                           MaximumRowsOrColumns="3"/>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
    <GridView.ItemTemplate>
        <DataTemplate>
            <Grid Margin="10">
                <Image Source="{Binding }" 
                       HorizontalAlignment="Center"
                       Stretch="Uniform"
                       Width="30" 
                       Height="30"/>
            </Grid>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

Upvotes: 2

Related Questions