XAML BackgroundColor property set from a file

RicardoSRicardoS ESMember ✭✭✭
edited November 2019 in Xamarin.Forms

I hope the title is clear enough, because this is a complicated topic for us to express...

Well, we found a way to set the BackgroundColor of different xaml components from an external file.
In that file we set the different shades of a certain color (e.g.: blues or reds or whatnot) and relate then like this:

<StackLayout x:Name="timebox" BackgroundColor="{x:Static local:Estilos.colorbright}">

where 'local' is defined at the start of the xaml file like this:
xmlns:local="clr-namespace:RegularesSedavi;assembly=RegularesSedavi" inside the ContentPage section (RegularesSedavi is the solution's and Forms project's name), below al the xmlns declarations;

and 'Estilos' is a cs file where colorbright (a string containing a HEX code for the color we need) is located.

This worked fine until we changed from .NetFramework to a new solution in .NetStandard (in order to instal a specific package, mind you), and now we get this error:

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

Since then we have searched for a solution, to no avail.

Thank you in advance and best of regards.

Manuel R.

Best Answers

  • JarvanJarvan Xamurai
    Accepted Answer

    BackgroundColor property set from a file

    You can set BackgroundColor via BindingContext.

    <ContentPage.BindingContext>
        <local:Estilos/>
    </ContentPage.BindingContext>
    
    ...
    <StackLayout x:Name="timebox" BackgroundColor="{Binding colorbright}">
        ...
    </StackLayout>
    

    Or add the colors into a ResourceDictionary.

    <ContentPage ...>
        <ContentPage.Resources>
            <ResourceDictionary Source="MyResourceDictionary.xaml" />
        </ContentPage.Resources>
        ...
    </ContentPage>
    
  • RicardoSRicardoS ES ✭✭✭
    Accepted Answer

    ...Aaand it suddenly works. I don't know how, since all we did was left it alone for the night and now it works.

    So, yeah. the first answer was right.

    Anyways, thank you for your patience, @Jarvan . And have a nice day

