2

Estoy tratando de crear una plantilla para usar múltiples veces en una vista, esta plantilla es:

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MYPROJECT.Resources.ViewElements.UserCard"
             x:Name="this">
    <Frame 
        BindingContext="{Binding Source={RelativeSource TemplatedParent}}"
        BackgroundColor="{Binding CardColor, FallbackValue='White'}"
        BorderColor="{Binding BorderColor, FallbackValue='White'}" >
        <Grid>
            <Frame BorderColor="{Binding BorderColorFrame, FallbackValue='White'}"
                   BackgroundColor="{Binding IconBackgroundColor , FallbackValue='White'}">
                <Image>
                    <Image.Source>
                        <FontImageSource FontFamily="FontSolid" Glyph="{Binding IconImageSource}" />
                    </Image.Source>
                </Image>
            </Frame>
            <Label Text="{Binding CardTitle, FallbackValue='Card Title'}"/>
            <BoxView BackgroundColor="{Binding BorderColorBox, FallbackValue='White'}"/>
            <Label Text="{Binding CardDescription, FallbackValue='Card description text.'}"/>
        </Grid>
    </Frame>
</ContentView>

Realizo un binding de la siguiente manera:

public partial class UserCard : ContentView
{
    public static readonly BindableProperty CardTitleProperty = BindableProperty.Create(nameof(CardTitle), typeof(string), typeof(UserCard), string.Empty);
    public static readonly BindableProperty CardColorProperty = BindableProperty.Create(nameof(CardColor), typeof(Brush), typeof(UserCard), Brush.Green);
    public static readonly BindableProperty BorderColorProperty = BindableProperty.Create(nameof(BorderColor), typeof(Brush), typeof(UserCard), Brush.Green);
    public static readonly BindableProperty IconBackgroundColorProperty = BindableProperty.Create(nameof(IconBackgroundColor), typeof(Brush), typeof(UserCard), Brush.Green);
    public static readonly BindableProperty BorderColorFrameProperty = BindableProperty.Create(nameof(BorderColorFrame), typeof(Brush), typeof(UserCard), Brush.Green);
    public static readonly BindableProperty BorderColorBoxProperty = BindableProperty.Create(nameof(BorderColorBox), typeof(Brush), typeof(UserCard), Brush.Green);
    public static readonly BindableProperty IconImageSourceProperty = BindableProperty.Create(nameof(IconImageSource), typeof(string), typeof(UserCard), string.Empty);
    public static readonly BindableProperty CardDescriptionProperty = BindableProperty.Create(nameof(CardDescription), typeof(string), typeof(UserCard), string.Empty);
    
    public string CardTitle {
        get => (string)GetValue(UserCard.CardTitleProperty);
        set => SetValue(UserCard.CardTitleProperty, value);
    }
    public Brush CardColor {
        get => (Brush)GetValue(UserCard.CardColorProperty);
        set => SetValue(UserCard.CardColorProperty, value);
    }
    public Brush BorderColor {
        get => (Brush)GetValue(UserCard.BorderColorProperty);
        set => SetValue(UserCard.BorderColorProperty, value);
    }
    public Brush BorderColorFrame
    {
        get => (Brush)GetValue(UserCard.BorderColorFrameProperty);
        set => SetValue(UserCard.BorderColorFrameProperty, value);
    }

    public Brush BorderColorBox
    {
        get => (Brush)GetValue(UserCard.BorderColorBoxProperty);
        set => SetValue(UserCard.BorderColorBoxProperty, value);
    }

    public Brush IconBackgroundColor {
        get => (Brush)GetValue(UserCard.IconBackgroundColorProperty);
        set => SetValue(UserCard.IconBackgroundColorProperty, value);
    }
    public string IconImageSource {
        get => (string)GetValue(UserCard.IconImageSourceProperty);
        set => SetValue(UserCard.IconImageSourceProperty, value);
    }
    public string CardDescription {
        get => (string)GetValue(UserCard.IconImageSourceProperty);
        set => SetValue(UserCard.IconImageSourceProperty, value);
    }
    public UserCard()
    {
        InitializeComponent();
    }
}

Y lo invoco en la vista principal a modo de prueba así:

UserCard userCard = new UserCard() {
            CardColor = Brush.Red,
            BorderColor = Brush.Yellow,
            IconBackgroundColor = Brush.Green,
            BorderColorFrame = Brush.Green,
            BorderColorBox = Brush.Green,
            IconImageSource = "&#xf533"
        };

container.Add(userCard);

El resultado que obtengo es un elemento de fondo negro, pero como se observa en el código yo jamás le pongo nada en negro, en la depuración accede a los setter con los valores que establezco en la vista principal, ¿Qué es lo que me sucede?

introducir la descripción de la imagen aquí


Edición: He descubierto que si quitamos el BoxView el negro desaparece y muestra todos los demás elementos, pero con los valores por defecto, es decir, no me recoge en mi declaración ninguna propiedad.

2
  • que es container ?? --> container.Add(userCard);
    – Yussef
    Commented el 28 mar. 2023 a las 6:04
  • container es el nombre del FlexLayout Commented el 28 mar. 2023 a las 6:27

1 respuesta 1

2

El fondo negro es el valor default del frame, lo coloca porque te faltan elementos para que funcione el binding

1.- Lo más importante es que te falta el BindingContext correcto.

Tú tienes esto:

<Frame 
        BindingContext="{Binding Source={RelativeSource TemplatedParent}}"

Esto hace referencia a un template que no tienes. Se usa para cuando cuando está dentro de un ControlTemplate, generalmente cuando quieres pisar el template original.

Lo que deberías poner es:

<Frame 
       BindingContext="{x:Reference this}"

A tu ContentView le agregaste el name x:Name="this", entonces lo más fácil es referenciar el BindingContext por aquel nombre

2.- Colores

Creo que el tema de los colores tampoco debería funcionar, me parece que debes usar la clase Color, ejemplo:

public static readonly BindableProperty CardColorProperty = BindableProperty.Create(nameof(CardColor), typeof(Color), typeof(UserCard), Colors.Green);

public Color CardColor
{
    get => (Color)GetValue(UserCard.CardColorProperty);
    set => SetValue(UserCard.CardColorProperty, value);
}
UserCard userCard = new UserCard()
{
   CardColor = Colors.Red,
   //etc
};

Nota personal: Microsoft que manera de complicar los binding!!, además pasamos de Inotifypropertychanged a BindableProperty en vez de haberlo hecho de forma automática como se hace en Blazor

1
  • Respuesta a la nota: No veas que mareos genera Commented el 28 mar. 2023 a las 10:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.