XAML ListView内GradientStop上的MAUI绑定颜色

我有一个框架的列表视图，我想为每个框架设置一个不同的GrandientStop。我做了一点研究，我发现<GradientStop Color>不是一个可绑定的属性，最好在后面的代码中设置颜色。
我确实发现有人说要创建一个附加属性来绑定“颜色”。我该怎么做呢？
下面是我的代码：

<ListView x:Name="addictionsListView" ItemsSource="{Binding Achievements}" HasUnevenRows="True" SeparatorVisibility="None">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid  Margin="10,10,10,0">
                        <Frame CornerRadius="10" Margin="10">
                            <Frame.Background>
                                <LinearGradientBrush EndPoint="0,0.7">
                                    <GradientStop Color="{Binding GradientStart}" Offset="0.0">
                                    </GradientStop>
                                    <GradientStop Color="{Binding GradientEnd}" Offset="1.0"></GradientStop>
                                </LinearGradientBrush>
                            </Frame.Background>
                            <FlexLayout JustifyContent="Start" AlignContent="Center">
                                <Image Source="{Binding Image}" HorizontalOptions="Start" HeightRequest="50"></Image>
                                <Label Text="{Binding Text}" VerticalOptions="Center" Margin="10,0,0,0" FontSize="20" TextColor="White" FontAttributes="Bold"
                                   WidthRequest="100"></Label>

                                <Label Text="{Binding Percent}" VerticalOptions="Center" HorizontalOptions="End" Margin="60,0,0,0"
                               FontSize="20" TextColor="White" FontAttributes="Bold" ></Label>
                            </FlexLayout>
                        </Frame>

                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

实体：

public class Achievement
{
    [PrimaryKey, AutoIncrement]
    public int Id { get; set; }

    public int AddictionId { get; set; }

    public string BackgroundColor { get; set; }

    public string GradientStart { get; set; }

    public string GradientEnd { get; set; }

    public string Text { get; set; }

    public string Percent { get; set; }

    public string Image { get; set; }

    public bool IsCompleted { get; set; }

    public TimeSpan Duration { get; set; }
}

创建可绑定属性;

public static readonly BindableProperty TitleProperty =
BindableProperty.Create(nameof(Title), typeof(string), typeof(MyView), default(string));

创建getter和setter：

public string Title
{
  get => (string)GetValue(TitleProperty);
  set => SetValue(TitleProperty, value);
}

在你的控件类中声明一个新的控件时，也要确保你设置了绑定（这只是一个例子，如果你感到困惑的话，看看我下面为你创建的c#控件）：

var textLabel = new Label
    {
        VerticalOptions = LayoutOptions.Center,
        Margin = new Thickness(10, 0, 0, 0),
        FontSize = 20,
        TextColor = Color.White,
        FontAttributes = FontAttributes.Bold,
        WidthRequest = 100,
    };
    textLabel.SetBinding(Label.TextProperty, new Binding("Text"));

现在在XML中，你可以使用你的类bindable属性：

<Label Text="{Binding Title}" />

我冒昧地把你的XML转换成一个c#类，它创建了一个控件来保持你的XML更干净：

public class AchievementsListView : 
ListView
{
  public AchievementsListView()
    {
    HasUnevenRows = true;
    SeparatorVisibility = SeparatorVisibility.None;
    ItemTemplate = new DataTemplate(() =>
    {
        var grid = new Grid { Margin = new Thickness(10, 10, 10, 0) };

        var frame = new Frame { CornerRadius = 10, Margin = 10 };
        frame.SetBinding(BackgroundColorProperty, new Binding("GradientStart") { Source = BindingContext, Mode = BindingMode.OneWay });
        var gradientBrush = new LinearGradientBrush
        {
            EndPoint = new Point(0, 0.7),
            GradientStops = {
                new GradientStop { Color = Color.FromHex("#2980B9"), Offset = 0.0 },
                new GradientStop { Color = Color.FromHex("#6DD5FA"), Offset = 1.0 },
            },
        };
        frame.Background = gradientBrush;

        var flexLayout = new FlexLayout { JustifyContent = FlexJustify.Start, AlignContent = FlexAlign.Center };

        var image = new Image { HorizontalOptions = LayoutOptions.Start, HeightRequest = 50 };
        image.SetBinding(Image.SourceProperty, new Binding("Image"));

        var textLabel = new Label
        {
            VerticalOptions = LayoutOptions.Center,
            Margin = new Thickness(10, 0, 0, 0),
            FontSize = 20,
            TextColor = Color.White,
            FontAttributes = FontAttributes.Bold,
            WidthRequest = 100,
        };
        textLabel.SetBinding(Label.TextProperty, new Binding("Text"));

        var percentLabel = new Label
        {
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.End,
            Margin = new Thickness(60, 0, 0, 0),
            FontSize = 20,
            TextColor = Color.White,
            FontAttributes = FontAttributes.Bold,
        };
        percentLabel.SetBinding(Label.TextProperty, new Binding("Percent"));

        flexLayout.Children.Add(image);
        flexLayout.Children.Add(textLabel);
        flexLayout.Children.Add(percentLabel);

        frame.Content = flexLayout;

        grid.Children.Add(frame);

        return new ViewCell { View = grid };
    });
}

public static readonly BindableProperty AchievementsProperty =
    BindableProperty.Create(nameof(Achievements), typeof(IEnumerable<AchievementViewModel>), typeof(AchievementsListView), default(IEnumerable<AchievementViewModel>));

public IEnumerable<AchievementViewModel> Achievements
{
    get => (IEnumerable<AchievementViewModel>)GetValue(AchievementsProperty);
    set => SetValue(AchievementsProperty, value);
}
}

现在你可以在XML中这样使用它：

<local:AchievementsListView Achievements="{Binding Achievements}" />

上面的类没有添加可绑定的属性，我想我会让你自己来处理：）

XAML ListView内GradientStop上的MAUI绑定颜色

1条答案

相关问题

热门标签

最新问答