Answers

  • JarvanJarvan Member, Xamarin Team Xamurai
    Accepted Answer

    BackgroundColor property set from a file

    You can set BackgroundColor via BindingContext.

    <ContentPage.BindingContext>
        <local:Estilos/>
    </ContentPage.BindingContext>
    
    ...
    <StackLayout x:Name="timebox" BackgroundColor="{Binding colorbright}">
        ...
    </StackLayout>
    

    Or add the colors into a ResourceDictionary.

    <ContentPage ...>
        <ContentPage.Resources>
            <ResourceDictionary Source="MyResourceDictionary.xaml" />
        </ContentPage.Resources>
        ...
    </ContentPage>
    
  • RicardoSRicardoS ESMember ✭✭✭

    Thanks, @Jarvan !
    Trying the first one.

  • RicardoSRicardoS ESMember ✭✭✭

    Now I get this error:

    Error: XLS0507: Type 'Estilos' is not usable as an object element because it is not public or does not define a public parameterless constructor or a type converter.

    probably because Estilos is just like this:

    namespace RegularesSedavi {
        public static class Estilos {
            public static readonly string mappBtn = "b_map.png";
            public static readonly string timeBtn = "b_clock.png";
            public static readonly string listBtn = "b_clipboard.png";
            public static readonly string mailBtn = "b_list.png";
            public static readonly string acceBtn = "b_accessibility.png";
            public static readonly string lineBtn = "b_bus.png";
            public static readonly string starBtn = "b_star.png";
            public static readonly string estaBtn = "b_starem.png";
            public static readonly string access = "b_accessibility.png";
            public static readonly string colordarken = "#FFB445";
            public static readonly string colormedian = "#FFD28F";
            public static readonly string colorbright = "#FFE8C7";
        }
    }
    

    I need advice about how to proceed.

    Thanks

  • JarvanJarvan Member, Xamarin Team Xamurai
    edited November 2019

    Remove 'static'. And BackgroundColor is a Color type, convert the Hex code to Color. Try the code as below.

    public class Estilos
    {
        ...
        public Color colordarken { get; set; }
        public Color colormedian { get; set; }
        public Color colorbright { get; set; }
        public Estilos()
        {
            colordarken = Color.FromHex("#FFB445");
            colormedian = Color.FromHex("#FFD28F");
            colorbright = Color.FromHex("#FFE8C7");
        }
    }
    
  • RicardoSRicardoS ESMember ✭✭✭

    Thank you again, @Jarvan !

    I'll try this in a minute.

  • RicardoSRicardoS ESMember ✭✭✭

    Sorry, @Jarvan . It didn't work.

  • JarvanJarvan Member, Xamarin Team Xamurai

    @RicardoS said:
    Sorry, @Jarvan . It didn't work.

    I've tested the code and it works on my side. What's the problem? Any error occured?

  • RicardoSRicardoS ESMember ✭✭✭

    The same error as before:

    Error: XLS0507: Type 'Estilos' is not usable as an object element because it is not public or does not define a public parameterless constructor or a type converter.

  • JarvanJarvan Member, Xamarin Team Xamurai

    @RicardoS said:
    The same error as before:

    Error: XLS0507: Type 'Estilos' is not usable as an object element because it is not public or does not define a public parameterless constructor or a type converter.

    Here is the test demo file, you can check the code on your side.

  • RicardoSRicardoS ESMember ✭✭✭

    @Jarvan said:
    Here is the test demo file, you can check the code on your side.

    Your demo works just fine. It does not work on our project, though.

    Is there another alternative?

    Thanks again

  • JarvanJarvan Member, Xamarin Team Xamurai

    Please post the related code or share a basic demo to reproduce the issue to get a solution.

  • RicardoSRicardoS ESMember ✭✭✭
    <?xml version="1.0" encoding="utf-8"?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:d="http://xamarin.com/schemas/2014/forms/design"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 mc:Ignorable="d"
                 xmlns:local="clr-namespace:RegularesSedavi;assembly=RegularesSedavi"
                 x:Class="RegularesSedavi.MainPage" Title="Urbà de Sedaví" Icon="logo.png">
        <ContentPage.Content>
            <StackLayout BackgroundColor="White">
                <StackLayout x:Name="importantFeature" VerticalOptions="FillAndExpand" IsVisible="false">
                    <StackLayout HeightRequest="5"/>
                    <Image Source="titulo.png" VerticalOptions="Start" HeightRequest="50" BackgroundColor="White"/>
                    <StackLayout x:Name="importantMess" Padding="5"/>
                    <Button x:Name="btnInf" Text="Más info" TextColor="#0645AD" FontSize="15" Clicked="GoInfo"
                            BackgroundColor="Transparent" HorizontalOptions="End"/>
                    <StackLayout x:Name="timebox" BackgroundColor="{x:Static local:Estilos.colorbright}">
                        <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="5" Spacing="10">
                            <Label Text="Parada" FontSize="18" HorizontalOptions="Start" HorizontalTextAlignment="Center"
                                   VerticalTextAlignment="Center" Style="{x:StaticResource MediumLabelStyle}"/>
                            <Entry x:Name="numparada" Keyboard="Numeric" FontSize="18" Completed="ShowHora"
                                   Placeholder="Código" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand"/>
                            <Button Text="Horario" FontSize="18" Clicked="ShowHora" HorizontalOptions="End"
                                    TextColor="Black" BackgroundColor="{x:Static local:Estilos.colormedian}" WidthRequest="90"/>
                        </StackLayout>
                        <StackLayout x:Name="horariosBox" VerticalOptions="FillAndExpand" Padding="5" Spacing="10"
                                     IsVisible="false">
                            <ScrollView Orientation="Vertical" VerticalOptions="FillAndExpand" >
                                <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
                                    <Label x:Name="horarios" FontSize="18" Margin="10, 5, 10, 5" />
                                </StackLayout>
                            </ScrollView>
                            <Button FontSize="18" Text="Volver" HorizontalOptions="Center" Clicked="CloseThisUp"
                                    TextColor="Black" BackgroundColor="{x:Static local:Estilos.colormedian}" WidthRequest="90"/>
                        </StackLayout>
                    </StackLayout>
                    <ScrollView x:Name="scroll" Orientation="Vertical" VerticalOptions="FillAndExpand">
                        <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
                            <Grid RowSpacing="10" Padding="5">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Button Image="{x:Static local:Estilos.lineBtn}" Text="Líneas" FontSize="18" Clicked="GoRuta"
                                        HorizontalOptions="CenterAndExpand" TextColor="Black" ContentLayout="Top"
                                        Grid.Row="0" Grid.Column="0" BackgroundColor="{x:Static local:Estilos.colorbright}"
                                        HeightRequest="90" WidthRequest="{x:Static local:App.ScreenWidth}"/>
                                <Button Image="{x:Static local:Estilos.mappBtn}" Text="Cómo llegar" FontSize="18" Clicked="GoMap"
                                        HorizontalOptions="CenterAndExpand" TextColor="Black" ContentLayout="Top"
                                        Grid.Row="0" Grid.Column="1" BackgroundColor="{x:Static local:Estilos.colorbright}"
                                        HeightRequest="90" WidthRequest="{x:Static local:App.ScreenWidth}"/>
                                <Button Image="{x:Static local:Estilos.starBtn}" Text="Favoritos" FontSize="18" Clicked="GoFave"
                                        HorizontalOptions="CenterAndExpand" TextColor="Black" ContentLayout="Top"
                                        Grid.Row="1" Grid.Column="0" BackgroundColor="{x:Static local:Estilos.colorbright}"
                                        HeightRequest="90" WidthRequest="{x:Static local:App.ScreenWidth}"/>
                                <Button Image="{x:Static local:Estilos.timeBtn}" Text="Información" FontSize="18" Clicked="GoHora"
                                        HorizontalOptions="CenterAndExpand" TextColor="Black" ContentLayout="Top"
                                        Grid.Row="1" Grid.Column="1" BackgroundColor="{x:Static local:Estilos.colorbright}"
                                        HeightRequest="90" WidthRequest="{x:Static local:App.ScreenWidth}"/>
                                <Button Image="{x:Static local:Estilos.listBtn}" Text="Tarifas" FontSize="18" Clicked="GoTarifa"
                                        HorizontalOptions="CenterAndExpand" TextColor="Black" ContentLayout="Top"
                                        Grid.Row="2" Grid.Column="0" BackgroundColor="{x:Static local:Estilos.colorbright}"
                                        HeightRequest="90" WidthRequest="{x:Static local:App.ScreenWidth}"/>
                                <Button Image="{x:Static local:Estilos.mailBtn}" Text="Sugerencias" FontSize="18" Clicked="GoObsr"
                                        HorizontalOptions="CenterAndExpand" TextColor="Black" ContentLayout="Top"
                                        Grid.Row="2" Grid.Column="1" BackgroundColor="{x:Static local:Estilos.colorbright}"
                                        HeightRequest="90" WidthRequest="{x:Static local:App.ScreenWidth}"/>
                                <Image Source="bannOr.png" x:Name="bannClick" HorizontalOptions="CenterAndExpand"
                                       Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Aspect="AspectFit"
                                       WidthRequest="{x:Static local:App.ScreenWidth}" IsVisible="false"/>
                            </Grid>
                            <Button Image="{x:Static local:Estilos.acceBtn}" Text="Accesibilidad" FontSize="18" Clicked="GoAccess"
                                    HorizontalOptions="CenterAndExpand" TextColor="Black" ContentLayout="Top"
                                    BackgroundColor="{x:Static local:Estilos.colorbright}" IsVisible="false"
                                    HeightRequest="90" WidthRequest="{x:Static local:App.ScreenWidth}"/>
                            <Button Text="Aviso Legal" TextColor="#0645AD" FontSize="13" Clicked="GoPriv"
                                    BackgroundColor="Transparent" HorizontalOptions="Center"/>
                        </StackLayout>
                    </ScrollView>
                </StackLayout>
                <StackLayout x:Name="filterBanner" VerticalOptions="FillAndExpand">
                    <Image x:Name="banner" Source="logo.png"
                           HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
                    <StackLayout HeightRequest="60"/>
                    <Image x:Name="ayto" Source="titulo.png"
                           HorizontalOptions="CenterAndExpand" VerticalOptions="Center"/>
                    <StackLayout HeightRequest="30"/>
                    <ActivityIndicator IsRunning="True" IsVisible="true" Color="Black"
                                       HorizontalOptions="CenterAndExpand" VerticalOptions="Center"/>
                    <Label Text="Cargando . . ." FontSize="18" FontAttributes="Bold"
                           HorizontalOptions="CenterAndExpand" VerticalOptions="StartAndExpand">
                        <Label.FontFamily>
                            <OnPlatform x:TypeArguments="x:String">
                                <On Platform="iOS" Value="MarkerFelt-Thin"/>
                                <On Platform="Android" Value="Droid Sans Mono"/>
                            </OnPlatform>
                        </Label.FontFamily>
                    </Label>
                </StackLayout>
                <Image Source="logost.png" VerticalOptions="End" WidthRequest="80" BackgroundColor="White"/>
            </StackLayout>
        </ContentPage.Content>
    </ContentPage>
    
    using Xamarin.Forms;
    
    namespace RegularesSedavi {
        public class Estilos {
            public static readonly string mappBtn = "b_map.png";
            public static readonly string timeBtn = "b_clock.png";
            public static readonly string listBtn = "b_clipboard.png";
            public static readonly string mailBtn = "b_list.png";
            public static readonly string acceBtn = "b_accessibility.png";
            public static readonly string lineBtn = "b_bus.png";
            public static readonly string starBtn = "b_star.png";
            public static readonly string estaBtn = "b_starem.png";
            public static readonly string access = "b_accessibility.png";
            public static readonly string colordarken = "#FFB445";
            public static readonly string colormedian = "#FFD28F";
            public static readonly string colorbright = "#FFE8C7";
            /*public Color colordarken { get; set; }
            public Color colormedian { get; set; }
            public Color colorbright { get; set; }
            public Estilos() {
                colordarken = Color.FromHex("#FFB445");
                colormedian = Color.FromHex("#FFD28F");
                colorbright = Color.FromHex("#FFE8C7");
            }*/
        }
    }
    

    This is all I can post.

  • JarvanJarvan Member, Xamarin Team Xamurai
    edited November 2019

    Have you tried the code like below? Error still occured?

    page.xaml

    <?xml version="1.0" encoding="utf-8"?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:d="http://xamarin.com/schemas/2014/forms/design"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 mc:Ignorable="d"
                 xmlns:local="clr-namespace:RegularesSedavi;assembly=RegularesSedavi"
                 x:Class="RegularesSedavi.MainPage" Title="Urbà de Sedaví" Icon="logo.png">
        <ContentPage.BindingContext>
            <local:Estilos/>
        </ContentPage.BindingContext>
    
        <ContentPage.Content>
            <StackLayout BackgroundColor="{Binding colorbright}">
                ...
            </StackLayout>
        </ContentPage.Content>
    </ContentPage>
    

    Estilos.cs

    public class Estilos
    {
        ...
        public Color colordarken { get; set; }
        public Color colormedian { get; set; }
        public Color colorbright { get; set; }
        public Estilos()
        {
            colordarken = Color.FromHex("#FFB445");
            colormedian = Color.FromHex("#FFD28F");
            colorbright = Color.FromHex("#FFE8C7");
        }
    }
    
  • RicardoSRicardoS ESMember ✭✭✭

    Yes, @Jarvan , the error is still there.

    And, even if we manage to solve it, the colors are use in other .cs files like this:

            `menuAux.BackgroundColor = Color.FromHex(Estilos.colorbright);`
    

    So, in a sense we need an intermediate solution between

        `public static readonly string colorbright = "#FFE8C7";`
    

    and:

        public Color colorbright { get; set; }
        public Estilos()
        {
            colorbright = Color.FromHex("#FFE8C7");
        }
    

    Thank you

  • RicardoSRicardoS ESMember ✭✭✭
    Accepted Answer

    ...Aaand it suddenly works. I don't know how, since all we did was left it alone for the night and now it works.

    So, yeah. the first answer was right.

    Anyways, thank you for your patience, @Jarvan . And have a nice day

Sign In or Register to comment.