Как реализовать нижнюю панель музыкального плеера

Question

Как реализовать нижнюю панель музыкального плеера

Рейтинг: 0Ответов: 1Опубликовано: 16.03.2023

Я перерыл весь интернет, и действительно не понимаю как можно сделать такую реализацию:

Я имею ввиду только нижнюю панель, которая будет появляться по клику и выводить текущую Selection Music

Код коллекции mp3:

<CollectionView  Grid.Row="1" Margin="20,0" ItemsSource="{Binding MusicList}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
                            SelectionMode="Single" SelectedItem="{Binding SelectedMusic}" SelectionChangedCommand="{Binding IsVisibleCommand}">
            <CollectionView.ItemsLayout>
                <LinearItemsLayout Orientation="Vertical" ItemSpacing="1"/>
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate >
                    <Grid Padding="15,10" HorizontalOptions="FillAndExpand">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <StackLayout  VerticalOptions="Center" >
                            <Label Text="{Binding Title}" TextColor="Black" FontSize="17"/>
                            <Label Text="{Binding Artist}" TextColor="Black" FontSize="12" Opacity="0.5"/>
                        </StackLayout>
                        <Image Source="download.png" Opacity="0.7" WidthRequest="15" HeightRequest="15" HorizontalOptions="End" VerticalOptions="Center" Margin="0,0,5,0" />
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

XAML страницы с панелью плеера:

<StackLayout VerticalOptions="End">
        <Grid Padding="15,25" HorizontalOptions="FillAndExpand" BackgroundColor="White">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <StackLayout VerticalOptions="Center">
                <StackLayout.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding OpenPlayer}"></TapGestureRecognizer>
                </StackLayout.GestureRecognizers>
                <Label Text="{Binding RecentMusic.Artist}" TextColor="Black" FontSize="17"></Label>
            </StackLayout>
            <Image Source="playBlack.png" WidthRequest="15" HeightRequest="15" HorizontalOptions="End" VerticalOptions="Center" Margin="0,0,5,0" />
        </Grid>
    </StackLayout>

Я пытался использовать модальные страницы:

public ICommand IsVisibleCommand => new Command(IsVisible);
        async void IsVisible()
        {
            if (selectedMusic!=null)
            {
                await App.Current.MainPage.Navigation.PushModalAsync(new BottomPlayerView());
                
            }
        }

но это не то что мне нужно т.к. новая страница открывается поверх старой, а старая просто не отображается. Мне требуется поместить две страницы на одной и связать их логикой

c# xamarin navigation

Источник: Stack Overflow на русском

Answer 1

▲ 0

В итоге сделал через свойство и асинхронный метод. Возможно лишняя нагрузка на устройство, но аналогов не вижу. Может кому поможет:

public ICommand IsVisibleCommand => new Command(IsVisible);
        
        async void IsVisible()
        {
            if (selectedMusic!=null)
            {
                await Task.Run(() => { isVisible = true; });
            }
        }
        private bool _isVisible;
        public bool isVisible
        {
            get
            {
                return _isVisible;
            }
            set
            {
                _isVisible = value;
                OnPropertyChanged();
            }
        }

XAML:

<CollectionView  Grid.Row="1" Margin="20,0" ItemsSource="{Binding MusicList}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
                            SelectionMode="Single" SelectedItem="{Binding SelectedMusic}" SelectionChangedCommand="{Binding IsVisibleCommand}">
            <CollectionView.ItemsLayout>
                <LinearItemsLayout Orientation="Vertical" ItemSpacing="1"/>
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate >
                    <Grid Padding="15,10" HorizontalOptions="FillAndExpand">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <StackLayout  VerticalOptions="Center" >
                            <Label Text="{Binding Title}" TextColor="Black" FontSize="17"/>
                            <Label Text="{Binding Artist}" TextColor="Black" FontSize="12" Opacity="0.5"/>
                        </StackLayout>
                        <Image Source="download.png" Opacity="0.7" WidthRequest="15" HeightRequest="15" HorizontalOptions="End" VerticalOptions="Center" Margin="0,0,5,0" />
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    <StackLayout VerticalOptions="End" IsVisible="{Binding isVisible}">
                <Grid Padding="15,25" HorizontalOptions="FillAndExpand" BackgroundColor="White">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <StackLayout VerticalOptions="Center">
                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding OpenPlayer}"></TapGestureRecognizer>
                        </StackLayout.GestureRecognizers>
                        <Label Text="{Binding SelectedMusic.Artist}" TextColor="Black" FontSize="17"></Label>
                    </StackLayout>
                    <Image Source="playBlack.png" WidthRequest="15" HeightRequest="15" HorizontalOptions="End" VerticalOptions="Center" Margin="0,0,5,0" />
                </Grid>
            </StackLayout>

Как реализовать нижнюю панель музыкального плеера

Ответы