When I try to create a DatePicker it appears all white, and only the selected date is black which I changed through the Textcolor property. The rest of the graphics appear fuchsia in my case. How can I change the rest?
This is a known bug in Forms with Dark Theme.
There was a workaround posted recently
This is a super-ugly hack, but it solved the problem for me. Based on what #stefanbogaard86 suggested, I tried using Visual="Material", but the problem I ran into was that the DatePicker entry box didn't match the rest of the form. But, he's right that using Material did fix the issue with the picker rendering. So, I found this to get the best of both visuals:
<AbsoluteLayout>
<DatePicker
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
Date="{Binding Birthdate}"
Format="yyyy-MM-dd"
Style="{DynamicResource DatePicker}" />
<DatePicker
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
Date="{Binding Birthdate}"
Format="yyyy-MM-dd"
Opacity="0"
Style="{DynamicResource DatePicker}"
Visual="Material" />
</AbsoluteLayout>
The first picker is what we want to show in the form. The second one is what we want to be clickable and show the full date picker, but we don't it shown in the form, so its opacity is zero. They're both bound to the same property, so when you change the value they both work.
Like I said, this is super-ugly, but it works.
Related
I am using the Uno Material Card in my app. Recently there was a change to Uno.Material in the way it was initialized. I implemented that- with some help from #sbilogan in this response: Uno Material Initialization. However- the text in my cards no longer have the formatting. I tried adding back in the template to format the text- but it did not work. I am guessing something is being changed here- but not sure how to proceed. Here is my sample code and screenshots:
<material:Card x:Name="appInfoCard" HeaderContent="App Information"
SubHeaderContent="Tap to see more"
SupportingContent="App: "
Style="{ThemeResource MaterialOutlinedCardStyle}"
MediaContent="Example"
Foreground="{ThemeResource SubPageTextColor}"
Background="{ThemeResource cardBackground}">
<material:Card.MediaContentTemplate>
<DataTemplate>
<StackPanel Padding="10">
<Omitted for clarity>
</StackPanel>
</DataTemplate>
</material:Card.MediaContentTemplate>
</material:Card>
The code with the full template(I had to use this at one point- but the a change was merged into Uno Material so I did not have to use it anymore)
<material:Card.HeaderContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
Margin="16,14,16,0"
Style="{ThemeResource MaterialHeadline6}" />
</DataTemplate>
</material:Card.HeaderContentTemplate>
<material:Card.SubHeaderContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
Margin="16,0,16,14"
Style="{ThemeResource MaterialBody2}" />
</DataTemplate>
</material:Card.SubHeaderContentTemplate>
The top image was made with Uno Material build 774. The bottom was with 782.
It turns out that in my MaterialColorOverridePallette.xaml- I had the following set:
Green
Green
For some reason- it did not interfere with the formatting before 774. After 774- it removes the formatting from these categories for some reason. Removing them caused them to work as expected in 802 and beyond. Hopefully this helps someone else.
I try run this from Xamarin.Forms.Sample repo https://github.com/xamarin/xamarin-forms-samples
Under folder UserInterface/PlatformSpecifics with :
ios:Application.EnableAccessibilityScalingForNamedFontSizes="false"
This flag is set to disable scaling of fontsize, however when I go to ios settings Larger Font Size and increase the size, look like that disable doesn't work at all, what do I miss here? or is it a bug?
Check this PR , it adds the functionality of disable accessibility sizing for named font sizes .
You can see in that class it affects the font size returned from GetNamedSize method, and check the following screen shot you could find out those controls which will be affected.
So PlatformSpecifics API only works on some specifc controls , it does not affect ViewCell and TableSection in your scenario .
As a workaround , you could replace TextCell with ViewCell and place a Label inside it ,something like
<ViewCell>
<Label Text="fdhfihdif">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding}" CommandParameter="{}"/>
</Label.GestureRecognizers>
</Label>
</ViewCell>
Consider raising feature request on github what you want .
In my xamarin.forms app i am using this entry:
<Entry
x:Name="entry_passwort_login"
PlaceholderColor="#ffffff"
TextColor="#ffffff"
IsPassword="true"
FontFamily="Galvji-01.ttf"
HorizontalOptions="FillAndExpand"
VerticalOptions="Start"
Placeholder="Passwort"/>
It looks great on Android, since the background is black. I also made changes in the styles.xml to get the highlighted color of the element to yellow.
But iOS renders an entry with a white box in the background:
As you can see, therefore neither the placeholder NOR the actual text that is written on them is visible. But I dont want to change the whole background.
How can I make the placeholder and text color of the entries for IOS ONLY black, while leaving all the android set up untouched?
Thank you!
You can sepecific other color in the iOS. For example, I set it PlaceholderColor to Red in iOS like following code.
<Entry
x:Name="entry_passwort_login"
TextColor="#ffffff"
FontFamily="Galvji-01.ttf"
IsPassword="true"
HorizontalOptions="FillAndExpand"
VerticalOptions="Start"
Placeholder="Passwort">
<Entry.PlaceholderColor>
<OnPlatform x:TypeArguments="Color">
<On Platform="iOS" Value="Red"></On>
<On Platform="Android" Value="#ffffff"></On>
</OnPlatform>
</Entry.PlaceholderColor>
</Entry>
I have this binding in my XAML
<RowDefinition Height="{Binding HasValue, Converter={StaticResource BoolToIntConverter}, ConverterParameter=33}" />
but it doesn't seem to work as straight-forward as I assumed. When rendering the page the height of the row is evaluated to a star value actually as opposed to 33.
Any trick I am missing?
The binding works if the converter returns a value of type GridLength explicitly...
I am having a weird problem with JavaFX and Font Awesome, which I'm having trouble pin-pointing the cause of. The problem is further complicated because I can't really share the code, and no matter how much I've tried to replicate the problem in a simpler case - I couldn't.
The problem is as follows - I have a TableView, in which every column has a Hyperlink as a graphic, with a Font Awesome glyph. This all works well, except for one stage - in this stage, the first time it is shown everything is fine, but the second time three of the columns' glyphs revert to squares. This is weird, as all columns use the same glyph of the same font.
Here are before and after pictures - notice the glyphs are all the same, but the left ones become squares:
The glyphs and font are set through FXML, and are the same for all columns:
<TableColumn fx:id="col1" prefWidth="83.0" text="Column 1"><graphic>
<Hyperlink onAction="#requestFilter" text="" visited="true">
<font>
<Font name="FontAwesome Regular" size="13.0" />
</font></Hyperlink>
</graphic>
</TableColumn>
<TableColumn fx:id="col2" prefWidth="138.0" text="Column 2"><graphic>
<Hyperlink onAction="#requestFilter" text="" visited="true">
<font>
<Font name="FontAwesome Regular" size="13.0" />
</font></Hyperlink>
</graphic>
</TableColumn>
<TableColumn fx:id="col3" prefWidth="59.0" text="Column 3"><graphic>
<Hyperlink onAction="#requestFilter" text="" visited="true">
<font>
<Font name="FontAwesome Regular" size="13.0" />
</font></Hyperlink>
</graphic>
</TableColumn>
<TableColumn fx:id="col4" prefWidth="103.0" text="Column 4"><graphic>
<Hyperlink onAction="#requestFilter" text="" visited="true">
<font>
<Font name="FontAwesome Regular" size="13.0" />
</font></Hyperlink>
</graphic>
</TableColumn>
Here the last two columns are the ones who lose their glyph (the scene is in right-to-left orientation).
Furthermore - it is always the last three columns that lose their glyph, that is - if on the first showing I reorder the column, the columns I leave last in the table (to the left, again - the scene is right-to-left) will lose their glyph the next time the stage is shown. Subsequent hiding/showing won't lost any more glyphs.
I show the stage with Stage#showAndWait, and I keep a reference to the stage, so it is only created once.
I realize it is hard to help when I can't share any code (client confidentiality), so what I'm asking is - where can I look to see what is happening? How come some instances of the same glyph disappear and others don't? Did anyone else encounter something like this? What was the underlying reason?
Edit: I have added debug prints of the hyperlinks' properties, and indeed with the second showing the font reverts to "System" for the last three columns. Looking for the source of the change, I have added a change listener, and put breakpoint inside it. The stack shows that the change happens inside applyCSS, after a lot of internal calls following showAndWait, non of them in my own code (i.e. - all in the JavaFX library code). It seems for some reason JavaFX decides to reset the font definition of some of the controls, although they are all defined exactly the same! This is corroborated by the fact that it doesn't matter which table-column it is, but where it is in the TableView.
So it seems like some erroneous JavaFX behavior is resetting the font to the default ("-fx-font") instead of the one defined on the node itself. Anyone know enough about the JavaFX CSS logic to help find the bug?
All hyperlinks have no custom styles or classes set, and only the 'visited' pseud-class set.
Edit 2: Adding a font name to the CSS fixes the issue. I would still love to find the source of the bug (which, I am certain, is in the JavaFX CSS handling), but it is too messy for me to go through it now. The CSS I use is:
.table-column .hyperlink {
-fx-font-family: "FontAwesome";
}
My bet that some code or css styling somewhere is changing Hyperlink font or style or css class. You can use some debugging. For example, you can add button near your TableView to print some debug information, something like this:
Button b = new Button("Debug");
b.setOnAction(e->{
TableView<?> tv = (TableView) scene.lookup("#tableView");
for(TableColumn<?,?> tc : tv.getColumns()) {
Hyperlink link = (Hyperlink)tc.getGraphic();
System.out.println("Column "+tc.getText());
System.out.println("link text: "+link.getText());
System.out.println("link Style: "+link.getStyle());
System.out.println("link CSS Classes: " + link.getStyleClass());
System.out.println("link CSS Pseudo Classes: " + link.getPseudoClassStates());
System.out.println("link Font: " + link.getFont());
}
});
Then click this button when table looks normal and save debug info somewhere. Click again when squares appear and compare the output with first one. Also inspect your css files and code that can access TableColumns, if any of those can affect Hyperlink styling.
EDIT
Well, it seems pretty strange to me, that JavaFX all by itself internal logic decided to recalculate and reapply css styles only for specific columns and not for the whole scene (EDIT: according to JavaFX CSS Reference it actually can reapply css only on specific branches in scene graph). I still think that the root cause somewhere in your styling or code. I doubt anyone could point you to a place to look at, as it seems very specific problem and, as you said, can't be reproduced in simple scenario. Maybe you perform some specific layouting logic, recreating/replacing table nodes or somthing similar, hard to say not seeing the code.
Anyway, if you just want to solve the problem, I would suggest to set hyperlink font style in css file, not in fxml. This way you ensure that even in case of css recalculation or any layout manipulations style will be the same. It would be the right way to do it anyway.
If you want to dig up the real cause of a problem, I afraid you have to spend some happy hours with your debugger:) I would start from searching the differences between normal column and column with broken font. Why do they treated in different ways?