XAML Xamarin OnPlatform Binding - xaml

I think my code is self explanatory:
<Label Style="{DynamicResource labelStyle}"
HorizontalTextAlignment="End" Text="{Binding message}">
<OnPlatform x:TypeArguments="Color">
<OnPlatform.iOS>
{DynamicResource rightBubbleFontColor}
</OnPlatform.iOS>
<OnPlatform.Android>
{DynamicResource rightBubbleFontColor}
</OnPlatform.Android>
<OnPlatform.Android>
{StaticResource rightBubbleFontColor}
</OnPlatform.Android>
</OnPlatform>
</Label>
I'm trying to dynamically bind a color to the label. Depending on the current platform, it has to be another type of resource (DynamicResource or StaticResource).
I get this exception when trying to build the solution:
System.ArgumentException: An item with the same key has already been added.
UPDATE
I now have this code:
<Label Style="{DynamicResource labelStyle}"
HorizontalTextAlignment="End" Text="{Binding message}">
<Label.TextColor>
<OnPlatform
x:Key="RightBubbleFontColor"
x:TypeArguments="Color"
iOS="{DynamicResource rightBubbleFontColor}"
Android="{DynamicResource rightBubbleFontColor}"
WinPhone="{StaticResource rightBubbleFontColor}">
</OnPlatform>
</Label.TextColor>
</Label>
And I get the following error message:
Object reference not set to an instance of an object.
When I replace the binding to a color it works.
Working example:
<Label Style="{DynamicResource labelStyle}"
HorizontalTextAlignment="End" Text="{Binding message}">
<Label.TextColor>
<OnPlatform
x:Key="RightBubbleFontColor"
x:TypeArguments="Color"
iOS="Red"
Android="Green"
WinPhone="Blue">
</OnPlatform>
</Label.TextColor>
</Label>
So it has to be an issue with the way I'm trying to bind this I guess.
EDIT
Asked a new question to describe the problem better: https://stackoverflow.com/questions/39852888/xamarin-forms-use-dynamicresource-or-staticresource-depending-on-os

You have two <OnPlatform.Android> elements. I'm assuming the last would be <OnPlatform.WinPhone>.
EDITED
Now that you have that fixed, maybe try this for it to actually work?
<OnPlatform
x:Key="BubbleTextColor"
x:TypedArguments="Color"
iOS="{DynamicResource rightBubbleFontColor}"
Android="{DynamicResource rightBubbleFontColor}"
WinPhone="{StaticResource rightBubbleFontColor}" />
Then bind it where necessary.
Not sure if it will work any differently than what you already have, but I guess it's worth a shot.

Related

I need use ffimageloading with input:AdvancedEntry

I have this code and working no issue :
<input:AdvancedEntry Margin="0,10,0,0"
BorderColor="#D9DCDB"
CornerRadius="10"
IconColor="LightGray"
IconImage="icon_lock.png"
IsPassword="True"
Placeholder="{x:Static local:Strings.Password}"
Text="{Binding User.Password}"
TextColor="Black"
TextFontSize="18" />
I need to replace IconImage to this line :
<ffimageloadingsvg:SvgCachedImage WidthRequest="30" HeightRequest="30" Source="resource://AppTest.Resources.ic_lock_24px.svg"/>
It say error and input:AdvancedEntry not supported ffimageloadingsvg I need a solution for that or any hint can help me to achieve this code as well .

Xamarin.Forms DynamicResource doesn't seem to be working

