Get DataTemplate current Index

DONG-ANKANGDONG-ANKANG USMember ✭✭

I get FlipView from this page(https://github.com/gruan01/FlipView).

(I add Button in Image and add function named btnClicked in button.)

<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:ctrls="clr-namespace:Xama_Test.Controls;assembly=Xama_Test"
         x:Class="Xama_Test.FlipPage1">

<StackLayout VerticalOptions="Center" HorizontalOptions="Center">

    <ctrls:Flip  ItemsSource="{Binding Imgs}" HeightRequest="300" AutoPlay="True">
        <ctrls:Flip.ItemTemplate>
            <DataTemplate x:Name="Dtmp">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition Height="30" />
                    </Grid.RowDefinitions>
                    <Grid>
                        <Image x:Name="FlipImage"  Source="{Binding Key}" Grid.RowSpan="2" Aspect="AspectFill"/>
                        <Grid>
                            <Button Clicked="btnClicked" Opacity="0">

                            </Button>
                        </Grid>
                    </Grid>
                    <Label Text="{Binding Value}" Grid.Row="1" BackgroundColor="#333333" Opacity="0.5" TextColor="White" VerticalOptions="Center" />
                </Grid>
            </DataTemplate>
        </ctrls:Flip.ItemTemplate>
    </ctrls:Flip>
</StackLayout>
</ContentView>

and I make app with this FlipView like under code.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:controls="clr-namespace:CarouselView.FormsPlugin.Abstractions;assembly=CarouselView.FormsPlugin.Abstractions"              
         xmlns:local="clr-namespace:Xama_Test"
         x:Class="Xama_Test.Xama_Test"
         Title="MainPage">

    <ScrollView x:Name="_LargeScroll" Orientation="Vertical">
        <StackLayout Orientation = "Vertical" x:Name="SLO" >
            <local:FlipPage1 x:Name="FlipMenu" />
        </StackLayout>
    </ScrollView>
</ContentPage>

and insert 6 image.

namespace Xama_Test
{
    public partial class FlipPage1 : ContentView
    {
        public Dictionary<string, string> Imgs
        {
            get;
            set;
        }

        public FlipPage1()
        {
            InitializeComponent();
            this.Imgs = new Dictionary<string, string>(){//source, label
                {"Image1.png","Image1"},
                {"Image2.png","Image2"},
                {"Image3.png","Image3"},
                {"Image4.png","Image4"},
                {"Image5.png","Image5"},
                {"Image6.png","Image6"},
            };


            this.BindingContext = this;
        }
        public void btnClicked () {
            //check index, and use if-else function,
            //run another act
        }
    }
}

I want when I click image, btnClicked function run
by clicked Image's current Index.
(ex. if I clicked 1st Image, use switch{} and run action)
but I don't know how can I get current Index.

and If it's not an excuse, in this code,
several view is go next view auto.
but I can't find where can control auto speed.
how can I control auto speed?

base code is in here
https://github.com/gruan01/FlipView

Answers

  • DK90DK90 USMember ✭✭✭
    edited April 2017

    You don't need a button there instead you can use a Gesture Recognizer for the Image ex:

        <Image x:Name="Image" Margin="5" Source="icon">
               <Image.GestureRecognizers>
                          <TapGestureRecognizer
                            Command="{Binding ClickToSendCommand}"
                            CommandParameter="{Binding Source={x:Reference Image},Path=BindingContext}"/>
                </Image.GestureRecognizers>
         </Image>
    

    and create a command property i.e. ClickToSendCommand in the VM or code behind and set an action to it ex:

               public ICommand ClickToSendCommand { get; set; }
    

    Initialize it and assign an action to it where you will be able to get the BindingContext value of the cell with which you can get the index of the item using IndexOf() method form the Binded Collection, as you are using Dictionary in the sample try to make use of the appropriate key from the BindingContext object.

  • DONG-ANKANGDONG-ANKANG USMember ✭✭

    DK90's code is very helpful.
    I remove button and add GestureRecognizer. Thanks.
    but I can't check image's index.

Sign In or Register to comment.