We Keep Coding

iOS 14 App freezes when Visual="Material" in Entries with IsPassword="True"

When you are using Xamarin.Forms.Visual.Material package and create a style like this:
<Style
TargetType="Entry">
<Setter
Property="TextColor"
Value="{StaticResource OnSurfaceColor}" />
<Setter
Property="PlaceholderColor"
Value="{StaticResource OnSurfaceColor}" />
<Setter
Property="BackgroundColor"
Value="Transparent" />
<Setter
Property="FontSize"
Value="{StaticResource FontSizeNormal}"/>
</Style>
And create a layout like this:
<Frame
Margin="16,24">
<StackLayout
Margin="4,8"
Spacing="0">
<Entry
Visual="Material"
Text="{Binding UserName}"
Keyboard="Email"
Placeholder="{i18n:Translate signIn_txtUserName_placeholder}" />
<Entry Visual="Material"
x:Name="txtPassword"
IsPassword="True"
Text="{Binding Password}"
Placeholder="{i18n:Translate signIn_txtPassword_placeholder}" />
</StackLayout>
</Frame>
App freezes ... When I have changed color between entrys, but It's not work. The first that screen it work, but when I back to it, My iOS 14 App freezes . 1: Login, Screen 2: Home, From App run the first -> Login -> Home, It's work! But Form Home -> Logout back to Login, iOS 14 App freezes :((( Someone help me ?
*Please, thanks!

I have the same problem and I can fix it using style line instead style for this entry. And I don't edit the font, for example in my case, on the style had setted the font family and it doesn't like now with iOS 14... So I remove the font family for this entry and work

I had the same problem and had to remove MaterialComponents textfields.
Looks like the issues have been solved in version 116.0 of MaterialComponents. But it's not available for some reason. Please refer : GitHub

Make some OnIdiom and OnPlatform StaticResource

I want to use StaticResource and benefits from auto complete of VS 2017 by using some syntax like this if it is exist:
<x:Double x:Key="NormalSpacing">
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>
<OnPlatform x:TypeArguments="x:Double" iOS="7" Android="3" />
</OnIdiom.Phone>
<OnIdiom.Tablet>
<OnPlatform x:TypeArguments="x:Double" iOS="15" Android="10" />
</OnIdiom.Tablet>
</OnIdiom>
</x:Double>
shortly I want to give the key to the main tag which contain OnIdiom and OnPlatform tags.

Use a style for auto complete with the compact OnIdiom and OnPlatformsyntax:
<Style x:Key="stackLayoutStyle" TargetType="StackLayout">
<Setter Property="Spacing"
Value="{OnIdiom
Phone = {OnPlatform iOS=7, Android=3 },
Tablet = {OnPlatform iOS=15, Android=10 }}" >
</Setter>
</Style>
...
<StackLayout Style="{StaticResource stackLayoutStyle}">
...
</StackLayout>

Xamarin Forms - Change Cursor to Wait Cursor

In most desktop apps, if you're waiting for something, the mouse cursor will change to a wait cursor. Obviously, phones are a bit different. But, in UWP land, we'd like the mouse cursor to change to a wait cursor while async operations are occurring.
Is there a way to do this in standard Xamarin Forms? Or, with a 3rd party library?
The hope would be that on phones, there would be some other visual indicator that something is occurring. I.e. keyboard colour changes or something similar.
If not, I'm guessing I'll have to implement some dependency injected code for each platform. Any tips?

Not an answer to your UWP question, but this is how you can handle things on phone:
You could add a Grid over the whole page and make it grey and half transparent so the rest of your page gets "greyed out". Then add an ActivityIndicator to the middle of the Grid to indicate something is loading. Set IsVisible of the Grid to a bool value that indicates that something is loading/happening.
This is what I got on one of my pages:
<Grid BackgroundColor="##60000000"
IsVisible="{Binding IsLoading}">
<Grid VerticalOptions="CenterAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*" />
<ColumnDefinition Width="9*" />
<ColumnDefinition Width=".5*" />
</Grid.ColumnDefinitions>
<Frame Grid.Column="1"
HorizontalOptions="Center"
VerticalOptions="Center"
Padding="0"
HasShadow="True"
OutlineColor="#e6e6e6">
<Grid BackgroundColor="White"
RowSpacing="0"
ColumnSpacing="0">
<StackLayout>
<ActivityIndicator IsRunning="true"
Margin="10"
HorizontalOptions="Center"
VerticalOptions="Center" />
<Label Text="{i18n:Translate Text=loading_contacts}"
Margin="20,0,20,10"
HorizontalOptions="Center"
VerticalOptions="Center"/>
</StackLayout>
</Grid>
</Frame>
</Grid>
</Grid>

Mine is a similar answer to Dennis, with a bit more re-use.
I created a control template in App.xaml
<ControlTemplate x:Key="ActivityIndicatorTemplate">
<Grid>
<ContentPresenter />
<StackLayout Style="{StaticResource BlockingPanel}"
IsVisible="{TemplateBinding BindingContext.IsBusy}">
<ActivityIndicator Style="{StaticResource ActivityIndicatorStyle}"
IsVisible="{TemplateBinding BindingContext.IsBusy}"
IsRunning="{TemplateBinding BindingContext.IsBusy}" />
</StackLayout>
</Grid>
</ControlTemplate>
Here are the styles
<Style x:Key="BlockingPanel" TargetType="StackLayout">
<Setter Property="BackgroundColor" Value="{StaticResource BlockingColor}" />
<Setter Property="HorizontalOptions" Value="FillAndExpand" />
<Setter Property="VerticalOptions" Value="FillAndExpand" />
</Style>
<Style x:Key="ActivityIndicatorStyle" TargetType="ActivityIndicator">
<Setter Property="Color" Value="White" />
<Setter Property="HorizontalOptions" Value="CenterAndExpand" />
<Setter Property="VerticalOptions" Value="CenterAndExpand" />
</Style>
<Color x:Key="BlockingColor">
<x:Arguments>
<x:Double>0</x:Double>
<x:Double>0</x:Double>
<x:Double>0</x:Double>
<x:Double>0.75</x:Double>
</x:Arguments>
</Color>
Then you can use it on any page like this
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Incident.Pages.LoginPage"
ControlTemplate="{StaticResource ActivityIndicatorTemplate}"
Title="Login">
...
</ContentPage>

Rendering issue of WPF app in Windows 7 OS and WIndows 8 OS

The following XAML:
<ProgressBar Height="10" BorderBrush="#898989" BorderThickness="2"
Foreground="#f1592a" Background="#363636" Margin="15,0"
VerticalAlignment="Center" HorizontalAlignment="Stretch" />
...generates the following styles:
How can I solve this difference in rendering?
I tried to make progress bar in 2 styles one with styling from Resource and one with inline style , BUt still getting the same behaviour . Here is the xaml i used and output
<Window.Resources>
<Style x:Key="ProgressStyleMy" TargetType="ProgressBar">
<Setter Property="BorderBrush" Value="#898989" ></Setter>
<Setter Property="BorderThickness" Value="2" ></Setter>
<Setter Property="Foreground" Value="#f1592a" ></Setter>
<Setter Property="Background" Value="#363636" ></Setter>
</Style>
</Window.Resources>
<Grid>
<StackPanel Background="Green">
<StackPanel Orientation="Horizontal">
<Button Margin="10" Click="Button_Click">Start</Button>
<Button Margin="10" Click="Button_Click_1">Start2</Button>
</StackPanel>
<ProgressBar Value="{Binding Progress}" Height="10" BorderBrush="#898989" BorderThickness="2" Foreground="#f1592a" Background="#363636" Name="pgsbar"
Margin="15,10" VerticalAlignment="Center" HorizontalAlignment="Stretch" >
</ProgressBar>
<ProgressBar Value="{Binding Progress}" Height="10" Style="{StaticResource ResourceKey=ProgressStyleMy}" Name="pgsbar2"
Margin="15,10" >
</ProgressBar>
</StackPanel>
</Grid>

What you're referring to is the Windows look and feel. The top image demonstrates the default styling (Chrome) that is provided by the Windows 7, while the bottom one (Metro) has to do with Windows 8. If you want to achieve Metro look in Windows 7, you'll have to edit the control template.
If you don't mind third-party resources, there is an excellent collection of Metro-styled controls over at http://mahapps.com/. Here's the GitHub link: https://github.com/MahApps/MahApps.Metro I figure it's better than trying to do it yourself, since someone else has done it already.
Here's the list of all of the controls available in the toolkit: http://mahapps.com/controls/
Click on the desired ones to see previews and how to get them working in your application.

Is there a way to display items of varying width in wpf wrappanel

I'm trying something like a windows 8 tiles and want to display tiles of varying width and/or height. WrapPanel makes each column equal width and height leaving blank spaces around the smaller items. Is there a way or a panel to display items much like a StackPanel where each items can have individual dimensions and wrap like a WrapPanel?
Edit:
This is my ItemsControl. I replaced the Tile DataTemplate with a simple Border and TextBlock. Width is auto and Tiles looks fine except WrapPanel create equal sized cells.
<ItemsControl ItemsSource="{Binding Path=Contents}" HorizontalContentAlignment="Left">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Background="#B1DBFC" Height="200px" BorderBrush="#404648" Margin="5">
<TextBlock VerticalAlignment="Center" Text="{Binding Path=Name}" />
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
You can see from the image that the width of each column is the width of widest item.
If I set the width explicitly on the border, things get more ugly.

The behaviour you are looking for is the default behaviour of the WrapPanel as can be seen from the following sample.
<WrapPanel >
<WrapPanel.Resources>
<Style TargetType="{x:Type Rectangle}">
<Setter Property="Width"
Value="80" />
<Setter Property="Height"
Value="80" />
<Setter Property="Margin"
Value="3" />
<Setter Property="Fill"
Value="#4DB4DD" />
</Style>
</WrapPanel.Resources>
<Rectangle Width="150" />
<Rectangle />
<Rectangle />
<Rectangle />
<Rectangle Width="200"/>
<Rectangle />
<Rectangle />
<Rectangle />
<Rectangle Width="220"/>
<Rectangle />
<Rectangle />
</WrapPanel>
Which produces the following result:
As you can see, The width of each item is honoured.
Your problem is caused by setting the orientation of the WrapPanel to Vertical in your template. This is laying out the items from top-to-bottom rather than left-to-right which means that it is the Height property that you need to be setting (or you could revert back to horizontal layout as in my example).
Compare your output to my screenshot where the panel is set to horizontal orientation; each row is the size of the highest Rectangle. Don't believe me? Try setting one of the Rectangle's Height property to a larger value and you will observe that the row size will increase and the Rectangles no longer line up vertically.
Reading your comments I think the best way to get started is to do the following:
Have a WrapPanel that lays out its content horizontally.
Items should have uniform Height.
Constrain the Height of the WrapPanel to a certain size so that you don't get vertical scrollbars.
The height of your WrapPanel should be worked out using the following formula:
((Height of item + Top Margin + Bottom Margin) x Number of rows))
The width of each item also requires a bit of thought so that the panel lays the items out horizontally like the metro interface (lined up rather than staggered).
There are two tile sizes; the small one is 80px wide and the large one is 166px wide.
The width of the large tile is worked out like this:
(item width * 2) + (left margin + right margin)
This ensures the tiles line up correctly.
So now my XAML looks something like this:
<ScrollViewer HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Disabled">
<StackPanel Orientation="Horizontal"
Margin="10,0">
<StackPanel.Resources>
<Style TargetType="{x:Type Rectangle}">
<Setter Property="Width"
Value="80" />
<Setter Property="Height"
Value="80" />
<Setter Property="Margin"
Value="3" />
<Setter Property="Fill"
Value="#4DB4DD" />
</Style>
<Style TargetType="{x:Type WrapPanel}">
<Setter Property="Margin"
Value="0,0,25,0" />
<Setter Property="MaxWidth"
Value="516" />
</Style>
</StackPanel.Resources>
<WrapPanel Height="258">
<Rectangle Width="166" />
<Rectangle />
<Rectangle Width="166" />
<Rectangle />
<Rectangle Width="166" />
<Rectangle />
<Rectangle />
<Rectangle />
<Rectangle />
<Rectangle Width="166" />
<Rectangle />
</WrapPanel>
<WrapPanel Height="258">
<Rectangle />
<Rectangle Width="166" />
<Rectangle />
<Rectangle />
<Rectangle />
<Rectangle />
<Rectangle />
<Rectangle Width="166" />
<Rectangle />
</WrapPanel>
</StackPanel>
</ScrollViewer>
Which produces the following result:
This should give you enough information to start to re-factor this into a full control. If you do this then keep the following in mind:
The layout properties (small item size, large item size, gaps etc) should be calculated rather than hard coded so that if you want to change, for example, the margins, the layout will still work correctly (I.E. the tiles will still line up).
I would limit the number of 'tiles' that can be displayed (in the current example, if the tiles do not fit in the layout they are simply hidden which is probably not what you want).