本文介绍了包括动态自定义 Xamarin Xaml 视图控件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

您好,我为每个要合并的部门复制了一个重复的轮播,并将其制作成自定义的 xaml 视图控件.这是我在页面中多次复制的原始轮播视图.我想弄清楚如何用页面外部的东西来清理它.

Hello I have a repeating carousel I've copied for each deparment that I want to consolidate and make into a custom xaml view control. Here is the original carousel view I have copied several times in my page. I want to figure out how to clean this up with something externally from the page.

<StackLayout Padding="10">

<Label Text="Human Resources" FontSize="Large"
        TextColor="#000000"></Label>

<CarouselView ItemsSource="{Binding HumanResourcesCollection}"
                PeekAreaInsets="75"
                IndicatorView="Indicator"
                HeightRequest="275">

    <CarouselView.ItemsLayout>

        <LinearItemsLayout Orientation="Horizontal" ItemSpacing="10"></LinearItemsLayout>

    </CarouselView.ItemsLayout>

    <CarouselView.EmptyView>

        <StackLayout>

            <Label Text="No results for this department"
                    FontSize="Large"
                    HorizontalOptions="Fill"
                    HorizontalTextAlignment="Center"></Label>

            <Label Text="Contact your manager for more information"
                    FontSize="Medium"
                    HorizontalOptions="Fill"
                    HorizontalTextAlignment="Center"></Label>

        </StackLayout>

    </CarouselView.EmptyView>

    <CarouselView.ItemTemplate>

        <DataTemplate>

            <StackLayout Padding="10">

                <helper:LayoutGradient StartColor="{StaticResource Secondary}"
                                        EndColor="{StaticResource Secondary}"
                                        OptionCorner="True"
                                        RadiusCorner="25"
                                        DirectionColor="False">

                    <Frame.GestureRecognizers>

                        <TapGestureRecognizer Tapped="OnDepartmentSelected></TapGestureRecognizer>

                    </Frame.GestureRecognizers>

                    <Frame.Content>

                        <Grid RowSpacing="0" ColumnSpacing="0">

                            <Grid.RowDefinitions>

                                <RowDefinition Height="*"></RowDefinition>

                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions>

                                <ColumnDefinition Width="*"></ColumnDefinition>

                            </Grid.ColumnDefinitions>

                            <Image Grid.Column="0" Grid.Row="0" Aspect="AspectFit" Opacity=".35" VerticalOptions="End" HorizontalOptions="End">

                                <Image.Source>

                                    <FontImageSource Size="148" Glyph="{Binding Comments}"
                                                        FontFamily="{DynamicResource FontIcons}"
                                                        Color="Blue"></FontImageSource>
                                </Image.Source>

                            </Image>

                            <StackLayout
                                            Grid.Row="0" Grid.Column="0">

                                <Label Text="{Binding Title}" FontSize="Medium" FontAttributes="Bold"
                                        ></Label>

                                <Label Text="{Binding Version}" FontSize="Small"></Label>

                            </StackLayout>
                        </Grid>



                    </Frame.Content>

                </helper:LayoutGradient>

                <Label Padding="0, 10, 0, 10" Text="{Binding Description}"
                        TextColor="#808080"
                        FontSize="Medium"></Label>

            </StackLayout>

        </DataTemplate>

    </CarouselView.ItemTemplate>

</CarouselView>

<IndicatorView x:Name="Indicator" IndicatorColor="LightBlue"
                SelectedIndicatorColor="DarkGray"></IndicatorView>

如何动态添加标题和收藏?我已经显示了轮播视图,但在涉及数据和属性时无法显示.

How Can I dynamically add the title and collection? I've gotten the carousel view to show but cannot get it to show when involving data and properties.

xmlns:control="clr-namespace:Program.Controls"

<control:CarouselControl Department="Human Resources" Collection="{Binding HumanResourcesCollection}"></control:CarouselControl>

<control:CarouselControl Department="Administration" Collection="{Binding AdministrationCollection}"></control:CarouselControl>

<control:CarouselControl Department="Operations" Collection="{Binding OperationsCollection}"></control:CarouselControl>

我的想法是否正确或偏离了基地?一直在处理 ViewModel 中的属性,但不够了解使其正常工作.谢谢大家.

Am I in the right thinking or way off base? Been messing around with properties in a ViewModel but don't know enough to get it working. Thanks all.

public string Department {get; set;}

public ObservableCollectoin<DeparmentModel> Collection {get; set;}

推荐答案

由于您使用过 Custom ContentView ,您需要使用 bindable 属性,用于在 ContentViewParent ContentPage

Since you had used Custom ContentView , you need use bindable property to binding value between the elements in ContentView and Parent ContentPage

