Cardview: Programmatically Set Position

[nawidy]

Hi @AndreiMisiukevich,
I'd like to be able to programmatically set the position of the carousel view. However I'd like to also have the option to enable the animation and disable it.
It looks like currently, I would need to set the private field to public to be able to do this. Is this right?
I have created a new carousel class and inherits from your carousel class currently. I'd like to to avoid trying to build all of your source to convert this private to public/protected. Can you please help with this?

Variable request to set to protected/public: ShouldIgnoreSetCurrentView

 public static readonly BindableProperty SelectedIndexProperty = BindableProperty.Create(nameof(SelectedIndex), typeof(int), typeof(CardsView), -1, BindingMode.TwoWay, propertyChanged: (bindable, oldValue, newValue) =>
    {
        var view = bindable.AsCardsView();
        view.SetSelectedItem();
        view.OldIndex = (int)oldValue;
        if (view.ShouldIgnoreSetCurrentView)
        {
            view.ShouldIgnoreSetCurrentView = false;
            return;
        }
        view.SetCurrentView();
    });

[AndreiMisiukevich]

Hi
you have already had this possibility

1) IsAutoNavigatingAimationEnabled = false // disable animations
2) Set new index
3) IsAutoNavigatingAimationEnabled = true // allow animations again

[AndreiMisiukevich]

let me know, please, if you have any troubles =)

btw, if you like this plugin, you may star it =)

[nawidy]

Awesome thanks @AndreiMisiukevich!

[nawidy]

@AndreiMisiukevich this doesn't seem to work. My card seems to ghost and stay static on top.
A bit more on what I'm doing here:
I was using a different carousel package prior to switching over to yours and in that I had written code to switch between templates when a button is clicked.
If a button on my card is clicked, it would switch over to another template. In my case it would switch between edit and view template modes.
This is what my previous code looked like.

            Debug.WriteLine("Changing Template");
            CurrentTweet._TemplateID = templateId;

            var template = ContentCarouselView.ItemTemplate;
            var templateSelector = template as DataTemplateSelector;
            templateSelector.SelectTemplate(CurrentTweet, null).CreateContent();

            //Doing this to force a refresh, intentionally swapping BindingContext twice
            var bindingContext = ContentCarouselView.BindingContext;
            var position = ContentCarouselView.Position;
            var animateTransition = ContentCarouselView.AnimateTransition;
            ContentCarouselView.BindingContext = null;
            ContentCarouselView.BindingContext = bindingContext;
            ContentCarouselView.BindingContext = null;
            ContentCarouselView.BindingContext = bindingContext;

            // Need to reset the position because context has changed
            ContentCarouselView.AnimateTransition = false;
            ContentCarouselView.Position = position;
            ContentCarouselView.AnimateTransition = animateTransition;

And this is what the code looks like using the field you suggested, what am I doing wrong here?

            Debug.WriteLine("Changing Template");
            CurrentTweet._TemplateID = templateId;

            var template = CardsCarouselView.ItemTemplate;
            var templateSelector = template as DataTemplateSelector;
            templateSelector.SelectTemplate(CurrentTweet, null).CreateContent();

            //Doing this to force a refresh, intentionally swapping BindingContext twice
            var bindingContext = CardsCarouselView.BindingContext;
            var position = CardsCarouselView.SelectedIndex;
            var animateTransition = CardsCarouselView.IsAutoNavigatingAimationEnabled;
            CardsCarouselView.BindingContext = null;
            CardsCarouselView.BindingContext = bindingContext;
            CardsCarouselView.BindingContext = null;
            CardsCarouselView.BindingContext = bindingContext;

            // Need to reset the position because context has changed
            CardsCarouselView.IsAutoNavigatingAimationEnabled = false;
            CardsCarouselView.SelectedIndex = position;
            CardsCarouselView.IsAutoNavigatingAimationEnabled = animateTransition;

[AndreiMisiukevich]

