Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Lista Rolável na Horizontal (Horizontal ScrollView)

Professor, a lista ensinada no curso é na vertical (ListView), inclusive coloquei os códigos abaixo. Gostaria de saber como faço para que esta lista seja na Horizontal???

Gostaria que no cabeçalho ficasse uma ScrollView de Categoria de Produtos (Carros, Motos, Triciclos, Helicópteros, Jet Ski, ...). Quando eu clicasse em Carros, iria para a página só de carros. Quando Motos, para uma página de Motos, etc

Abaixo desta Lista na Horizontal de Categorias de Veículos (no cabeçalho), ficaria a ListView Ensinada no curso (Uma lista geral ...)

7 respostas

Olá, Marcelo!

Acho que não seria adequado criar um ListView horizontal neste caso. O que você está sugerindo é uma funcionalidade fornecida pelo controle do Xamarin Forms chamado TabbedPage.

https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/navigation/tabbed-page/

Nós apresentamos o TabbedPage no novo curso "Xamarin parte 3" aqui da alura:

https://cursos.alura.com.br/course/xamarin-aplicativos-mobile-com-visual-studio-parte-3

Boa sorte e bons estudos!

Muito Obrigado !!!! Estava ansioso por mais cursos do Xamarin. Vou fazer os outros módulos aqui. Obrigado Professor !!!!!

Professor, achei um link do que eu quero fazer

Tem certeza que é o TabbedPage? pois vi alguns exemplos na net com o Horizontal ScrollView ....

Quero criar umas imagens no Cabeçalho (Carro, Moto, Avião, Caminhão, Bike, ...) e a pessoa ir passando arrastando o dedo na horizontal. Ai quando escolher o "Veículo", iria para a página do mesmo...

Olá, Marcelo!

Realmente, se você quer mostrar imagens no cabeçalho, faz sentido ter outro controle diferente do TabbedPage.

Então eu recomendo o componente CarouselView, que é apresentado no artigo do James Montemagno:

"Flip through items with Xamarin.Forms CarouselView" https://blog.xamarin.com/flip-through-items-with-xamarin-forms-carouselview/

O que acha?

Na verdade ainda creio que eh o Horizontal ScrollView, Vou enviar um e-mail com uma fotos para ficar mais fácil para entender. Vou pedir para alguém da Alura lhe Passar, pois não da para anexar fotos aqui. Vou tentar Desenhar aqui tb:

Produtos = Texto qualquer

Carro.jpg | Moto.jpg | Helicóptero.jpg | Caminhão.jpg | Bike.jpg = Imagens Roláveis na Horinzontal

= Cabeçalho Travado (Texto e Imagens acima) Fusca.img Fusca 1.8 R$ 10.000,00 | = Lista Rolável com todos produtos na Vertical Corsa.img Corsa 1.6 R$ 15.000,00 | CG 125.img CG 125 Honda R$ 10.000,00 | Kawasaki.img Kawasaki 700 cc R$ 20.000,00 | Caminhão.img Scania 2 eixos R$ 50.000,00

O usuário pode escolher o caminhão rolando para baixo (lista com todos os produtos), ou pode escolher o caminhão ou moto ou ... clicando na imagem que esta acima

solução!

Olá, Marcelo

Fiz um projeto novo e consegui fazer um ScrollView Horizontal:

Segue o código XAML:

    <Grid RowSpacing="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <ScrollView Grid.Row="0" HorizontalOptions="FillAndExpand" Orientation="Horizontal" VerticalOptions="StartAndExpand">
            <StackLayout x:Name="StackGallery" Padding="1" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
            </StackLayout>
        </ScrollView>
        <Label Grid.Row="1" Text="Found x items" HeightRequest="30"></Label>
    </Grid>

e também o code behind:

    class Veiculo
    {
        public string ImageSrc { get; }
        public string Nome { get; }
        public decimal Preco { get; }

        public Veiculo(string imageSrc, string nome, decimal preco)
        {
            this.ImageSrc = imageSrc;
            this.Nome = nome;
            this.Preco = preco;
        }
    }

    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            List<Veiculo> veiculos = new List<Veiculo>
            {
                new Veiculo("http://pngimg.com/uploads/volkswagen/volkswagen_PNG1805.png", "Fusca 1.8", 10000),
                new Veiculo("https://lh3.googleusercontent.com/-rNDRy76a_3Y/AAAAAAAAAAI/AAAAAAAAAGE/zG-Irt10ugA/photo.jpg", "Corsa 1.6", 15000),
                new Veiculo("http://pruebas.honda.mx/assets/img/megamenu/png/motos/detail/trabajo/CGL125TOOL.png", "CG 125 Honda", 10000),
                new Veiculo("https://lh4.googleusercontent.com/-OjnurfyrTs8/AAAAAAAAAAI/AAAAAAAAAAc/HERNt6S2Jns/photo.jpg", "Kawasaki 700 cc", 20000),
                new Veiculo("http://lh6.googleusercontent.com/-MoN-6ggcPuQ/AAAAAAAAAAI/AAAAAAAAHAY/Y5u-tchpBQQ/s512-c/photo.jpg", "Scania 2 eixos", 50000)
            };

            foreach (var item in veiculos)
            {
                var grid = new Grid
                {
                    RowDefinitions =
                    {
                        new RowDefinition { Height = 102 },
                        new RowDefinition { Height = 32 },
                        new RowDefinition { Height = 32 },
                    },
                    ColumnDefinitions =
                    {
                        new ColumnDefinition { Width = 120 }
                    }
                };

                var img = new Image { Source = ImageSource.FromUri(new Uri(item.ImageSrc)) };
                var lblNome = new Label { Text = item.Nome };
                var lblPreco = new Label { Text = item.Preco.ToString() };

                grid.Children.Add(img, 0, 0);
                grid.Children.Add(lblNome, 0, 1);
                grid.Children.Add(lblPreco, 0, 2);

                StackGallery.Children.Add(grid);
            }
        }
    }

Veja se atende a sua necessidade.

Boa sorte e bons estudos

Professor, Muito Obrigado !!! Era isso mesmo !!!! God Keep Blessing you ;)