I can't seem to get a DynamicResource working correctly.
Here's the XAML in App.xml:
<Application.Resources>
<ResourceDictionary>
<Thickness x:Key ="DefaultInsets"
Bottom="4"
Top ="4"
Left ="8"
Right ="8" />
</ResourceDictionary>
</Application.Resources>
And here's what I'm trying to do inside another file's ContentView:
<StackLayout
VerticalOptions="Center"
HeightRequest="225"
Margin="{DynamicResource DefaultInsets}" >
<Entry
x:Name="nameControl"
Placeholder="Full Name"
Margin="{DynamicResource DefaultInsets}"
/>
<Entry
x:Name="passwordControl"
IsPassword="True"
Placeholder="Password"
Margin="{DynamicResource DefaultInsets}" />
</StackLayout>
It seems like this should make consistent insets for the StackLayout from the ContentView, and for the Entry fields from the StackLayout. But I don't see any of that.
What have I done wrong?
Update : I have also tried this with StaticResource, and still no luck.
I use following type with ResourceDictionary. For distinguish, I set the top_margin to 40, here is my screenshot.
Here is my ResourceDictionary.
<Application.Resources>
<ResourceDictionary>
<OnPlatform x:Key="OuterPadding" x:TypeArguments="Thickness">
<On Platform="Android">8 ,40,8,4</On>
<On Platform="iOS">20</On>
<On Platform="WinPhone">24</On>
</OnPlatform>
<!-- left, top, right, and bottom-->
</ResourceDictionary>
</Application.Resources>
Here is my layout.
<StackLayout
VerticalOptions="Center"
HeightRequest="225"
Margin="{DynamicResource OuterMargin}" >
<Entry
x:Name="nameControl"
Placeholder="Full Name"
Margin="{DynamicResource OuterMargin}"
/>
<Entry
x:Name="passwordControl"
IsPassword="True"
Placeholder="Password"
Margin="{DynamicResource OuterMargin}" />
</StackLayout>
Update
I found you layout issue is related to the VerticalOptions="Center" in the StackLayout(If you set the VerticalOptions="Center", then set the margin value is not work).
If I delete it and use StaticResource.
Here is running screenshot(For testing, I change the value of margin top to 20)
Other answers may be valid for some people, but in the end here's what I was doing wrong:
InitializeComponent() was never getting called inside App.xaml.cs.
I had an if-then statement that was always hitting a return before ever getting to InitializeComponent().
When that doesn't get called, App.xaml is inaccessible to the rest of the app, and nothing defined there is available as a DynamicResource.
So I moved InitializeComponent() to happen before the if-then statement, and now it all works like gangbusters.
I hope this helps someone!

How can I stop Font Awesome from working using words?

Hopefully this makes sense, as it's quite bizarre to me.
Essentially the problem I have is Font Awesome appears to override certain words with icons which I do not want happening - this is all done in XAML. I only want to use Font Awesome if I'm referencing the unicode directly otherwise I want to see the word I actually type.
I'm not entirely sure how to get around this right now, as any reference I find between Xamarin Forms and Font Awesome online it's generally people struggling to get FA working; which is not my current issue.
<Button Style="{StaticResource FontAwesome}" Text=" Sort By" />
Following the code above, I expect to ONLY see the SortBy icon at the start of my Text property - where I reference the code starting & and ending ;
This works fine - however I also get the same icon when I type "Sort", which I do not want.
EDIT
I've decided to use a Frame to get around this minor issue.
<Frame BackgroundColor="#f99000" HasShadow="False" Margin="5, 10" Padding="10">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="OnSortBy" />
</Frame.GestureRecognizers>
<StackLayout Orientation="Horizontal">
<Label Style="{StaticResource FALIExtendedWhite}" Text="" VerticalTextAlignment="Center" HorizontalOptions="End" />
<Label Text="Sort By" VerticalTextAlignment="Center" HorizontalOptions="CenterAndExpand" TextColor="White" />
</StackLayout>
</Frame>

DataContext and Command in XAML when used together is not working

