如果Url是影像并且視頻加載視頻控制元件，則Xamarin如何加載影像控制

我正在開發類似 Facebook 的提要頁面，其中有一個 URL 串列（視頻和影像）。如何在 xaml 中加載特定于 Url 型別（影像或視頻）的 Ui 控制元件。

例子 ：

   ```<CollectionView ItemsSource="{Binding UrlList}">
            <Grid>
                If ( url is image)


                <Image Source="{Binding Url}"/>

                If ( url is video )

                <MediaElement Source="{Binding Url}" />
            </Grid>
     </CollectionView>```

uj5u.com熱心網友回復：

是的，您可以使用DataTemplateSelector來實作這一點。

ADataTemplateSelector可用于DataTemplate在運行時根據資料系結屬性的值選擇 a 。這使得多個 DataTemplate 可以應用于同一型別的物件，以自定義特定物件的外觀。

1.創建一個DataTemplateSelector

資料模板選擇器是通過創建一個繼承自 的類來實作的DataTemplateSelector。OnSelectTemplate然后重寫該方法以回傳特定的 DataTemplate。

您可以參考以下代碼：

public class UrlTemplateSelector : DataTemplateSelector
{
    public DataTemplate ImageTemplate { get; set; }

    public DataTemplate VideoTemplate { get; set; }

    public DataTemplate OtherTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        ItemModel model = (ItemModel)item;

        if (model.Url.EndsWith(".mp4")|| model.Url.EndsWith(".avi")|| model.Url.EndsWith(".rmvb")) // you can add multiple video file suffixes
        {
            return VideoTemplate;

        }
        else if (model.Url.EndsWith(".png")|| model.Url.EndsWith(".bmp") || model.Url.EndsWith(".jpg"))//you can add multiple image file suffixes
        {
            return ImageTemplate;
        }
        else {
            return OtherTemplate;
        }
    }
}

假設ItemModel 是系結項。

public class ItemModel
{
    public string Name { get; set; }
    public string Url { get; set; }
}

2. 用法（假設頁面是TestPage）

測驗頁面.xaml

<ContentPage.Resources>
    <ResourceDictionary>
        <DataTemplate x:Key="imageTemplate">
            <ViewCell>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.4*" />
                        <ColumnDefinition Width="0.6*" />
                    </Grid.ColumnDefinitions>
                    <Label Text="{Binding Name}" TextColor="Green" FontAttributes="Bold" />
                    <Image Grid.Column="1" Source="{Binding Url}"  />
                </Grid>
            </ViewCell>
        </DataTemplate>
        <DataTemplate x:Key="videoTemplate">
            <ViewCell>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.4*" />
                        <ColumnDefinition Width="0.6*" />
                    </Grid.ColumnDefinitions>
                    <Label Text="{Binding Name}" TextColor="Red" FontAttributes="Bold" />
                <behaviors:MediaElement  Grid.Column="1" Source="{Binding Url}"  />
                </Grid>
            </ViewCell>
        </DataTemplate>
    <local:UrlTemplateSelector x:Key="mediaUrlTemplateSelector" ImageTemplate="{StaticResource imageTemplate}" VideoTemplate="{StaticResource videoTemplate}" />
    </ResourceDictionary>
</ContentPage.Resources>
<StackLayout Margin="20">
    <Label Text="ListView with a DataTemplateSelector" FontAttributes="Bold" HorizontalOptions="Center" />
<ListView x:Name="listView" Margin="0,20,0,0" ItemTemplate="{StaticResource mediaUrlTemplateSelector}" />
</StackLayout>

有關更多詳細資訊，您可以查看：https : //docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/selector。

并且上面的檔案中包含一個示例，您可以嘗試一下。

標籤：形式 xaml 沙马林 xamarin.forms 控制

上一篇：GetTemplateChild/TemplatePart在Avalonia嗎？

下一篇：如何在通用Windows平臺中連接ComboBox和影像？