![](/img/trans.png)
[英]How can I include my custom user control with its custom view model into my xaml view?
[英]Include Dynamic Custom Xamarin Xaml View Control
您好,我為每個要合並的部門復制了一個重復的輪播,並制作成自定義的 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, 0, 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;}
由於您使用了 Custom ContentView ,您需要使用bindable 屬性來綁定ContentView和父 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>
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
}
<control:CarouselControl Department="Human Resources" Collection="{Binding HumanResourcesCollection}"></control:CarouselControl>
你只需要綁定Collection的源,屬性Title在你初始化HumanResourcesCollection的時候就已經設置好了,不需要再次綁定。
這是一些類似的案例,您可以參考
如何將 ContentView 中的 CommandParameter 綁定到 Xamarin Forms 中父 ContentPage 中的元素
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.