I have a button, when i use datacontext and command, the command not work:
<Button DataContext="{Binding horaires}" Style="{StaticResource RefreshAppBarButtonStyle}" AutomationProperties.Name="{Binding HomeAppBarTitle, Converter={StaticResource StringResourceConverter}}" Command="{Binding RefreshCommand}" ></Button>
when i delete the datacontext and set the name manually it's work:
<Button Style="{StaticResource RefreshAppBarButtonStyle}" AutomationProperties.Name="Actualiser" Command="{Binding RefreshCommand}" ></Button>
what's can be the problem??
Best regards
Does horaires have a property called RefreshCommand? I'm guessing not because you said it works without the DataContext being set.
You need to either remove the DataContext binding and change the AutomationProperties.Name property binding to use the horaires prefix like this:
<Button AutomationProperties.Name="{Binding horaires.HomeAppBarTitle, Converter={StaticResource StringResourceConverter}}"
Command="{Binding RefreshCommand}" />
Or use a RelativeSource or ElementName binding to find the UI element that has your RefreshCommand in its DataContext. For example,
<Button DataContext="{Binding horaires}"
AutomationProperties.Name="{Binding HomeAppBarTitle, Converter={StaticResource StringResourceConverter}}"
Command="{Binding DataContext.RefreshCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" />
Personally, I would go with the first one because I like to avoid setting the DataContext explicitly if possible. The UI is supposed to reflect the data behind it, and setting the DataContext manually changes this hierarchy.

Windows Phone - Pivot and parent Page

I have a PivotControl inside a PPhoneAppplicationPage. Ideally I'd like to show the appbar items from the page at all times, and merge them with items defined in the UserControl which shows in each PivotItem. I've tried a few different things, but only the outer (the PhoneApplicationPage) appbar seems to show.
The AppBar items are owned by the Page, not the PivotItems. But you can add/remove then dynamically as needed:
Your Page has an ApplicationBar property which has a Buttons and a MenuItems property. Add and remove buttons/menuitems there programmatically as needed whenever a new PivotItem gets selected.
You can use different appbars for each pivot item in a pivot. try the code below
<phone:Pivot>
<i:Interaction.Triggers>
<appBarUtils:SelectedPivotItemChangedTrigger>
<appBarUtils:SelectedPivotItemChangedTrigger.SelectionMappings>
<appBarUtils:SelectionMapping SourceIndex="0" TargetIndex="0"/>
</appBarUtils:SelectedPivotItemChangedTrigger.SelectionMappings>
<appBarUtils:SwitchAppBarAction>
<appBarUtils:AppBar Id="0" BackgroundColor="{StaticResource AppBarBg}" ForegroundColor="{StaticResource Foreground}">
<appBarUtils:AppBarButton IconUri="/Assets\Images\appbar.home.png" Text="home" Command="{Binding HomeNavigationCommand}"/>
</appBarUtils:AppBar>
<appBarUtils:AppBar Id="1" BackgroundColor="{StaticResource AppBarBg}" ForegroundColor="{StaticResource Foreground}">
<appBarUtils:AppBarButton IconUri="/Assets\Images\appbar.home.png" Text="home" Command="{Binding HomeNavigationCommand}"/>
</appBarUtils:AppBar>
<appBarUtils:AppBar Id="2" BackgroundColor="{StaticResource AppBarBg}" ForegroundColor="{StaticResource Foreground}">
<appBarUtils:AppBarButton IconUri="/Assets\Images\appbar.home.png" Text="home" Command="{Binding HomeNavigationCommand}"/>
<appBarUtils:AppBarButton IconUri="/Assets\Images\appbar.money.png" Text="collection" Command="{Binding CollectionPageCommand}"/>
<appBarUtils:AppBarButton IconUri="/Assets\Images\appbar.check.rest.png" Text="ok" Command="{Binding OrderConfirmationButtonCommand}"/>
</appBarUtils:AppBar>
<appBarUtils:AppBar Id="3" BackgroundColor="{StaticResource AppBarBg}" ForegroundColor="{StaticResource Foreground}">
<appBarUtils:AppBarButton x:Name="ConfirmationAppBarButton" IconUri="/Assets\Images\appbar.cancel.rest.png" Text="cancel" Command="{Binding OrderCancelButtonCommand}"/>
<appBarUtils:AppBarButton IconUri="/Assets\Images\appbar.check.rest.png" Text="ok" Command="{Binding OrderConfirmationButtonCommand}" IsEnabled="{Binding Model.EnableCheck,Mode=TwoWay}" />
</appBarUtils:AppBar>
</appBarUtils:SwitchAppBarAction>
</appBarUtils:SelectedPivotItemChangedTrigger>
</i:Interaction.Triggers>
</phone:Pivot>