xamarin / XamarinCommunityToolkit

The Xamarin Community Toolkit is a collection of Animations, Behaviors, Converters, and Effects for mobile development with Xamarin.Forms. It simplifies and demonstrates common developer tasks building iOS, Android, and UWP apps with Xamarin.Forms.
MIT License
1.59k stars 474 forks source link

Code working on Android but not in UWP #1426

Open Milowsky opened 3 years ago

Milowsky commented 3 years ago

Description

The MediaElement and IndicatorView are working fine in the Android. But when you select the UWP in start up project. No video is playing. Also the IndicatorView is not scrolling.

I have this question on the StackOverflow, here is the link for reference. But someone said that this may be a bug in xamarin, so I decided to post this here.

  1. Select the UWP in Start-up Projects.
  2. Run the Source.
  3. No video playing and the indicator view does not automatically scroll even if enabled.

Expected Behavior

image

Actual Behavior

image

Basic Information

Here is the code for the Designer and the code behind. Designer ` <MediaElement x:Name="BgVideo" Source="ms-appx:///video.mp4" ShowsPlaybackControls="False" IsLooping="True" AutoPlay="True" Aspect="AspectFill" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >

    <BoxView>
        <BoxView.Background>
            <LinearGradientBrush StartPoint ="1,0" EndPoint = "1,1">
                <GradientStop Color ="Transparent" Offset="0"></GradientStop>
                <GradientStop Color ="#5D9FFF" Offset="0.48"></GradientStop>
                <GradientStop Color ="#6BBBFF" Offset="1.0"></GradientStop>
            </LinearGradientBrush>
        </BoxView.Background>
    </BoxView>

    <Grid HeightRequest="280" Margin="30,30,30,100"
          RowSpacing="40" VerticalOptions="End">

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <CarouselView x:Name="cvOnBoarding" IndicatorView="LandingIndicator" IsScrollAnimated="True"
                      ItemsSource="{Binding OnBoardings}" HorizontalOptions="End"
                      Grid.Row="0" IsSwipeEnabled="True" HorizontalScrollBarVisibility="Never">
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <StackLayout Spacing="10">
                        <Label Text="{Binding Caption}" TextColor="White" FontSize="24" FontAttributes="Bold"
                               WidthRequest="220" HeightRequest="150" HorizontalOptions="Start" LineBreakMode="WordWrap"></Label>
                        <Label Text="{Binding Heading}" TextColor="White" FontSize="16" FontAttributes="Bold"
                               WidthRequest="250" HeightRequest="150" HorizontalOptions="Start" LineBreakMode="WordWrap"></Label>
                    </StackLayout>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>

        <IndicatorView x:Name="LandingIndicator" Grid.Row="1" IndicatorsShape="Circle"
                       IndicatorColor="#B8B8B8" SelectedIndicatorColor="#E7305E" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>

        <StackLayout Grid.Row="2" VerticalOptions="Start" HorizontalOptions="End">
            <Grid>
                <Button Grid.Column="0" x:Name="btnSignup" Text="Sign Up" HeightRequest="80" WidthRequest="145"
                    BackgroundColor="#E7305E" TextColor="White" CornerRadius="25" FontAttributes="Bold"/>
                <Button Grid.Column="1" x:Name="btnLogin" Text="Login" HeightRequest="80" WidthRequest="145"
                    BackgroundColor="White" TextColor="#2E4159" CornerRadius="25" FontAttributes="Bold" Command="{Binding LoginCommand}"/>
            </Grid>
        </StackLayout>
    </Grid>
</Grid>

**App.cs**

          public App()
    {
        InitializeComponent();
        Device.SetFlags(new[] { "MediaElement_Experimental", "Brush_Experimental" });
        DependencyService.Register<MockDataStore>();
        MainPage = new NavigationPage(new IndexPage());
    }

Code Behind

public partial class IndexPage : ContentPage
{
    Timer tmrAnimator;
    public IndexPage()
    {
        InitializeComponent();
        NavigationPage.SetHasNavigationBar(this, false);
        this.BindingContext = new IndexViewModel();
        AnimateMe();
    }

    private void AnimateMe()
    {
        tmrAnimator = new Timer(5000) { AutoReset = true, Enabled = true };

        tmrAnimator.Elapsed += (s, e) =>
        {

            if (BgVideo.CurrentState != MediaElementState.Playing)
            {
                BgVideo.Play();
            }

            Device.BeginInvokeOnMainThread(() =>
            {
                if (cvOnBoarding.Position == 3)
                {
                    cvOnBoarding.Position = 0;
                }

                cvOnBoarding.Position += 1;
                LandingIndicator.Position = cvOnBoarding.Position;

            });
        };
    }
}`

Workaround

Reproduction imagery

Reproduction Link

jfversluis commented 3 years ago

IndicatorView is something that is in Xamarin.Forms not with us, so if there is a bug there you should report it to them :) Also, I notice that you're on Forms 4.8? You probably want to update to 5.0 to make sure you have the latest bugfixes. Also, are you then even using the Toolkit? The MediaElement was in Xamarin.Forms until version 5 and only then moved to this Toolkit and has had a lot of bugfixes since then.

Please make sure that you have updated to the latest versions and try again.