如何在C# xamarin窗体android中使用ImageButton水平移动?

s71maibg  于 2022-12-07  发布在  C#
关注(0)|答案(2)|浏览(215)

我正在尝试使用C# xamarin forms android中的ImageButtons进行水平移动。
我的应用程序如下所示:

如果可能的话,我想使用这些ImageButton进行水平移动。我想触摸ImageButton并浏览代码动态生成的每个StackLayout。但我不知道如何才能做到这一点。我将让代码在这里:
代码页.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>

代码页. 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);
}

我希望有人能指导我。非常感谢!

drkbr07n

drkbr07n1#

正如杰森所说,CarouselViewScrollView更适合你的情况。
我用CarouselView做了一个演示,你可以参考一下。
下面是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>

下面是Mainpage.xaml.cs中的代码:

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

下面是MyViewModel.cs中的代码,您可以向其中添加数据:

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" });
        }

    }

下面是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; }
    }
ryhaxcpt

ryhaxcpt2#

解决方案

最后,我用了一个 CarouselView,它运行得很好。用这个代码我解决了我的问题。我把我的代码留在这里。也许它能帮助别人。
代码页.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>

代码页. 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);
}

当然,最后我需要这行代码来设置Page.xaml.cs中的图像:

carousel.ItemsSource = imgsCarrousel;

相关问题