如何将 Stacklayout 与 MVVM 绑定 [英] How to bind Stacklayout with MVVM
问题描述
我想使用 Viewmodel 绑定我的 Stacklayout 项目我已经声明了所有变量和属性以及所有在我的视图模型中，所以我在这里提到我的代码，请告诉我将如何做到这一点.
I want to bind my Stacklayout's items using Viewmodel i have already declared all the variables and properties and all within my view model so i am mentioning here my code please tell how i'll do this.
这是我的 XAML 代码:
This is my XAML Code:
<controls:OffersListView ImageGIF="outlet" BImage="{Binding BannerUri}"/>
这是我的 OffersListView.xaml 代码
And this is my OffersListView.xaml code
<ffimageloading:SvgCachedImage x:Name="imageFront"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Aspect="AspectFill"
Margin="0"
IsVisible="True"
Source="{Binding ImageGIF}"
LoadingPlaceholder="imageBehind"
Finish="ImageFront_Finish"
DownloadStarted="ImageFront_DownloadStarted"/>
<ffimageloading:SvgCachedImage x:Name="imageBehind"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Aspect="AspectFill"
HeightRequest="205"
WidthRequest="350"
IsVisible="False"
Margin="0"
Source="{Binding BImage}"/>
我的 ViewModel 代码是:
My ViewModel Code is:
public int BannerId
{
get
{
return HomeItems.BannerId;
}
set
{
HomeItems.BannerId = value;
OnPropertyChanged();
}
}
这里我在我的 Home.xamal.cs 页面中绑定了值.Scrollview 包含我尝试使用 MVVM 绑定的所有项目
And here i am binding value in my Home.xamal.cs page. Scrollview contains all items which i am trying to bind using MVVM
private void SetItemSource()
{
m_homeViewModel = new ObservableCollection<HomeViewModel>();
scrollview.BindingContext = m_homeViewModel;
}
现在，当我 BImage="{Binding BannerUri}" 使用 Viewmodel 绑定 BannerUri 时，它会抛出异常，异常是:
Now when i am BImage="{Binding BannerUri}" going to bind BannerUri using Viewmodel then it is throwing an exception the exception is:
No property, bindable property, or event found for 'BImage', or mismatching type between value and property.
这是我的 Offerlistview xaml 代码:
This is my Offerlistview xaml code:
====================================================================================
================================================================================
<ffimageloading:SvgCachedImage x:Name="imageFront"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Aspect="AspectFill"
Margin="0"
IsVisible="True"
Source="{Binding ImageGIF}"
LoadingPlaceholder="imageBehind"
Finish="ImageFront_Finish"
DownloadStarted="ImageFront_DownloadStarted"/>
<ffimageloading:SvgCachedImage x:Name="imageBehind"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Aspect="AspectFill"
HeightRequest="205"
WidthRequest="350"
IsVisible="False"
Margin="0"
Source="{Binding BImage}"/>
==================================================================================
===============================================================================
这是我的 Offerlistview.xaml.cs
This is my Offerlistview.xaml.cs
====================================================================================
================================================================================
public ImageSource ImageGIF
{
get { return imageFront.Source; }
set { imageFront.Source = value; }
}
public ImageSource BImage
{
get { return imageBehind.Source; }
set { imageBehind.Source = value; }
}
==================================================================================
===============================================================================
我想没有人知道答案
推荐答案
您需要在自定义控件代码隐藏中创建可绑定属性并将它们绑定到您的内部视图.
You need to create bindable properties in your custom control code-behind and bind them to your inner views.
OffersListview 后面的代码:
public partial class OffersListview
{
public static readonly BindableProperty ImageGifSourceProperty = BindableProperty.Create(
nameof(ImageGifSource),
typeof(string),
typeof(OffersListview));
public static readonly BindableProperty BannerSourceProperty = BindableProperty.Create(
nameof(BannerSource),
typeof(string),
typeof(OffersListview));
public string ImageGifSource
{
get => (string)GetValue(ImageGifSourceProperty);
set => SetValue(ImageGifSourceProperty, value);
}
public string BannerSource
{
get => (string)GetValue(BannerSourceProperty);
set => SetValue(BannerSourceProperty, value);
}
}
OffersListView xaml:
<controls:BaseClass x:Class="XXX.XXX.OffersListview"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:controls:="clr-namespace:XXX.XXX"
x:Name="RootLayout">
...
<ffimageloading:SvgCachedImage HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Aspect="AspectFill"
Margin="0"
IsVisible="True"
LoadingPlaceholder="imageBehind"
Finish="ImageFront_Finish"
DownloadStarted="ImageFront_DownloadStarted"
Source="{Binding Source={x:Reference RootLayout}, Path=ImageGifSource}" />
<ffimageloading:SvgCachedImage HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Aspect="AspectFill"
HeightRequest="205"
WidthRequest="350"
IsVisible="False"
Margin="0"
Source="{Binding Source={x:Reference RootLayout}, Path=BannerSource}" />
...
这篇关于如何将 Stacklayout 与 MVVM 绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
