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.
Related
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 am working on a cross-platform project using Xamarin forms. I am using carouselview to display an image button. See the code snippets below. The customImageButtonStyle sets to Aspect.Aspect.Fit. Initially it works as intended. However, after the image is changed, the image is still displayed, but smaller, ie. no longer does Aspect.Fit. If I place the same code outside the carouselview, it works without such a issue.
<StackLayout Grid.Row="0" Grid.Column="1" Orientation="Vertical" HorizontalOptions="CenterAndExpand">
<Grid x:Name="relayGrid" HorizontalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="4.0*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<views:CustomImageButton x:Name="relayButton" Source="{Binding RelayIcon}" Grid.Row="0" Grid.Column="0"
Style="{StaticResource customImageButtonStyle}"
Command="{Binding NavigateCommand}" CommandParameter="{x:Type views:RelayPage}" />
<Label Text="RELAYS" Grid.Row="1" Grid.Column="0" Style="{StaticResource deviceHomeBottomTextStyle}" />
</Grid>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding NavigateCommand}" CommandParameter="{x:Type views:RelayPage}" />
</StackLayout.GestureRecognizers>
</StackLayout>
</Grid>
</x:Array>
</controls:CarouselViewControl.ItemsSource>
Please note this issue is also logged at https://github.com/alexrainman/CarouselView/issues/561
It seems this is a Xamarin forms issue. I've tried to replace the image button with an image, the problem goes away. It seems sometimes AspectFit doesn't work for ImageButton when the bound image changes from a view model.
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
I've seen quite a few unanswered posts on this topic, yet I'm still inclined to believe someone on here as figured this out and is holding out on the rest of us.
I have a DataGrid that contains a mix of template columns and text columns. I just need a way of binding the headers to properties in the viewmodel so that I can use different strings for different languages.
I've seen WPF datagrid header text binding and every post linked from it. None of the methods suggested here work in Silverlight.
Does no one have any ideas?
I've recently spent a bit of time working on this too, here is how I got it working for other peoples benefit.
First declare namespace up top so I can specify it short hand in the xaml.
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
Then I declare header styles as static resources up top to keep the datagrid xaml clean:
<navigation:Page.Resources>
<Style x:Key="NameStyle" TargetType="sdk:DataGridColumnHeader">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding Path=LocalizedStrings.Name, Source={StaticResource Language}}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="DescriptionStyle" TargetType="sdk:DataGridColumnHeader">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding Path=LocalizedStrings.Description, Source={StaticResource Language}}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</navigation:Page.Resources>
Then in your datagrid xaml you can simply set your DataGridTextColumns Header style to your static resource header style.
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn Width="Auto" FontSize="11" MinWidth="100" Binding="{Binding Name}" HeaderStyle="{StaticResource NameStyle}" />
<sdk:DataGridTextColumn Width="1*" FontSize="11" Binding="{Binding Description}" HeaderStyle="{StaticResource DescriptionStyle}" />
</sdk:DataGrid.Columns>
My original solution was from this post: Dynamically setting the Header text of a Silverlight DataGrid Column
Just tidied it up a bit as I had 15 column headers to set.