包括动态自定义 Xamarin Xaml 视图控件 [英] Include Dynamic Custom Xamarin Xaml View Control
问题描述
您好，我为每个要合并的部门复制了一个重复的轮播，并将其制作成自定义的 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 属性，用于在 ContentView 和 Parent 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 Title had 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 视图控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
