MediaElement -Have a new feature similar implementation to that of <ContentPage.ToolbarItems>

[Riffy135]

Hi

I would like to use MediaElement, but would like to be able to display it on ContentPage above my CollectionView which contains DataTemplate in a similar way to how I am using <ContentPage.ToolbarItems>.

So the MediaElement only appears once on a Page and is only displayed if Audio is available for the content on the Page. Currently I have:

`<ContentPage.BindingContext>
local:Level3ViewModel/

</ContentPage.BindingContext>
 <Shell.TitleView>
    <StackLayout>
        <Label Text="{Binding SubTitle}" FontSize="15" VerticalTextAlignment="Center" TextColor="White" FontAttributes="Bold"/>
    </StackLayout>
</Shell.TitleView>
**<ContentPage.ToolbarItems>
    <ToolbarItem Text="Play"  IconImageSource="audioplay.png" Clicked="ToolbarItem_Clicked" />
    <ToolbarItem Text="Pause"  IconImageSource="audiopause.png" Clicked="ToolbarItem_Clicked" />
    <ToolbarItem Text="Stop"  IconImageSource="audiostop.png"  Clicked="ToolbarItem_Clicked"/>
</ContentPage.ToolbarItems>**
<ContentPage.Content>
    <tkit:MediaElement x:Name="mediaElement" ShouldShowPlaybackControls="True"  ></tkit:MediaElement>
</ContentPage.Content>
<RefreshView x:DataType="local:Level3ViewModel" Command="{Binding LoadItemDetailsCommand}" IsRefreshing="{Binding IsBusy}">
    <ScrollView>
        <CollectionView x:Name="ItemsDetailListViewA" BackgroundColor="{StaticResource PageBckColour}"  
                    ItemsSource="{Binding ItemDetsA}"  
                    SelectionMode="Single" VerticalScrollBarVisibility="Always">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout Padding="1" x:DataType="model:ItemDetsA">
                        <Label Text="{Binding DetTextA}"  TextTransform="Uppercase"
                        LineBreakMode="WordWrap"    
                        Style="{DynamicResource ListItemTextStyle}" 
                        TextColor="{StaticResource TitleColour}" FontFamily="OpenSansRegular" BackgroundColor="LightGray"
                        FontAttributes="Bold"
                        FontSize="{x:OnPlatform Android=12, WinUI=14, iOS=13}" ></Label>
                        <Label Text="{Binding DetDescA}"  CharacterSpacing="0"
                        LineBreakMode="WordWrap"    
                        Style="{DynamicResource ListItemDetailTextStyle}" 
                        TextColor="{StaticResource DescTxtColour}" 
                        FontSize="{x:OnPlatform Android=12, WinUI=12, iOS=13}"                            
                       FontAttributes="Bold" />
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </ScrollView>
</RefreshView>

`

A new MediaElement feature I would like is similar to the ToolbarItems, which I use for my audio. the XAML would be something similar to:
<ContentPage.MediaElement > <toolkit:MediaElement x:Name="mediaElement" MinimumHeightRequest="200" MinimumWidthRequest="350" IsVisible="{Binding MediaElementVisible}"></toolkit:MediaElement> </ContentPage.MediaElement >

Wonder how difficult it is to implement this?

Thanks

[bijington]

Why can't you just use a Grid and stick the MediaElement in the top row?

[Riffy135]

I have tried placing the Grid in many places, but keep getting error : The property 'Content'/DataTemplate/ItemTemplate is set more than once.

Any suggestions as where exactly to put it, without affecting the display of items, would be appreciated

[bijington]

Your issue is that you are actually setting the Content property of ContentPage twice.

First with

<ContentPage.Content>
    <tkit:MediaElement x:Name="mediaElement" ShouldShowPlaybackControls="True"  ></tkit:MediaElement>
</ContentPage.Content>

and second with

<RefreshView x:DataType="local:Level3ViewModel" Command="{Binding LoadItemDetailsCommand}" IsRefreshing="{Binding IsBusy}">
...
</RefreshView>

To fix this you can change it to something like:

<Grid RowDefinitions="*,*">
    <tkit:MediaElement x:Name="mediaElement" ShouldShowPlaybackControls="True"  Grid.Row="0" />

    <RefreshView x:DataType="local:Level3ViewModel" Command="{Binding LoadItemDetailsCommand}" IsRefreshing="{Binding IsBusy}" Grid.Row="1">
...
    </RefreshView>
</Grid>

For more info on the content of a page check out the Microsoft Docs at: https://learn.microsoft.com/dotnet/maui/xaml/fundamentals/get-started?view=net-maui-7.0#set-page-content

[Riffy135]

Thanks, that worked.

[CliffAgius]

Closed and answered