Xamarin ProgressBar 绑定

Question

我有一个包含卡片视图的页面。

BadgeView.cs 的 C# 代码（BadgeView XAML 具有名为 card 的 stacklayout）：

 public BadgeView(BadgesGroup badgesGroup)
        {
            InitializeComponent();
            BadgeLogo.Source = badgesGroup.Logo;
            var cardsview = new CardsView
            {
                IsClippedToBounds = true,
                IsCyclical = true,
                MoveWidthPercentage = 0.3,
                WidthRequest = 250,
                HeightRequest=250,
                ItemsSource = badgesGroup.Badges,
                ItemTemplate = new DataTemplate(() => new BadgePopUp())
            };
            cardsview.Children.Add(new IndicatorsControl());
            cardsview.Children.Add(new RightArrowControl());
            cardsview.Children.Add(new LeftArrowControl());
            card.Children.Add(cardsview);
        }

卡片视图项目源设置为具有此模型的徽章对象列表：

public class badge {
string Name {get;set;}
string Description {get;set;}
int CurrentProgress {get;set;}
int GoalProgress {get;set;}
}

itemtemplate BadgePopUp 是：

<StackLayout 
    Orientation="Vertical"
    HorizontalOptions="Center"
    VerticalOptions="Start"
    Padding="5"
    BackgroundColor="Goldenrod">
    <StackLayout.Resources>
        <ResourceDictionary>
            <local:ProgressConverter x:Key="xprogress" xCurrentProgress="{Binding CurrentProgress}"
                                     xGoalProgress="{Binding  GoalProgress}"/>
        </ResourceDictionary>
    </StackLayout.Resources>
    <StackLayout Orientation="Vertical">
        <Label Text="{Binding Title}"></Label>
        <Label Text="{Binding Description}"></Label>
    </StackLayout>
    <StackLayout Orientation="Horizontal">
        <Label Text="{Binding Name}"></Label>
        <ProgressBar x:Name="Progressbar" ProgressColor="Purple" 
            Progress="{Binding Converter={StaticResource xprogress}}">
        </ProgressBar>
        <Label Text="{Binding Description}"></Label>
    </StackLayout>
</StackLayout>

在 cardview 里面有两个标签，分别绑定了 Name 和 description 。 还有一个progressBar。

我想要做的是把 currentProgress 除以 GoalProgress 并将结果设置为 progressbar.progress 。

我尝试使用转换器，但它对我不起作用。 这是转换器的代码

public class ProgressConverter : IValueConverter
    {
        public int xCurrentProgress { get; set; }
        public int xGoalProgress { get;set; }
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {

            return (float) xCurrentProgress / xGoalProgress;
        }

这对我有用：

 <local:ProgressConverter x:Key="xprogress" xCurrentProgress="2"
                                         xGoalProgress="3"/>

但是这行不通

 <local:ProgressConverter x:Key="xprogress" xCurrentProgress="{Binding CurrentProgress}"
                                         xGoalProgress="{Binding  GoalProgress}"/>

出现以下错误：

No property, bindable property, or event found for 'xCurrentProgress', or mismatching type between value and property.

有什么建议吗？

Answer 1

也许你误解了IValueConverter 和 ViewModel 的使用。如果要绑定数据，需要创建 ViewModel 进行绑定。而如果要转换值，首先需要绑定一个数据源，然后绑定一个值转换器来转换数据源的参数。看看这个Xamarin.Forms Binding Value Converters文档。

数据绑定通常将数据从源属性传输到目标属性，在某些情况下从目标属性传输到源属性。

从代码中您只需绑定一个 IValueConverter ，这将不起作用。

这是一个关于使用 ViewModel 的示例：

public class ProgresssModel : INotifyPropertyChanged
{
    private int currentprogressvalue;

    public int CurrentProgressValue
    {
        set
        {
            if (currentprogressvalue != value)
            {
                currentprogressvalue = value;
                OnPropertyChanged("ProgressValue");
                progressvalue = (double)currentprogressvalue / totalprogressvalue;
            }
        }
        get
        {
            return currentprogressvalue;
        }
    }

    private int totalprogressvalue;

    public int TotalProgressValue
    {
        set
        {
            if (totalprogressvalue != value)
            {
                totalprogressvalue = value;
                OnPropertyChanged("ProgressValue");
                progressvalue = (double)currentprogressvalue / totalprogressvalue;
            }
        }
        get
        {
            return totalprogressvalue;
        }
    }

    private double progressvalue;

    public double ProgressValue
    {
        set
        {
            if (progressvalue != value)
            {
                progressvalue = value;
                OnPropertyChanged("ProgressValue");
            }
        }
        get
        {
            return progressvalue;
        }
    }

    public ProgresssModel()
    {
        currentprogressvalue = 30;
        totalprogressvalue = 100;
        progressvalue = (double)currentprogressvalue / totalprogressvalue;
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

在 XAML 中，添加一个非自定义的ProgressBar，并添加Button 以显示更改的数据 例如运行时：

<StackLayout BackgroundColor="WhiteSmoke" Padding="20">
    <Label Text="Welcome to Xamarin.Forms!"
        VerticalOptions="CenterAndExpand" 
        HorizontalOptions="CenterAndExpand" />
    <ProgressBar x:Name="myprogress" Progress="{Binding ProgressValue}"/>
    <Button Text="change" Clicked="Button_Clicked"/>
</StackLayout>

现在可以将其绑定到 ContentPage 中的ProgressBar ：

public partial class SecondPage : ContentPage
{

    ProgresssModel progresssModel;
    public SecondPage()
    {
        InitializeComponent();

        progresssModel = new ProgresssModel();
        myprogress.BindingContext = progresssModel;
    }

    private void Button_Clicked(object sender, EventArgs e)
    {
        progresssModel.CurrentProgressValue = 40;
        progresssModel.TotalProgressValue = 100;
    }
}

效果：