Xcode - Storyboard views size and position modified when opening - objective-c

I noticed something very annoying with Xcode: I have some storyboards for which certain views size & position are systematically updated when I open them. This is annoying especially when working with a team.
Here how I produce this behavior:
I pull the app from a git repository
Open an affected storyboard doing no modification at all
git diff already tells me differences like
$ git diff
...
- <rect key="frame" x="576.99999828648401" y="11" width="170" height="20"/>
+ <rect key="frame" x="577" y="11" width="170" height="20"/>
...
- <rect key="frame" x="518.99999921768904" y="7" width="228" height="30"/>
+ <rect key="frame" x="519" y="7" width="227.99999841338541" height="30"/>
Is this happening to anybody else ?
The question is:
Why is my storyboard getting modified when I'm only opening it, and how to prevent it ?
Notice:
I realized this seems to happen only on <rect /> contained into labels & textFields

Xcode saves the storyboard layout information in an XML file (.storyboard). So any changes on the storyboard will be reflecected in that XML. Especially if you work with teammates this information might change regularly. You can try it out by moving around some items (don't change anything else) and after that start a diff with your git repository. You should see again a change in the XML. You could ignore the storyboard file in your git checkout. But this wouldn't make much sense as your teammates may have added new items to the storyboard.
Maybe this helps as well: [Xcode changes unmodified storyboard and XIB files
If I understand the first answer correct other changes might also trigger a change on the storyboard XML file.
regards
Thomas

There is a bug with storyboards that nobody's looking into it seems.
Try to split the storyboards as much as possible to reduce the chances of merge conflict and ease its eventual resolution. It can also escalate if you are using Xcode on an external display with a different resolution.
This issue can only be reduced but never solved.

Related

Adding child elements to a HorizontalStackLayout causes "A cycle occurred while laying out the GUI" error

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

SVG <LinearGradient> appears black on PDF export (PhantomJS)

In our application we generate lots of various PDFs containing SVGs, and all of them render without any issues. The only exception is this linear gradient. Is there anything wrong about this SVG?
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="476" height="227">
<defs>
<linearGradient id="gradient">
<stop offset="0%" stop-color="#008000">
</stop>
<stop offset="50%" stop-color="#ff0000">
</stop>
<stop offset="100%" stop-color="#0000ff">
</stop>
</linearGradient>
</defs>
<rect x="17.393672215737514" y="205.945" width="122.87932223519165" height="10.055" stroke="none" stroke-width="0" fill="url(#gradient)"></rect>
</svg>
Update
As confirmed by K J the SVG is fully valid. So that must be some phantomJS rendering problem. Although I doubt that during all those years that PhantomJS is being actively used no one else faced same problem (generating PDFs containing SVGs with linear gradients seems a pretty common use case to me). PhantomJS-2.1.1 uses QtWebKit 538.1, but I wasn't able to find anyone reporting any related issues neither for phantomjs nor for qtwebkit.
Also I had a suspicion that it might be somehow related to <base> tag. I've met multiple times information about <base> tag influencing the url referencing <linearGradient> ID. But after doing some testing I came to conclusion that this is not the case, because when url is bad, my gradient element is completely blank.
I'm including this image to show my webpage against PDF output:
Nothing wrong with that SVG gradient when converted in any suitable fashion
Thus the problem must lie in the application tolerance of that input.
There are no reported open issues related to gradient, https://github.com/ariya/phantomjs/search?q=gradient&type=issues, so perhaps you need to open a fresh one with your coding method.

What is the proper way to reference an image in winui

I am trying to display an image using the latest version of winui, without success.
Due to my lack of progress I assume I must be doing something terribly wrong, however, I can't determine what that might be.
Here is my most recent attempt.
MainWindow.xaml:
<Image Source="AppIcon.png" Width="200" Height="200" ImageFailed="ImageFailed_Event"/>
Image
Ok here is the solution that I have found with the help of the people in the comments:
Set the "Build Action" of the image file to "Content"
Set the "Copy to Output Directory" to "Copy if newer"
This is all that is necessary, no URI magic is needed.

Theme-aware XAML resources in a WP7 project

I'm making a Windows Phone 7 application and I'm a bit confused with dark/light themes.
With a panorama, you very often set a background image. The issue is it's very hard to make a picture which is right for both dark and light themes. How are we supposed to proceed?
Is there a way to force a dark/light theme for a panorama? This will avoid making theme-specific panorama background pictures. Then how do I do? I found xaml files in C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Design. If this is a right way to proceed, how can I import them for my panorama?
Or if there's no way (or if it's wrong) to force a dark/light theme: how to write conditional XAML to set correct resources? Now I have the following XAML (default.xaml) which is fine with the dark theme:
<ImageBrush x:Key="PageBackground" ImageSource="Resources/PageBackground.png" Stretch="None" />
<ImageBrush x:Key="PanoramaBackground" ImageSource="Resources/PanoramaBackground.png" Stretch="None" />
But when I use a light theme, black controls and black texts are hard to read with my dark background pictures. So I made different pictures that I can use this way:
<ImageBrush x:Key="PageBackground" ImageSource="Resources/PageBackgroundLight.png" Stretch="None" />
<ImageBrush x:Key="PanoramaBackground" ImageSource="Resources/PanoramaBackgroundLight.png" Stretch="None" />
Now my issue is to make XAML conditional to declare the right thing depending on the current theme.
I found no relevant way on the Internet. I would prefer not to use code or code-behind for that because I believe XAML is able to do this (I just don't know how).
EDIT: Code snippet to load a xaml file as ResourceDictionary
string xaml = null;
StreamResourceInfo xamlInfo = Application.GetResourceStream(new Uri("light.xaml", UriKind.Relative));
using (StreamReader sr = new StreamReader(xamlInfo.Stream))
xaml = sr.ReadToEnd();
dic = (ResourceDictionary)XamlReader.Load(xaml);
this.Resources.MergedDictionaries.Add(dic);
To force a dark or white theme you can indeed use the styles defined in the folder you pointed out. Copy and Paste the rules you need to your App.xaml (just PhoneForegroundColor, PhoneBackgroundColor and the related Brushes would be a good start).
It's probably better though to stay "theme-aware" and load a different image for light and dark themes. Here is an article explaining how to do this: http://blog.jayway.com/2010/12/16/theme-aware-panorama-background-in-windows-phone-7/
There is another possibility I've found: You can use the Coding4Fun Toolkit Converter according to these instructions. However, I'm unable to use correctly use them.
Another possibiliy is to use an OpacityMask. But this only works for black/white images :/
Yousef's solution looks interesting. but it takes too much time to load. The image will be changed round about 1s after the app started. I've tested this on a Nokia 820. I've moved the call for setting the DataContext in a Loaded Event, which was called much later. Now the call takes place in the constructor, so the image will be already set when the application displays it. However, it still adds more loading time :( Any suggestions on how to improve this?

Can't access font resource in Silverlight class library

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)"/> ...