How can I get iOS and Android the same? I've tried endless combinations.
On iOS I have got it perfect - when it first loads, the first image in sequence is dead centre on the screen, and there is just enough showing for PeekInsert for the next one. When you flip, they remain equal
On Android, I've failed to get the first image (when there is nothing to the 'left' of it) to be dead centre - if I want PeekInsert to show at all, I cannot seem to help it being offset. once you start flipping, so long as there is one either side, it works OK
I am using an image in a grid of 100* width and height, and then these parameters (so far - as I said Android isn't the same, I know my values are different as whatever happens the same inputs don't translate into same result on each platform, but iOS as I have written it here is 'correct')
<CarouselView.PeekAreaInsets>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="50, 50, 50, 50" />
<On Platform="Android" Value="0,0,200,0" />
</OnPlatform>
</CarouselView.PeekAreaInsets>
<Grid.Padding>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="10, 10, 10, 10" />
<On Platform="Android" Value="20, 20, 20, 20" />
</OnPlatform>
</Grid.Padding>
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.
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.
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 grid:
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.07*" />
<ColumnDefinition Width="1.2*" />
<ColumnDefinition Width="0.05*" />
</Grid.ColumnDefinitions>
</Grid>
This Grid is part of titleview in android and ios. I need to center the icon in the middle column but since ios and android handle the title view differently the icon in the middle does sit slightly more left bound on ios while it sits in the center on android. I would need to set different colum widths for each platform.
Is this doable?
Thank you!
You can use following code to achieve for different Colum Definitions for different platforms (android, ios).
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition >
<ColumnDefinition.Width>
<OnPlatform x:TypeArguments="GridLength">
<On Platform="iOS" Value="1.2*"></On>
<On Platform="Android" Value="2.07*"></On>
</OnPlatform>
</ColumnDefinition.Width>
</ColumnDefinition>
<ColumnDefinition Width="1.2*" />
<ColumnDefinition Width="0.05*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="By default, a Grid contains one row and one column." />
</Grid>
I am looking for an equivalent of constraint layout from Android in Xamarin forms. Is there any? How can I achieve this in XAML? I have been looking around and have not found anything useful.
Thank you so much for any recommendations.
In general, for my base page's layout I use a grid (but there are many ways to handle a page layout...)
Inside this grid you can put your UI elements. But what is interesting is that you can set Width x Height for each rows and columns of the grid.
Then you can also set margin properties for each of your UI elements.
I'm not familiar with Android design but in Xamarin Forms you can have something like that:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
<RowDefinition Height="0.5*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.25*" />
<ColumnDefinition Width="0.75*" />
</Grid.ColumnDefinitions>
<Label Text="Top Left" Grid.Row="0" Grid.Column="0" Margin="5,10,5,10" />
<Label Text="Top Right" Grid.Row="0" Grid.Column="1" />
<Label Text="Bottom Left" Grid.Row="1" Grid.Column="0" />
<Label Text="Bottom Right" Grid.Row="1" Grid.Column="1" />
</Grid>
This sample generates a layout with 4 parts (2 rows, 2 columns). Rows will have the same height and fill the screen. 2nd column will be 3x larger than 1st one and both will fill the screen.
Margin="5,10,5,10" ensure that an empty space of 5 'pixels' is always present before the label, 10 'pixels' are present on top the label ...
There are several controls to manage layout, like StackLayout or Listview (to manage items). If you have a more concrete example to implement, don't hesitate to complete your question.
I suggest you to check this documentation, you will find all you need !
Xamarin Forms layout documentation