问题描述
您好,我为要合并的每个部件复制了一个重复的轮播,并制作为自定义xaml视图控件。这是我在页面中多次复制的原始轮播视图。我想弄清楚如何使用页面外部的内容进行清理。
<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,10" Text="{Binding Description}"
TextColor="#808080"
FontSize="Medium"></Label>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView x:Name="Indicator" IndicatorColor="LightBlue"
SelectedindicatorColor="DarkGray"></IndicatorView>
如何动态添加标题和收藏集?我已经显示了轮播视图,但是在涉及数据和属性时无法显示它。
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中的属性,但了解程度不足以使其正常工作。谢谢大家。
public string Department {get; set;}
public ObservableCollectoin<DeparmentModel> Collection {get; set;}
解决方法
由于使用了自定义ContentView,因此需要使用bindable property来绑定 ContentView 和 Parent ContentPage
中的元素之间的值在CarouselControl.xaml中
<?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,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,例如
public class YourModel
{
public string Title { get; set; }
public string Version { get; set; }
//...other proerty in CarouselView
}
在ContentPage
<control:CarouselControl Department="Human Resources" Collection="{Binding HumanResourcesCollection}"></control:CarouselControl>
您只需要绑定Collection的来源,属性 Title 是在您初始化 HumanResourcesCollection 时设置的,因此您无需再次绑定它。
这里有一些类似的情况,您可以参考
When to use Xamarin bindings as opposed to passing objects to page constructors?