如何在C#xamarinformsandroid中使用ImageButton水平移動？

我正在嘗試使用 C# xamarin forms android 中的 ImageButtons 水平移動。

我的應用程式如下所示：

如果可能的話，我想做的是使用那些 ImageButtons 水平移動。我想觸摸 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>

代碼 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);
}

我希望有人可以指導我。非常感謝！

uj5u.com熱心網友回復：

正如杰森所說，CarouselView比ScrollView你的情況更適合。

我用使用做了一個demo 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; }
    }

uj5u.com熱心網友回復：

解決方案

最后，我使用了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>

代碼 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);
}

當然，最后我需要這一行來在我的 Page.xaml.cs 中設定影像：

carousel.ItemsSource = imgsCarrousel;

標籤：C＃ xamarin xamarin.forms xamarin.android

上一篇：MAUICreatePlatformView從未被呼叫？

下一篇：在.netMaui中切換不同組頁面元素可見性的任何替代方法？