<?xml version="1.0" encoding="UTF-8" ?>
<ContentView
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
//...
x:Name="view" // set the name of CarouselControl
>
<StackLayout Padding="10">

<Label Text="Human Resources" FontSize="Large"
        TextColor="#000000"></Label>

<CarouselView ItemsSource="{Binding Source={x:Reference view}, Path=Collection}"
                PeekAreaInsets="75"
                IndicatorView="Indicator"
                HeightRequest="275">

    <CarouselView.ItemsLayout>

        <LinearItemsLayout Orientation="Horizontal" ItemSpacing="10"></LinearItemsLayout>

    </CarouselView.ItemsLayout>

    <CarouselView.EmptyView>

        <StackLayout>

            <Label Text="No results for this department"
                    FontSize="Large"
                    HorizontalOptions="Fill"
                    HorizontalTextAlignment="Center"></Label>

            <Label Text="Contact your manager for more information"
                    FontSize="Medium"
                    HorizontalOptions="Fill"
                    HorizontalTextAlignment="Center"></Label>

        </StackLayout>

    </CarouselView.EmptyView>

<CarouselView.ItemTemplate>

        <DataTemplate>

            <StackLayout Padding="10">

                <helper:LayoutGradient StartColor="{StaticResource Secondary}"
                                        EndColor="{StaticResource Secondary}"
                                        OptionCorner="True"
                                        RadiusCorner="25"
                                        DirectionColor="False">

                    <Frame.GestureRecognizers>

                        <TapGestureRecognizer Tapped="OnDepartmentSelected></TapGestureRecognizer>

                    </Frame.GestureRecognizers>

                    <Frame.Content>

                        <Grid RowSpacing="0" ColumnSpacing="0">

                            <Grid.RowDefinitions>

                                <RowDefinition Height="*"></RowDefinition>

                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions>

                                <ColumnDefinition Width="*"></ColumnDefinition>

                            </Grid.ColumnDefinitions>

                            <Image Grid.Column="0" Grid.Row="0" Aspect="AspectFit" Opacity=".35" VerticalOptions="End" HorizontalOptions="End">

                                <Image.Source>

                                    <FontImageSource Size="148" Glyph="{Binding Comments}"
                                                        FontFamily="{DynamicResource FontIcons}"
                                                        Color="Blue"></FontImageSource>
                                </Image.Source>

                            </Image>

                            <StackLayout
                                            Grid.Row="0" Grid.Column="0">

                                <Label Text="{Binding Title}" FontSize="Medium" FontAttributes="Bold"
                                        ></Label>

                                <Label Text="{Binding Version}" FontSize="Small"></Label>

                            </StackLayout>
                        </Grid>



                    </Frame.Content>

                </helper:LayoutGradient>

                <Label Padding="0, 10, 0, 10" Text="{Binding Source={x:Reference view}, Path=Description}"
                        TextColor="#808080"
                        FontSize="Medium"></Label>

            </StackLayout>

        </DataTemplate>

    </CarouselView.ItemTemplate>

</CarouselView>

<IndicatorView x:Name="Indicator" IndicatorColor="LightBlue"
                SelectedIndicatorColor="DarkGray"></IndicatorView>

在 CarouselControl.xaml.cs 中

public static readonly BindableProperty CollectionProperty =
              BindableProperty.Create(nameof(Collection), typeof(ObservableCollection<YourModel>), typeof(CarouselControl));

        public ObservableCollection<YourModel> Collection
        {
            get => (ObservableCollection<YourModel>)GetValue(CollectionProperty );
            set => SetValue(CollectionProperty , value);
        }

注意:这里的 YourModel 是包含 CarouselView 属性的 mdoel,如

Note : YourModel here is the mdoel that contains the properties of the CarouselView , like

public class YourModel
    {
        public string Title { get; set; }
        public string Version { get; set; }

        //...other proerty in CarouselView
    }

在内容页面

<control:CarouselControl Department="Human Resources" Collection="{Binding HumanResourcesCollection}"></control:CarouselControl>

你只需要绑定Collection的source,属性Title在您初始化 HumanResourcesCollection 时已设置,因此您不需要再次绑定它.

You just need to binding the source of Collection, the property Titlehad been set when you init the HumanResourcesCollection so you don't need to binding it again .

这里有一些类似的案例,你可以参考

Here is some similar case that you can have a refer

如何将 ContentView 中的 CommandParameter 绑定到 Xamarin Forms 中父 ContentPage 中的元素

何时使用 Xamarin 绑定而不是将对象传递给页面构造函数?

这篇关于包括动态自定义 Xamarin Xaml 视图控件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-15 04:49
查看更多