No image displayed when using this for ImageButton Image States

[dberroa]

I have installed this package and the glidex package and everything builds properly but the images I am trying to display do not display. When I remove this package but not the glidex package, they do. This leads me to believe this is related to glidex.forms. This is for Android.

I'm trying to do the following below to display two images buttons in a carousel.

[dberroa]

Not sure why the code disappeared.

<CarouselView IndicatorView="indicatorView" EmptyView="No items to Display" FlexLayout.Shrink="44" x:Name="buttonCarouselView"
                      IsVisible="{Binding OnePageDisplay, Converter={StaticResource InverseBoolConverter}, Mode=OneWay}" Scrolled="CarouselView_Scrolled">
            <CarouselView.ItemsSource>
                <x:Array Type="{x:Type ContentView}">
                    <ContentView>
                        <ImageButton HorizontalOptions="CenterAndExpand" VerticalOptions="Center" Aspect="AspectFit" BackgroundColor="Transparent"
                         Source="nobuttonnormal.png" Command="{Binding ButtonCommand, Mode=OneWay}" CommandParameter="no">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <VisualState.Setters>
                                            <Setter Property="Source" Value="nobuttonnormal.png" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <VisualState.Setters>
                                            <Setter Property="Source" Value="nobuttonpressed.png" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </ImageButton>
                    </ContentView>
                    <ContentView>
                        <ImageButton HorizontalOptions="CenterAndExpand" VerticalOptions="Center" Aspect="AspectFit" BackgroundColor="Transparent"
                            Command="{Binding ButtonCommand}" CommandParameter="yes">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <VisualState.Setters>
                                            <Setter Property="Source" Value="{Binding YesButtonImageSource, Mode=OneWay}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <VisualState.Setters>
                                            <Setter Property="Source" Value="{Binding YesButtonPressedImageSource, Mode=OneWay}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </ImageButton>
                    </ContentView>
                </x:Array>
            </CarouselView.ItemsSource>
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <ContentView Content="{Binding ., Mode=OneWay}" />
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>

[jonathanpeppers]

I think you are hitting this problem: #10 (comment)

If you set WidthRequest or HeightRequest, is the image displayed?

[dberroa]

Hey, thanks for the response. I read through the linked issue and saw that someone mentioned that setting height and width request to Fill or FillAndExpand also helped.

I tried fill, fillandexpand, and setting actual height and width (512) and it was better but still having issues. Now the image button does display in the carousel view using any combinationof fill, fillandexpland, and width and height but when you pressed the button and it goes to the pressed state image, it disappears. The button still takes up the space so when I press it multiple times it eventually flashes back in place and the disappears and then a few more times later then the pressed state image "loads" I guess and then it works properly and is very smooth. So the problem I'm having now is the pressed state image doesn't always appear.

However doing the above didn't fix my other view in which I have both buttons on the screen in just a normal flexlayout at all times.

<FlexLayout Direction="{Binding CarouselDirection, Mode=OneWay}" x:Name="flexButtonsView" FlexLayout.Grow="1" IsVisible="{Binding OnePageDisplay, Mode=OneWay}">
            <ImageButton HorizontalOptions="Fill" VerticalOptions="Fill" Aspect="AspectFit" BackgroundColor="Transparent"
                         Command="{Binding ButtonCommand, Mode=OneWay}" CommandParameter="yes">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter Property="Source" Value="{Binding YesButtonImageSource, Mode=OneWay}" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Pressed">
                            <VisualState.Setters>
                                <Setter Property="Source" Value="{Binding YesButtonPressedImageSource, Mode=OneWay}" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </ImageButton>
            <ImageButton HorizontalOptions="Fill" VerticalOptions="Fill" Aspect="AspectFit" BackgroundColor="Transparent"
                         Source="nobuttonnormal.png" Command="{Binding ButtonCommand, Mode=OneWay}" CommandParameter="no">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter Property="Source" Value="nobuttonnormal.png" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Pressed">
                            <VisualState.Setters>
                                <Setter Property="Source" Value="nobuttonpressed.png" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </ImageButton>
        </FlexLayout>

The initial button images appear but when I press them they disappear completely and doesn't take up space anymore so the other button fills up the missing space and then I press that button and it disappears and now all buttons are gone and I can't use them anymore.

Removing glidex.forms has them work but it lags so hard from the images that it's not acceptable for release.

I also saw this in the console at some point, not sure if it was before I set the width and height but it may help:

"Glide treats LayoutParams.WRAP_CONTENT as a request for an image the size of this device's screen dimensions. If you want to load the original image and are ok with the corresponding memory cost and OOMs (depending on the input size), use override(Target.SIZE_ORIGINAL). Otherwise, use LayoutParams.MATCH_PARENT, set layout_width and layout_height to fixed dimension, or use .override() with fixed dimensions."

[jonathanpeppers]

If you could send a PR adding this example here that would help out a lot:

https://github.com/jonathanpeppers/glidex/tree/master/glidex.forms.sample/Forms

I run through these before each release. If not, I may get around to testing this at some point, thanks.

[dberroa]

I've never actually submitted a PR to github. When you say this, do you want me to make a sample project showing the error and submit that or take your samples at the link and try and make it occur within your samples?

[jonathanpeppers]

If you can, make a view that shows the problem in the glidex samples. Thanks!

[dberroa]

So as mentioned I never summitted a PR so I'm running into a bit of an issue. I have cloned the code using visual studio 2019's clone GitHub feature. I then created a local branch and added all my examples showing the issue. I then try and push that branch and get the following error:

Pushing Davids_ImageButton
Remote: Permission to jonathanpeppers/glidex.git denied to dberroa.
Error encountered while pushing to the remote repository: Git failed with a fatal error.
unable to access 'https://github.com/jonathanpeppers/glidex/': The requested URL returned error: 403
Pushing to https://github.com/jonathanpeppers/glidex

Since 403 tends to be not authorized, is this not the way I'm supposed to be doing it? Do you need to turn me on to do this? I was thinking after pushing the branch up I can then create a pull request through the website for master -> to Davids_ImageButton branch.

I'm trying to piece together tutorials online as I never used git (always TFS) so I could be going down a completely wrong path.

Any help would be appreciated.

[jonathanpeppers]

@dberroa it sounds like you need to "fork" this repository, and send the pull request from your fork.

Does this help?

https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request-from-a-fork

[dberroa]

Forking it did the trick. I was able to create a pull request and have explained what to do with the buttons in the pull request. #74

Let me know if you have any questions.