Im following allong the Youtube Series "Beyond Monkey" and on part 8, my XAML wont render at runtime (project compiles fine), hitting an error:
A cycle occurred while laying out the GUI.
Ive literally copied and pasted the code from the github repo to check its correct, but it still doesn't like it. I've pulled out bits of XAML everywhere until it builds and it seems it doesn't like the icon XAML:
<!-- Likes -->
<HorizontalStackLayout
Spacing="6"
VerticalOptions="Center">
<Image
Source="imglike.png"
WidthRequest="16"
HeightRequest="16" />
<Label
Style="{StaticResource RegularLightText14}"
Text="{Binding TheVideo.LikesCount, Mode=OneWay}" />
</HorizontalStackLayout>
If I strip the image and label out of the Horizontal Stack Layout it works, but as soon as I try to add any content to them, app.g.i.cs blows up with an unhandled exception
A cycle occurred while laying out the GUI.
Layout cycle detected. Layout could not complete.
The XAML looks ok to me and obviously works for the author, so I'm guessing is something unrelated that a XAML n00b like myself doesn't understand.
Anyone have any ideas?
Thanks
Related
I'm creating a very UI centric application - in this application it is important (or event vital one can say) that I can actively preview my changes. Thankfully, Xamarin.Forms has Hot Reload - the perfect tool to get started to preview your changes!
I enabled hot reload in the 'Hot Reload' section in the options tab - I also enabled the 'Changes Made' (which is in preview) option to 'ON'.
I started my application - and I changed the text of a button... And...
Nothing.
I closed and reopened my app - and tried again... And... guess what?
Nothing.
Xamarin.Forms - come on!
This is a very annoying issue I've had on this specific application - it's taken away most of my day and I've just been fighting and fighting - and I have been unable to solve anything.
What I tried to do:
I tried to upgrade my Xamarin.Forms version to the latest - and that still did not solve anything.
I tried to enable and disable Hot Reload from the options menu - and that still did not solve anything.
I tried to close and reopen the solution - clean - and build - and you guess it: still I could not preview my changes.
I checked if I enabled it and it was enabled.
I checked my linker settings and they were as expected.
Images:
XAML code:
I changed the background color to blue:
<Grid HeightRequest="100"
Margin="5"
BackgroundColor="White"
RowSpacing="2">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="125" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0"
Grid.Column="1"
TextColor="Blue"
VerticalOptions="Center"
Text="{Binding EventTitle}"
Margin="7"
Padding="10,0" />
<Image Grid.Row="0"
HeightRequest="125"
VerticalOptions="Start"
Margin="2,2,1,2"
Aspect="AspectFill"
Source="{Binding Image}" />
</Grid>
My phone:
Even after saving - and waiting for at least half an hour - still the background is white.
I've tried everything possible to get it to work and I've been hitting the wall each time.
I am looking for help,
Thanks,
Tom
I've had all sorts of different issues with Hot Reload not working over the past few months.
I found the only consistent way that I could get it to work was by opening the project the long way around.
So:
Open Visual Studio
Choose Continue without code on the startup screen
Go to File -> Open -> Project/Solution and choose the solution from there.
Whenever I load the project this way, Hot Reload will work. If I load it any other way, it seems to be really temperamental.
Open project
Go to Tools => Debugging => Hot Reload
On "Common" section tick "Apply XAML hot reload on document save"
on "Xamarin.Forms" section tick "Full Page"
as shown in the image (red circled below).
On a project had the same issue , found out that i have to be in a XAML page
and not a XAML.CS page
Then hit save and it starts again and oke.
Common options - only Enable Just My XAML in Live Visual Tree
And in Xamarin.Forms option -Full page
ps
On your example it is White
BackgroundColor="White"
I am currently having a problem building my Xamarin.Forms solution. I'm getting an error of The "XamlCTask" task failed unexpectedly. I tried looking at the Xamarin logs and Stacktrace but I can't seem to find what's the issue. Any suggestions where I can start looking?
Logs
<E2ETraceEvent xmlns="http://schemas.microsoft.com/2004/06/E2ETraceEvent">
<System xmlns="http://schemas.microsoft.com/2004/06/windows/eventlog/system">
<EventID>0</EventID>
<Type>3</Type>
<SubType Name="Warning">0</SubType>
<Level>4</Level>
<TimeCreated SystemTime="2016-10-11T10:45:07.4999078Z" />
<Source Name="Xamarin.VisualStudio.Android.Designer.MonoAndroidDesignerService" />
<Correlation ActivityID="{00000000-0000-0000-0000-000000000000}" />
<Execution ProcessName="devenv" ProcessID="19260" ThreadID="1" />
<Channel />
<Computer>XXXXXX</Computer>
</System>
<ApplicationData>An unexpected error occurred trying to initialize Android Designer.</ApplicationData>
</E2ETraceEvent>
Stack Trace
Severity Code Description Project File Line Suppression State
Error The "XamlCTask" task failed unexpectedly.
System.ArgumentException: An item with the same key has already been
added.
Server stack trace: at
System.ThrowHelper.ThrowArgumentException(ExceptionResource resource)
at System.Collections.Generic.Dictionary`2.Insert(TKey key, TValue
value, Boolean add) at
Xamarin.Forms.Xaml.XamlParser.ParseXamlElementFor(IElementNode node,
XmlReader reader) at
Xamarin.Forms.Xaml.XamlParser.ReadNode(XmlReader reader, Boolean
nested) at
Xamarin.Forms.Xaml.XamlParser.ParseXamlElementFor(IElementNode node,
XmlReader reader) at
Xamarin.Forms.Xaml.XamlParser.ReadNode(XmlReader reader, Boolean
nested) at
Xamarin.Forms.Xaml.XamlParser.ParseXamlElementFor(IElementNode node,
XmlReader reader) at
Xamarin.Forms.Build.Tasks.XamlCTask.ParseXaml(Stream stream,
TypeReference typeReference) at
Xamarin.Forms.Build.Tasks.XamlCTask.Compile() at
Xamarin.Forms.Build.Tasks.XamlCTask.Execute() at
System.Runtime.Remoting.Messaging.StackBuilderSink._PrivateProcessMessage(IntPtr
md, Object[] args, Object server, Object[]& outArgs) at
System.Runtime.Remoting.Messaging.StackBuilderSink.SyncProcessMessage(IMessage
msg)
Exception rethrown at [0]: at
System.Runtime.Remoting.Proxies.RealProxy.HandleReturnMessage(IMessage
reqMsg, IMessage retMsg) at
System.Runtime.Remoting.Proxies.RealProxy.PrivateInvoke(MessageData&
msgData, Int32 type) at Microsoft.Build.Framework.ITask.Execute()
at
Microsoft.Build.BackEnd.TaskExecutionHost.Microsoft.Build.BackEnd.ITaskExecutionHost.Execute()
at
Microsoft.Build.BackEnd.TaskBuilder.d__26.MoveNext() XXXXXXX.XXXXXX.XXXXXX
tl;dr:
disable XamlC on the failing Page
[XamlCompilationAttribute (XamlCompilationOptions.Skip)]
public partial class MyPageThrowing {}
or at the Assembly level
[assembly:XamlCompilationAttribute (XamlCompilationOptions.Skip)]
Long Story
An issue throwing the same exception and the same StackTrace had been fixed in the next (to date) version of xamarin.forms which should be 2.3.3-pre3 or 2.3.4.
The only way to know for sure would be to paste your failing Xaml page here, or even better, on http://bugzilla.xamarin.com.
I really encourage you to do so. If the issue is not fixed already. Either it's an issue in your Xaml and this needs a better exception being thrown, or it's an unsupported case in XamlC, and this require a fix.
First of all this issue will be raised when xamarin.forms version is not compatible with the nuget that you are pointed to. So i'd like to tell you these steps and go ahead.
Step1: Update Xamarin.Forms version in PCL and all other projects.
Step2: Check for matching dependencies with nuget package.i.e make sure everywhere the the solution is using the **same** version of the Xamarin.Forms.
Hope this will helps you.
Hope could be usefull to someone else, I had the same error shown in the question (..."XamlCTask" task failed unexpectedly. System.ArgumentException: An item with the same key has already been added...), my issue was caused by a ListViewTemplate, which contained a DataTemplate, in which I putted two elements, a Label and a Picker.
Grouping Label e Picker in a unique element, a Frame, inside the DataTemplate, solved my issue.
I already resolved the issue. Since I was renaming the namespaces, i named the namespaces alias wrong. I used dots (.) in the alias name like this xmlns:sample.pages="clr-namespace:JustAnotherNamespace". When I removed the dots, the solution was able to build!
I had the same problem. Clean or restart didn't help. Now I tried the simulator instead of the device. This worked. Afterwards I was able to build and run on the device.
Edit:
Now I had the issue a second time. But here it was different. The app didn't compile anymore. Now it seems to work. This is what I've done:
Upgrade to XF 2.3.3.168
Upgrade to XF 2.3.3.168 for the referenced project
Fixed a compile error (only appeared after update)
This occurs sometimes if your Xamarin Forms nugets are going corrupt. Uninstall and reinstall them.
Perhaps you have 2 instances of Visual Studio accessing the same device.
in this case removing bin and obj folder it seems works like a charm!
I had this error too. In my case it turned out to be a xaml issue. I hadn't made any recent changes to any dlls or references. I had just made some recent xaml changes and I suddenly started getting this error. This xaml I wrote had caused the issue:
<StackLayout Grid.Row="4" Orientation="Horizontal" HorizontalOptions="Center" >
<StackLayout.Children>
<Label Text="Holes" BackgroundColor="White" VerticalOptions="Center"/>
<Entry x:Name="entryHoles" BackgroundColor="White" WidthRequest="100"/>
</StackLayout.Children>
<StackLayout.Children>
<Label Text="Par" BackgroundColor="White" VerticalOptions="Center"/>
<Entry x:Name="entryPar" BackgroundColor="White" WidthRequest="100"/>
</StackLayout.Children>
</StackLayout>
There should be only one StackLayout.Children tag. This is what I switched to to get this error to go away:
<StackLayout Grid.Row="4" Orientation="Horizontal" HorizontalOptions="Center" >
<StackLayout.Children>
<Label Text="Holes" BackgroundColor="White" VerticalOptions="Center"/>
<Entry x:Name="entryHoles" BackgroundColor="White" WidthRequest="100"/>
<Label Text="Par" BackgroundColor="White" VerticalOptions="Center"/>
<Entry x:Name="entryPar" BackgroundColor="White" WidthRequest="100"/>
</StackLayout.Children>
</StackLayout>
I'll bet the extra StackLayout.Children tag caused this message: "An item with the same key has already been added." If so, it would have been great if Microsoft could have told us exactly what the duplicate item was. I wasted all kinds of time updating NuGet packages.
This error indicates that the versions of the NuGet packages and the version of Xamarin.Forms do not match.
Just update the NuGet packages in the project or remove Xamarin.Forms from the package list, then add it again.
I had 35 pages in my app with an assembly reference to turn on/off xaml compilation. To find the offending page I had to remove the assembly reference and place the following on each page and rebuild the shared project one at a time until I found the offending page (make sure you have release build selected).
#if (DEBUG != true)
[XamlCompilation(XamlCompilationOptions.Compile)]
#endif
Once you find the page, it's most likely a xaml issue like so many solutions above. For me it was because I had accidentally placed 2 resource dictionaries on the page so it was easy to spot, your's may not be so easy.
I'm developing a cross pltform app with Xamarin.Forms. I want to make a button with an image but I dont know how to specify the path of the imge. When I use this annotation it works:
<Button Text="Naviga tra i Piani del Museo" Image="foo.png"/>
but when my image is inside some folders (folder1/folder2) the following code doesn't work:
<Button Text="Naviga tra i Piani del Museo" Image="folder1/folder2/foo.png"/>
So how can I correctly specify the path of my image?
You can't nest the images in folders. iOS and Android expect them to be resources, and WP expects them to be in the App's root folder.
The Xamarin Forms docs has a section on working with images.
Keeping the image common using PCL is a difficult task.
So do it separately.
Keep in mind that you have to copy the images to Resources>drawable in case of android project.
For using folders for Xamarin.Forms project this is what worked for me.
You need to put your resources (image file in this case), to folder inside Xamarin.Form project (for this example folder is called "Assets") and set Build Action "Content".
Secondly for resources to work with Android you need to put files to Resources>drawable folder inside Android project (here you cannot use any folders), Set Build Action "AndroidResource".
<ContentPage.Resources>
<ResourceDictionary>
<OnPlatform x:Key="StartButtonImage"
x:TypeArguments="FileImageSource"
Android="button_image.png"
WinPhone="Assets\button_image.png"
iOS="Assets/button_image.png"/>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<Grid>
<Button Image="{StaticResource StartButtonImage}" BackgroundColor="Transparent"/>
</Grid>
</ContentPage.Content>
Pay attention that for iOs you need to make path using "/" and for WinPhone/UWP using "\".
You should specify Image property of button in OnPlatform tag to give different path for each platform. This is the example of Box View, you can try the same for Button Image property.
<BoxView HorizontalOptions="Center">
<BoxView.Color>
<OnPlatform x:TypeArguments="Color"
iOS="Green"
Android="#738182"
WinPhone="Accent" />
</BoxView.Color>
<BoxView.WidthRequest>
<OnPlatform x:TypeArguments="x:Double"
iOS="30"
Android="40"
WinPhone="50" />
</BoxView.WidthRequest>
</BoxView>
I've Been working with WP7 for a while, am using listPicker/DatePicker Heavily. i hate its design though.i use liskPicker's property ExpansionMode="FullScreenOnly". i tried to make those controls to look prettier by
// Setting A source to the FullModeItemTemplate
FullModeItemTemplate="{StaticResource lpkFullItemTemplate}"
//the definition for this Resource is as follows:
<DataTemplate x:Name="lpkFullItemTemplate">
<StackPanel Orientation="Horizontal" Margin="5 5 5 5" Background="#FFA3A3A3"
Width="475" Height="45" >
<TextBlock Text="{Binding}" Foreground="Black" Margin="5 5 15 5" />
</StackPanel>
</DataTemplate>
I need real changes, changing the background of that popup and such changes, is that possible? or i need to build my own popup from scratch?
In order to do that you will have to create a copy of the ListPickerPage.xaml file from the Silverlight for Windows Phone Toolkit in your application, change it to meet your requirements, and then on your ListPicker control set the PickerPageUri proprety to the new ListPickerPage.xaml
I would like to improve Pedro's answer, but I still can't comment. You can see there's some people making questions up there.
In order to copy the ListPickerPage you'll need both the ListPickerPage.xaml and ListPickerPage.xaml.cs files. If you want those files to compile, you need some extension methods defined on Extensions.cs, ItemsControlExtensions.cs and VisualTreeExtensions.cs. You can either copy those three files or cherry pick the methods you need and add them to your own file.
I have a reasonably large Silveright 3.0 project on the go, and I'm having issues accessing a couple of custom font resources from within one of the assemblies.
I've got a working test solution where I have added a custom font as a resource, and can access it fine from XAML using:
<TextBlock Text="Test" FontFamily="FontName.ttf#Font Name" />
The test solution consists of the TestProject.Application and the TestProject.Application.Web projects, with all the fun and games obviously in the TestProject.Application project
However, when I try this in my main solution, the fonts refuse to show in the correct type face (instead showing in the default font). There's no difference in the way the font has been added to project between the test solution and the main solution, and the XAML is identical.
However, there is a solution layout difference. In the main solution, as well as having a MainApp.Application and MainApp.Application.Web project, I also have a MainApp.Application.ViewModel project and a MainApp.Application.Views project, and the problem piece of XAML is the in the MainApp.Application.Views project (not the .Application project like the test solution).
I've tried putting the font into either the .Application or .Application.Views project, tried changing the Build Action to Content, Embedded Resource etc, all to no avail.
So, is there an issue accessing font resources from a child assembly that I don't know about, or has anyone successfully done this?
My long term need will be to have the valid custom fonts being stored as resources in a separate .Application.FontLibrary assembly that will be on-demand downloaded and cached, and the XAML controls in the .Application.Views project will need to reference this FontLibrary assembly to get the valid fonts. I've also tried xcreating this separate font library assembly, and I can't seem to get the fonts from the second assembly.
As some additional information, I've also tried the following font referencing approaches:
<TextBlock Text="Test" FontFamily="/FontName.ttf#Font Name" />
<TextBlock Text="Test" FontFamily="pack:application,,,/FontName.ttf#Font Name" />
<TextBlock Text="Test" FontFamily="pack:application,,,/MainApp.Application.Views;/FontName.ttf#Font Name" />
<TextBlock Text="Test" FontFamily="pack:application,,,/MainApp.Application.Views;component/FontName.ttf#Font Name" />
And a few similar variants with different assembly references/sub directories/random semi colons.
And so far nothing works... anyone struck this (and preferably solved it)?
This code works for me:
... FontFamily="/(DLL);Component/(DIR-optional)/(Font_file)#(Font_name)"/> ...