How to only show MediaElement while it has something in it?

Question

I have a Message Board ListView which 3 types of messages can be posted to it - Text, Photo and Video.

Whenever a message is submitted, a MessageModel is created depending on the type. All type will have Sender and Message Text, photo will have PhotoPath and video will have VideoPath.

public string Sender { get; set; }
public string MessageText { get; set; }
public string ImagePath { get; set; }
public string VideoPath { get; set; } 

Here is my XAML for the message board -

<ContentPage.Content>
        <StackLayout BackgroundColor="{StaticResource AppBackgroundColor}">
            <ListView x:Name="MessageFeed" SelectionMode="None" SeparatorVisibility="Default" SeparatorColor="{StaticResource AppBackgroundColor}" HasUnevenRows="True" VerticalOptions="FillAndExpand" Margin="10">
                <ListView.Header>
                    <Label Text="Message Board" TextColor="{StaticResource AppTextColor}" FontAttributes="Bold" FontSize="24" Padding="0,25" HorizontalOptions="Center" HorizontalTextAlignment="Center"/>
                </ListView.Header>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid BackgroundColor="{StaticResource MessageBackgroundColor}"  Margin="0,0,0,10">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <StackLayout BackgroundColor="{StaticResource MessageBackgroundColor}" Margin="10,5,0,10">
                                    <Label Text="{Binding Sender, StringFormat='{}Posted by {0}'}" TextColor="{StaticResource AppTextColor}" FontSize="16" FontAttributes="Bold" Padding="25,0" />
                                    <Image Source="{Binding ImagePath}" HorizontalOptions="Center"/>
                                    <xct:MediaElement Source="{Binding VideoPath}" AutoPlay="False" ShowsPlaybackControls="True" HeightRequest="100" />
                                    <Label Text="{Binding MessageText}" TextColor="{StaticResource AppTextColor}" FontSize="14"/>
                                </StackLayout>
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>

My issue is with the MediaElement through Xamarin.CommunityToolkit (2.0.5). The element needs to have a height value set otherwise it will never show - even if there is a video. However if I set a height value, this then shows on every list view item as a big black box where there is no video.

Does anybody know how to only show the MediaElement HeightRequest while VideoPath contains a value? I can't use x:Name to target it because it's inside a ListView and I'm totally stumped for how to proceed.

I'm also open to any alternative way to show a video in Xamarin.

Appreciate any help

Answer 1

As Jason has pointed it out, you can bind IsVisible to the VideoPath which means that if you don't assign the video path to the MediaElement, the MediaElement would be invisible(no big black box).

<ContentPage.Resources> 
    <ResourceDictionary>
       <xct:IsNotNullOrEmptyConverter x:Key="IsNotNullOrEmptyConverter"/>
    </ResourceDictionary>
</ContentPage.Resources>

<xct:MediaElement 
Source="{Binding VideoPath}" 
AutoPlay="False" 
ShowsPlaybackControls="True" 
HeightRequest="100" 
IsVisible = "{Binding VideoPath,Converter= {StaticResource IsNotNullOrEmptyConverter}}"/>