Home > Enterprise >  how to move horizontally using ImageButton in C# xamarin forms android?
how to move horizontally using ImageButton in C# xamarin forms android?

Time:08-29

I'm trying to move horizontally using ImageButtons in C# xamarin forms android.

My app looks like this: enter image description here

What I want to do if it's possible is move horizontally using those ImageButtons. I'd like to touch the ImageButton and go through each StackLayout that my code generate dynamically. But I don't know how could I do that. I will let my code here:

code page.xaml:

<AbsoluteLayout>
    <ScrollView HorizontalScrollBarVisibility="Never" Orientation="Horizontal" HorizontalOptions="Center">
        <StackLayout x:Name="imgs" Orientation="Horizontal" HorizontalOptions="Center">

        </StackLayout>
    </ScrollView>
    <ImageButton x:Name="btnLeft" Clicked="btnMoveLeft" Source="drawable/left.png" WidthRequest="50" HeightRequest="50" AbsoluteLayout.LayoutBounds="0.009,0.5,100,100" AbsoluteLayout.LayoutFlags="PositionProportional"></ImageButton>
    <ImageButton x:Name="btnRight" Clicked="btnMoveRight" Source="drawable/right.png" WidthRequest="50" HeightRequest="50" AbsoluteLayout.LayoutBounds="0.95,0.5,100,100" AbsoluteLayout.LayoutFlags="PositionProportional"></ImageButton>
</AbsoluteLayout>

code Page.xaml.cs:

private void btnMoveLeft(object sender, EventArgs e)
    {
        
    }
    private void btnMoveRight(object sender, EventArgs e)
    {

    }
public void generateImg(MediaFile file2)
    {
        StackLayout stackLayout = new StackLayout();
        stackLayout.Orientation = StackOrientation.Vertical;
        StackLayout stackLayoutMinimo = new StackLayout();

        Image im = new Image();
        im.ClassId = contador.ToString();
        im.Source = ImageSource.FromFile(file2.Path);

        im.HeightRequest = 600;
        im.WidthRequest = 400;
        im.MinimumHeightRequest = 600;
        im.MinimumWidthRequest = 400;

        im.VerticalOptions = LayoutOptions.End;
        im.HorizontalOptions = LayoutOptions.End;
        im.Aspect = Aspect.AspectFill;

        stackLayout.Children.Add(im);

        Button deleteButton = new Button();
        deleteButton.ClassId = contador.ToString();
        deleteButton.Text = "Borrar imagen";
        deleteButton.VerticalOptions = LayoutOptions.CenterAndExpand;
        deleteButton.HorizontalOptions = LayoutOptions.Center;
        deleteButton.MinimumWidthRequest = 100;
        deleteButton.ClassId = contador.ToString();
        deleteButton.AutomationId = contador.ToString();
        deleteButton.Clicked  = async (sender, args) => {
            listDelete.Add(Convert.ToInt32(deleteButton.ClassId));
            stackLayout.Children.Remove(im);
            stackLayout.Children.Remove(deleteButton);
        };        
        stackLayout.Children.Add(deleteButton);

            imgs.Children.Add(stackLayout);
}

I hope someone can guide me. Thank you very much!

CodePudding user response:

Just as Jason said, CarouselView is more suitable than ScrollView in your situation.

I made a demo by using CarouselView and you can refer to this.

Here is the code in Mainpage.Xaml:

<CarouselView ItemsSource="{Binding Photos}">
        <CarouselView.ItemTemplate>
            <DataTemplate>
                <StackLayout>
                    <Frame HasShadow="True"
                       BorderColor="Gray"
                       CornerRadius="10"
                       Margin="25"
                       HeightRequest="350"
                       HorizontalOptions="Center"
                       VerticalOptions="CenterAndExpand">
                        <StackLayout>
                            <Label Text="{Binding Name}"
                               FontAttributes="Bold"
                               FontSize="Large"
                               HorizontalOptions="Center"
                               VerticalOptions="Center" />
                            <Image Source="{Binding Url}"></Image>

                            <Label Text="{Binding Location}"
                               HorizontalOptions="Center" />
                            <Label Text="{Binding Details}"
                               FontAttributes="Italic"
                               HorizontalOptions="Center"
                               MaxLines="5"
                               LineBreakMode="TailTruncation" />
                            <Button Text="Click"/>
                        </StackLayout>
                    </Frame>
                </StackLayout>
            </DataTemplate>
        </CarouselView.ItemTemplate>
    </CarouselView>

Here is the code in Mainpage.Xaml.cs:

  public MainPage()
        {
            InitializeComponent();
            this.BindingContext = new MyViewModel();
        }