Could you please create small sample project ? It would be amazing.

BTW, firstly you can try to set animationEnabled and index in Main thread

[nawidy]

Thanks @AndreiMisiukevich,
How would the code look like if I tried to do this on the main thread? this currently is a result of an image tapped action.

[AndreiMisiukevich]

BTW, you sent me two parts of code. And the first part is related to Alex carousel view.. not mine
Do you use both?

[nawidy]

You are correct. The first part was when I was Alex Carousel view, I have changed my code to the 2nd part which is using your framework. The first part has been changed to be the 2nd part.

[AndreiMisiukevich]

Device.BeginInvokeInMainThread

And insert code below there

CardsCarouselView.IsAutoNavigatingAimationEnabled = false;
CardsCarouselView.SelectedIndex = position;
CardsCarouselView.IsAutoNavigatingAimationEnabled = animateTransition;

[AndreiMisiukevich]

If you send me your project via email, I can figure out with this issue easily ;)

[AndreiMisiukevich]

I need whole code, please

[AndreiMisiukevich]

Should I wait the sample from you?

[nawidy]

Hi Andrei, I’m currently working on creating a sample for you to see.

On Aug 21, 2018, at 11:42 AM, Andrei [e-mail] wrote:

Should I wait the sample from you?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/AndreiMisiukevich/CardView/issues/91#issuecomment-414780174, or mute the thread https://github.com/notifications/unsubscribe-auth/AD5nMdZcpI7wJNmBLV666SLuhNly6U8fks5uTFSugaJpZM4WFJ7e.

[nawidy]

Hi @AndreiMisiukevich,
I have e-mailed you a sample

[nawidy]

Can you let me know if you have received it @AndreiMisiukevich ?

[AndreiMisiukevich]

@nawidy hey, I investigated your issue.
I think, it would be better, if you won't use DataTemplateSelector.

So, every card has got two layouts:

!Main Layout!
-> Primary layout (IsVisible = true if template id = RegularView)
-> Edit layout (IsVisible = true if template id = EditView)

Just bind IsVisible property to your TemplateId with converter.
It is the easiest way.. because it isn't very well to recreate view each time you change one property.

Does it make sense?

[nawidy]

Thanks @AndreiMisiukevich,
I was thinking a better approach may be to use the DataTemplateSelector for my various view options, and when wanting to go into edit mode to switch layouts like you have suggested.
Thanks again!

[AndreiMisiukevich]

            <local:CustomCarouselView  
                    x:Name="CardsCarouselView"
                    ItemsSource="{Binding Items}"
                    VerticalOptions="FillAndExpand"
                    Padding="15, 25, 15, 25"
                    />
            <local:CustomCarouselView.ItemTemplate>
                <DataTemplate>
                    <Frame>
                        <StackLayout>
                            <StackLayout IsVisible="{Binding Path=TemplateId, Converter= }">
                                <Label Text="{Binding Text}"
                                   FontSize="Medium"
                                   />
                            <BoxView BackgroundColor="Blue"/>
                            </StackLayout>

                            <StackLayout IsVisible="{Binding Path=TemplateId, Converter=}">
                                <Editor x:Name="RawTextEditor"
                                Text="{Binding Text}"
                                BackgroundColor="Silver"
                                Opacity=".75"
                                FontSize="Medium"
                                MaxLength="280"/>
                                <BoxView BackgroundColor="Fuchsia"/>
                            </StackLayout>
                        </StackLayout>
                    </Frame>
                </DataTemplate>
            </local:CustomCarouselView.ItemTemplate>

[AndreiMisiukevich]

private ContentTemplateId _templateID;

        public ContentTemplateId TemplateId
        {
            get
            {
                return _templateID;
            }
            set
            {
                _templateID = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(TemplateId)));
            }
        }

[AndreiMisiukevich]

Yep, it could be a good approach.. but there is no pretty way to recreate view on property changed...