Xamarin Url bir görüntü ise ve video yük video denetimi ise görüntü contorol nasıl yüklenir

0

Soru

Url'lerin ( videolar ve resimler) bir listesine sahip olduğum Facebook like feeds sayfasını geliştiriyorum. Url türüne ( resim veya video) özgü Uı denetimini xaml'ye nasıl yükleyebilirim.

Örnek :

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


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

                If ( url is video )

                <MediaElement Source="{Binding Url}" />
            </Grid>
     </CollectionView>```
controls forms xamarin xamarin.forms
2021-11-12 17:41:00
1

En iyi cevabı

0

Evet, bunu başarmak için DataTemplateSelector kullanabilirsiniz.

A DataTemplateSelector seçmek için kullanılabilir DataTemplate veriye bağlı bir özelliğin değerine bağlı olarak çalışma zamanında. Bu, belirli nesnelerin görünümünü özelleştirmek için aynı nesne türüne birden çok Datatemplate'in uygulanmasını sağlar.

1.DataTemplateSelector oluşturma

Veri şablonu seçicisi, aşağıdakilerden devralan bir sınıf oluşturularak uygulanır DataTemplateSelector. Bu OnSelectTemplate yöntem daha sonra belirli bir DataTemplate döndürmek için geçersiz kılınır.

Aşağıdaki koda başvurabilirsiniz:

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;
        }
    }
}

Varsaymak ItemModel bağlı öğedir.

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

2. Kullanım (sayfanın TestPage)

TestPage.xamlname

<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>

Daha fazla ayrıntı için şunları yapabilirsiniz check:https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/selector.

Ve yukarıdaki belgede yer alan bir örnek var, deneyebilirsiniz.

2021-11-15 02:42:45

Diğer dillerde

Bu sayfa diğer dillerde

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................