I'm trying to move horizontally using ImageButtons in C# xamarin forms android.
My app looks like this:
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;