Here is the code in MyViewModel.cs and you can add data to it:

 public class MyViewModel
    {
        public ObservableCollection<Photo> Photos { get; set; }
        public MyViewModel()
        {
            Photos = new ObservableCollection<Photo>();
            Photos.Add(new Photo() { Name = "Photos", Details= "Photos", Location= "Photos", Url= "Photos" });
            Photos.Add(new Photo() { Name = "Photos", Details = "Photos", Location = "Photos", Url = "Photos" });
            Photos.Add(new Photo() { Name = "Photos", Details = "Photos", Location = "Photos", Url = "Photos" });
        }

    }

Here is the code in Photo.cs:

   public class Photo
    {
        public string Name { get; set; }
        public string Location { get; set; }
        public string Details { get; set; }
        public string Url { get; set; }
    }

CodePudding user response:

SOLUTION

Finally, I use a CarouselView, it worked perfectly. With this code I resolved my problem. I left my code here. Maybe it helps someone.

code page.xaml:

      <AbsoluteLayout>
          <StackLayout Padding="5">
              <CarouselView x:Name="carousel" HeightRequest="600" IndicatorView="{x:Reference contImgs}">
                  <CarouselView.ItemTemplate>
                      <DataTemplate>
                          <Image x:Name="activeImg" Source="{Binding Source}" Aspect="AspectFill"></Image>
                      </DataTemplate>
                  </CarouselView.ItemTemplate>
              </CarouselView>
             <IndicatorView x:Name="contImgs" IndicatorColor="#bbb" SelectedIndicatorColor="#000" IndicatorSize="12" IndicatorsShape="Circle"></IndicatorView>
          </StackLayout>
          <ImageButton Source="drawable/icon_trash.png" WidthRequest="100" Clicked="btnDeleteImg" HeightRequest="100" AbsoluteLayout.LayoutBounds="0.98,0.07,50,50" AbsoluteLayout.LayoutFlags="PositionProportional"></ImageButton>
          <ImageButton x:Name="left" Clicked="btnMoveLeft" Source="drawable/left.png" WidthRequest="50" HeightRequest="50" AbsoluteLayout.LayoutBounds="0.009,0.5,100,100" AbsoluteLayout.LayoutFlags="PositionProportional"></ImageButton>
          <ImageButton x:Name="right" Clicked="btnMoveRight" Source="drawable/right.png" WidthRequest="50" HeightRequest="50" AbsoluteLayout.LayoutBounds="0.95,0.5,100,100" AbsoluteLayout.LayoutFlags="PositionProportional"></ImageButton>
      </AbsoluteLayout>

code Page.xaml.cs:

private List<Image> imgsCarrousel = new List<Image>();

public void generarImg (MediaFile file2)
{
    StackLayout stackLayout = new StackLayout();
            stackLayout.Orientation = StackOrientation.Vertical;
            StackLayout stackLayoutMinimo = new StackLayout();

            Image im = new Image();
            im.ClassId = contador.ToString();
            im.Source = ImageSource.FromFile(file2.Path);

            im.HeightRequest = 600;
            im.WidthRequest = 400;
            im.MinimumHeightRequest = 600;
            im.MinimumWidthRequest = 400;

            im.VerticalOptions = LayoutOptions.End;
            im.HorizontalOptions = LayoutOptions.End;
            im.Aspect = Aspect.AspectFill;

            stackLayout.Children.Add(im);

            ImageButton deleteButton = new ImageButton();
            deleteButton.ClassId = contador.ToString();
            deleteButton.Source = "drawable/icon_trash.png";
            deleteButton.HeightRequest = 50;
            deleteButton.WidthRequest = 50;
            deleteButton.VerticalOptions = LayoutOptions.CenterAndExpand;
            deleteButton.HorizontalOptions = LayoutOptions.Center;
            deleteButton.MinimumWidthRequest = 100;
            deleteButton.ClassId = contador.ToString();
            deleteButton.AutomationId = contador.ToString();
            deleteButton.Clicked  = async (sender, args) => {
                listDelete.Add(Convert.ToInt32(deleteButton.ClassId));
                stackLayout.Children.Remove(im);
                stackLayout.Children.Remove(deleteButton);
            };        
            stackLayout.Children.Add(deleteButton);

            
            ImageButton imChica = new ImageButton();
            imChica.ClassId = contador.ToString();
            imChica.Source = ImageSource.FromFile(file2.Path);
            imChica.HeightRequest = 100;
            imChica.WidthRequest = 100;
            imChica.MinimumHeightRequest = 100;
            imChica.MinimumWidthRequest = 100;
            imChica.VerticalOptions = LayoutOptions.End;
            imChica.HorizontalOptions = LayoutOptions.End;
            imChica.Aspect = Aspect.AspectFill;
            imChica.Clicked  = async (sender, args) => {
                
            };

            stackLayoutMinimo.Children.Add(imChica);
            imgsMinimo.Children.Add(stackLayoutMinimo);


            imgsCarrousel.Add(im);
}

Of course, finally i need this line to set the images in my Page.xaml.cs:

carousel.ItemsSource = imgsCarrousel;
  • Related