I got this error in break mode in visual studio 2015 when I was learning to make a Xamarin.Forms page.
Unhandled Exception:
Xamarin.Forms.Xaml.XamlParseException: Position 12:10. Property Resources is null or is not IEnumerable
My App.xaml code is below
<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Bisells.App">
<Application.Resources>
<!-- Application resource dictionary -->
<!-- colors -->
<!--<Color x:Key="HeaderTextColor">#585858</Color>
<Color x:Key="BodyTextColor">#C3C3C3</Color>-->
<Color x:Key="TimelineColor">#E4B6C3</Color>
<Color x:Key="HeaderTextColor">#3C3C3C</Color>
<Color x:Key="BodyTextColor">#869EAC</Color>
<Color x:Key="TimeColor">#A64C79</Color>
<!-- font families -->
<OnPlatform
x:Key="RegularFontFamily"
x:TypeArguments="x:String"
Android="sans-serif"
iOS="HelveticaNeue" />
<OnPlatform
x:Key="LightFontFamily"
x:TypeArguments="x:String"
Android="sans-serif-light"
iOS="HelveticaNeue-Light" />
<OnPlatform
x:Key="MediumFontFamily"
x:TypeArguments="x:String"
Android="sans-serif-medium"
iOS="HelveticaNeue-Medium" />
<!-- fonts -->
<Font
x:Key="HeaderFont"
FontFamily="{StaticResource MediumFontFamily}"
FontSize="30" />
<Font
x:Key="SubHeaderFont"
FontFamily="{StaticResource MediumFontFamily}"
FontSize="18" />
<Font
x:Key="TitleFont"
FontFamily="{StaticResource MediumFontFamily}"
FontSize="20" />
<Font
x:Key="BodyFont"
FontFamily="{StaticResource RegularFontFamily}"
FontSize="18" />
<!-- styles -->
<Style x:Key="PageHeaderLabel" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource HeaderTextColor}" />
<Setter Property="Font" Value="{StaticResource HeaderFont}" />
</Style>
<Style x:Key="SubHeaderLabel" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource BodyTextColor}" />
<Setter Property="Font" Value="{StaticResource SubHeaderFont}" />
</Style>
<Style x:Key="ClassTimeLabel" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource TimeColor}" />
<Setter Property="Font" Value="{StaticResource TitleFont}" />
</Style>
<Style x:Key="ClassNameLabel" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource HeaderTextColor}" />
<Setter Property="Font" Value="{StaticResource TitleFont}" />
</Style>
<Style x:Key="ClassInstructorLabel" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource BodyTextColor}" />
<Setter Property="Font" Value="{StaticResource BodyFont}" />
</Style>
</Application.Resources>
</Application>
Also xamarin not showing where exactly the exception occuring
You forgot the ResourceDictionary tag:
<Application.Resources>
<ResourceDictionary>
<!-- Application resource dictionary -->
<!-- colors -->
<!--<Color x:Key="HeaderTextColor">#585858</Color>
<Color x:Key="BodyTextColor">#C3C3C3</Color>-->
<Color x:Key="TimelineColor">#E4B6C3</Color>
<Color x:Key="HeaderTextColor">#3C3C3C</Color>
<Color x:Key="BodyTextColor">#869EAC</Color>
<Color x:Key="TimeColor">#A64C79</Color>
</ResourceDictionary>
</Application.Resources>
Define style in App.xaml like this:
<Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="PlatformFontSample.App">
<Application.Resources>
<ResourceDictionary>
<OnPlatform x:Key="FontFamilyName" x:TypeArguments="x:String" iOS="MarkerFelt-Thin" Android="OpenSans" WinPhone="Segoe UI" />
<Style x:Key="FontLabel" TargetType="Label">
<Setter Property="FontFamily" Value="{DynamicResource FontFamilyName}" />
</Style>
</ResourceDictionary>
</Application.Resources>
and then Use in xaml:
<Label Text="{Binding Name}" Style="{DynamicResource FontLabel}" FontSize="Medium" FontAttributes="Bold" LineBreakMode="NoWrap"/>
Related
How can I dynamically connect Material icon code with prefix \u in Xamarin?
This not work:
string iconCode = "e87e";
Label label = new Label
{FontFamily = "IconMaterial", Text = $"\u{iconCode}"}
And How can I do the same thing in XAML code?
Thank you!
If you want to use the Material icon, you need to set the FontFamily first.
<ContentPage.Resources>
<OnPlatform x:Key="Material" x:TypeArguments="x:String">
<On Platform="iOS" Value="Material Design Icons" />
<On Platform="Android" Value="materialdesignicons-webfont.ttf#Material Design Icons" />
</OnPlatform>
<Style x:Key="MaterialIcons" TargetType="{x:Type Label}">
<Setter Property="FontFamily" Value="{DynamicResource Material}" />
<Setter Property="FontSize" Value="400" />
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="FontSize" Value="Large" />
</Style>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout>
<Label x:Name="label" ></Label>
</StackLayout>
</ContentPage.Content>
And set the Text in code behind.
label.Text = "\ue87e";
I have a Entry with a Style from StaticRecourse , but is it possible to have 2 different Styles for iOS and Android
<Entry
x:Name="Partijladen"
Grid.Row="15"
Grid.Column="4"
Grid.ColumnSpan="2"
Keyboard="Numeric"
Style="{StaticResource AEntry}"
TextChanged="Partijladen_TextChanged" />
This is working but i want a different Style for Android lets say "BEntry". What do i change here of is it not possible
Style="{StaticResource AEntry}"
And in App.xaml
<Style x:Key="AEntry" TargetType="Entry">
<Setter Property="TextColor" Value="#2c2c2e" />
<Setter Property="WidthRequest" Value="80" />
<Setter Property="HeightRequest" Value="10" />
<Setter Property="IsReadOnly" Value="True" />
<Setter Property="HorizontalTextAlignment" Value="Center" />
</Style>
<Style x:Key="BEntry" TargetType="Entry">
<Setter Property="TextColor" Value="DarkGreen" />
<Setter Property="FontSize" Value="25" />
<Setter Property="WidthRequest" Value="80" />
<Setter Property="HeightRequest" Value="10" />
<Setter Property="IsReadOnly" Value="True" />
<Setter Property="HorizontalTextAlignment" Value="Center" />
</Style>
Tryed this but error
When you have two different syles:
<Entry
...
Style="{x:OnPlatform Android={StaticResource AEntry},
iOS={StaticResource BEntry}}" />
Alternatively, you can set platform-specific style attributes in the same style.
<Style x:Key="AEntry" TargetType="Entry">
<Setter Property="FontSize" Value="{x:OnPlatform UWP='', iOS='22', Android='20'}" />
...
</Style>
I am using Material Design Font Icons as my icon source for my project. The trouble is, since it's a font it needs a different color when selected vs. when deselected (as shown - the deselected white ones have white icons, which isn't awesome).
How can I modify the Style to change the color of the icon like it does the text and background color?
<!-- redacted because it would've never worked -->
Edit 1:
Consensus is that using the VSM isn't going to work because it doesn't derive from VisualElement. I've gotten it to work using a Trigger - but I'm not happy with the implementation. This works:
<Shell.Resources>
<ResourceDictionary>
<Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}">
<Style.Triggers>
<Trigger TargetType="FlyoutItem" Property="IsChecked" Value="True">
<Setter Property="Title" Value="Checked" />
<Setter Property="FlyoutIcon" >
<Setter.Value>
<FontImageSource FontFamily="MaterialDesignIconFont"
Glyph="{StaticResource InformationOutlineGlyph}"
Color="White" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
</Shell.Resources>
<FlyoutItem Title="About" >
<FlyoutItem.Icon>
<FontImageSource FontFamily="MaterialDesignIconFont"
Glyph="{StaticResource InformationOutlineGlyph}"
Color="Green" />
</FlyoutItem.Icon>
<ShellContent Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
</FlyoutItem>
... but as you can see, I have to set the entire FontImageSource value - which has the Glyph property - so I have to repeat this Style each time for each FlyoutItem.
How can I rewrite this Style to be reusable and only change the color, not the other properties?
I had the same question and solved it as follows
Create a custom flyout with an additional IconGlyphProperty
class FlyoutItemIconFont : FlyoutItem
{
public static readonly BindableProperty IconGlyphProperty = BindableProperty.Create(nameof(IconGlyphProperty), typeof(string), typeof(FlyoutItemIconFont), string.Empty);
public string IconGlyph
{
get { return (string)GetValue(IconGlyphProperty); }
set { SetValue(IconGlyphProperty, value); }
}
}
Create a FlyoutItemTemplate with two Lables and VisualStateManager
<Shell.ItemTemplate>
<DataTemplate>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="White" />
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{StaticResource Primary}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{StaticResource Primary}" />
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="White" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.8*" />
</Grid.ColumnDefinitions>
<Label x:Name="FlyoutItemIcon"
FontFamily="MaterialDesignFont"
Text="{Binding IconGlyph}"
TextColor="{Binding Source={x:Reference FlyoutItemLabel} ,Path=TextColor}"
FontSize="30"
Margin="5"/>
<Label x:Name="FlyoutItemLabel"
Grid.Column="1"
Text="{Binding Title}"
VerticalTextAlignment="Center" />
</Grid>
</DataTemplate>
</Shell.ItemTemplate>
Replace the original FlyoutItem in AppShell.xaml with the custom FlyoutItem
<controls:FlyoutItemIconFont Title="About" IconGlyph="{StaticResource IconInfo}">
<ShellContent Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
</controls:FlyoutItemIconFont>
<controls:FlyoutItemIconFont Title="Browse" IconGlyph="{StaticResource IconListBulleted}">
<ShellContent Route="ItemsPage" ContentTemplate="{DataTemplate local:ItemsPage}" />
</controls:FlyoutItemIconFont>
Add the BaseStyle to the customFlyouItem
<Shell.Resources>
<ResourceDictionary>
<x:String x:Key="IconInfo"></x:String>
<x:String x:Key="IconListBulleted"></x:String>
...
<Style TargetType="controls:FlyoutItemIconFont" BasedOn="{StaticResource BaseStyle}"/>
</ResourceDictionary>
</Shell.Resources>
Here is the Result
Create the Material Design Icons.
<Application.Resources>
<ResourceDictionary>
<Color x:Key="fgColor">#66169C</Color>
<Color x:Key="bgColor">#FFFFFF</Color>
<Color x:Key="OverDueItem">#FF1C07</Color>
<OnPlatform x:Key="Material" x:TypeArguments="x:String">
<On Platform="iOS" Value="Material Design Icons" />
<On Platform="Android" Value="materialdesignicons-webfont.ttf#Material Design Icons" />
</OnPlatform>
<Style x:Key="MaterialIcons" TargetType="{x:Type Label}">
<Setter Property="FontFamily" Value="{DynamicResource Material}" />
<Setter Property="FontSize" Value="100" />
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="TextColor" Value="{DynamicResource fgColor}" />
<Setter Property="FontSize" Value="Large" />
</Style>
</ResourceDictionary>
</Application.Resources>
For more details about the Material Design Icons, you could download from the GitHub. https://github.com/WendyZang/Test/tree/master/MaterialDesignIcons/App2
And then create the style to change the background color when you selected.
<Style x:Key="FloutItemStyle" TargetType="Grid">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Accent" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
Change the Label TextColor with the Triggers.
<Shell.ItemTemplate>
<DataTemplate>
<Grid x:Name="grid" Style="{StaticResource FloutItemStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.8*" />
</Grid.ColumnDefinitions>
<Label Style="{StaticResource MaterialIcons}" Text="">
<Label.Triggers>
<DataTrigger
Binding="{Binding Source={x:Reference grid}, Path=BackgroundColor}"
TargetType="Label"
Value="Accent">
<Setter Property="TextColor" Value="White" />
</DataTrigger>
</Label.Triggers>
</Label>
<Label
Grid.Column="1"
FontAttributes="Italic"
Text="{Binding Title}"
VerticalTextAlignment="Center">
<Label.Triggers>
<DataTrigger
Binding="{Binding Source={x:Reference grid}, Path=BackgroundColor}"
TargetType="Label"
Value="Accent">
<Setter Property="TextColor" Value="White" />
</DataTrigger>
</Label.Triggers>
</Label>
</Grid>
</DataTemplate>
</Shell.ItemTemplate>
Screenshot:
Updated:
Change:
<Setter Property="TextColor" Value="White" />
To:
<Setter Property="BackgroundColor" Value="Yellow" />
The whold trigger of the shell itemtemplate.
<Label.Triggers>
<DataTrigger
Binding="{Binding Source={x:Reference grid}, Path=BackgroundColor}"
TargetType="Label"
Value="Accent">
<!--<Setter Property="TextColor" Value="White" />-->
<Setter Property="BackgroundColor" Value="Yellow" />
</DataTrigger>
</Label.Triggers>
Screenshot:
Don't ask me why, but I thought only <ContentPage> can have <ContentPage.Resources>.
So I had a bunch of color setters and what not in almost every XAML page like this:
<ContentPage.Resources>
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="#000" />
<Setter Property="BarTextColor" Value="#20b8a2" />
</Style>
<Style TargetType="ContentPage">
<Setter Property="BackgroundColor" Value="#231f20" />
</Style>
<Style TargetType="Label">
<Setter Property="TextColor" Value="#f7f7f7" />
</Style>
<Style TargetType="Entry">
<Setter Property="TextColor" Value="#f7f7f7" />
</Style>
<Style TargetType="Button">
<Setter Property="BackgroundColor" Value="#0089c1" />
<Setter Property="TextColor" Value="#f7f7f7" />
<Setter Property="CornerRadius" Value="0" />
</Style>
</ContentPage.Resources>
So how to change all main colors in one place?
So instead of having resources in every Solution/App/Views/SubPage.xaml file there is obviously an outermost XAML file in general projects root Solution/App/App.xaml where you can simply set these resources for entire application.
<Application ...>
<Application.Resources>
<Color x:Key="PrimaryColor">#20b8a2</Color> <!-- turqoise -->
<Color x:Key="SecondaryColor">#0089c1</Color> <!-- blue -->
<Color x:Key="TertiaryColor">#ef569f</Color> <!-- pink -->
<Color x:Key="ThemeExtremeColor">#000000</Color>
<Color x:Key="ThemeMainColor">#231f20</Color>
<Color x:Key="ThemeLighterColor">#333333</Color>
<Color x:Key="TextColor">#f7f7f7</Color>
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="{StaticResource ThemeExtremeColor}" />
<Setter Property="BarTextColor" Value="{StaticResource PrimaryColor}" />
</Style>
<Style TargetType="ContentPage">
<Setter Property="BackgroundColor" Value="{StaticResource ThemeMainColor}" />
</Style>
<Style TargetType="Grid">
<Setter Property="BackgroundColor" Value="{StaticResource ThemeMainColor}" />
</Style>
<!--<Style TargetType="ListView">
<Setter Property="BackgroundColor" Value="{StaticResource ThemeMainColor}" />
</Style>-->
<Style TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource TextColor}" />
</Style>
<Style TargetType="Entry">
<Setter Property="TextColor" Value="{StaticResource TextColor}" />
</Style>
<Style TargetType="Button">
<Setter Property="BackgroundColor" Value="{StaticResource SecondaryColor}" />
<Setter Property="TextColor" Value="{StaticResource TextColor}" />
<Setter Property="CornerRadius" Value="0" />
</Style>
</Application.Resources>
....
</Application>
Now "{StaticResource TextColor}" can be used anywhere in XAML.
so i am trying to design a little login page, based on this tutorial:
Xamarin Tutorial
My code differs a little, this is my LoginPage.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"
x:Class="App.ViewModels.LoginPage"
BackgroundColor="{StaticResource BackgroundColor}">
<ScrollView>
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="AUTO"/>
<RowDefinition Height="AUTO"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--header spacing-->
<BoxView BackgroundColor="Green" Grid.Row="0"/>
<Image Source="LoginBackground.png" Aspect="AspectFill" HeightRequest="150"/>
<Image Source="CurvedLimiter.png" VerticalOptions="End" HeightRequest="50" Aspect="Fill"/>
<!--header-->
<BoxView BackgroundColor="White" Grid.Row="1" HeightRequest="100"/>
<StackLayout Grid.Row="1">
<Entry Text="Email" x:Name="Email" Style="{StaticResource LoginEntry}"/>
<Entry IsPassword="True" Text="Password" x:Name="Password" Style="{StaticResource LoginEntry}"/>
<Button Text="Login" x:Name="btnLogin" Clicked="btnLogin_Clicked" Style="{StaticResource LoginButton}"/>
</StackLayout>
<!--login-->
<BoxView BackgroundColor="White" Grid.Row="2"/>
</Grid>
</ScrollView>
</ContentPage>
As you can see, I am using StaticRessources, which are described in my App.xaml:
<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="App.App">
<Application.Resources>
<ResourceDictionary>
<!-- colors -->
<Color x:Key="HeaderTextColor">#585858</Color>
<Color x:Key="BodyTextColor">#C3C3C3</Color>
<Color x:Key="ButtonBackgroundColor">#5992FF</Color>
<Color x:Key="BackgroundColor">#5992FF</Color>
<!--Font families-->
<OnPlatform x:Key="RegularFontFamily" x:TypeArguments="x:String" iOS="HelveticaNeue" Android="sans-serif" />
<OnPlatform x:Key="LightFontFamily" x:TypeArguments="x:String" iOS="HelveticaNeue-Light" Android="sans-serif-light" />
<OnPlatform x:Key="MediumFontFamily" x:TypeArguments="x:String" iOS="HelveticaNeue-Medium" Android="sans-serif-medium" />
<!-- Font sizes -->
<Font x:Key="BodyFont" FontSize="18" FontFamily="{StaticResource RegularFontFamily}" />
<Font x:Key="TagTextFont" FontSize="18" FontFamily="{StaticResource RegularFontFamily}" />
<Font x:Key="StatsNumberFont" FontSize="20" FontFamily="{StaticResource LightFontFamily}" />
<Font x:Key="StatsCaptionFont" FontSize="16" FontFamily="{StaticResource LightFontFamily}" />
<Font x:Key="ButtonFont" FontSize="14" FontFamily="{StaticResource MediumFontFamily}" />
<!-- Styles -->
<Style x:Key="LoginEntry" TargetType="Entry">
<Setter Property="TextColor" Value="{StaticResource HeaderTextColor}" />
<Setter Property="HorizontalTextAlignment" Value="Center"/>
</Style>
<Style x:Key="LoginButton" TargetType="Button">
<Setter Property="BackgroundColor" Value="{StaticResource ButtonBackgroundColor}"/>
<Setter Property="TextColor" Value="White"/>
<Setter Property="HeightRequest" Value="40"/>
<Setter Property="BorderRadius" Value="15"/>
<Setter Property="Font" Value="{StaticResource ButtonFont}"/>
<Setter Property="WidthRequest" Value="200"/>
<Setter Property="HorizontalOptions" Value="Center"/>
</Style>
<Style x:Key="ProfileNameLabel" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource HeaderTextColor}" />
<Setter Property="Font" Value="{StaticResource TitleFont}" />
</Style>
<Style x:Key="ProfileTagLabel" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource BodyTextColor}" />
<Setter Property="Font" Value="{StaticResource TagTextFont}" />
</Style>
<Style x:Key="StatsNumberLabel" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource HeaderTextColor}" />
<Setter Property="HorizontalTextAlignment" Value="Center"/>
<Setter Property="Font" Value="{StaticResource StatsNumberFont}" />
</Style>
<Style x:Key="StatsCaptionLabel" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource BodyTextColor}" />
<Setter Property="Margin" Value="0,-5,0,0"/>
<Setter Property="HorizontalTextAlignment" Value="Center"/>
<Setter Property="Font" Value="{StaticResource StatsCaptionFont}" />
</Style>
<Style x:Key="MainBodyLabel" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource BodyTextColor}" />
<Setter Property="Font" Value="{StaticResource BodyFont}" />
</Style>
<Style x:Key="FollowButton" TargetType="Button">
<Setter Property="BackgroundColor" Value="{StaticResource ButtonBackgroundColor}"/>
<Setter Property="TextColor" Value="White"/>
<Setter Property="HeightRequest" Value="40"/>
<Setter Property="BorderRadius" Value="20"/>
<Setter Property="Font" Value="{StaticResource ButtonFont}"/>
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>
The thing is that this worked, at least in the XAML preview. However when I wanted to compile the code, I got the following error message, which refers to the first Font x:key=... Line:
Position 19:36. No property, bindable property, or event found for
'FontSize', or mismatching type between value and property.
Why is it? Now also the XAML previewer doesn't work anymore, because the project failed to compile...
Thanks very much in advance!
You are declaring your fonts wrong.
<Style x:Key="BodyFont" TargetType="Label">
<Setter Property="FontSize" Value="18"/>
<Setter Property="FontFamily" Value="{StaticResource RegularFontFamily}"/>
</Style>
And do the same for rest of the fonts.