Using OnIdiom with AbsoluteLayout

Question

I have circular buttons and am trying to change the size of them depending on if they are on phone or tablet using AbsolutLayout.

Here is my xaml:

<Frame BackgroundColor="{StaticResource ThemeColor}" Padding="0" CornerRadius="40" AbsoluteLayout.LayoutBounds="{StaticResource HomeCircle}" AbsoluteLayout.LayoutFlags="PositionProportional"> 
    <Label Text="&#xf5a0;" HorizontalOptions="Center" VerticalOptions="Center" Style="{StaticResource Icon}" TextColor="{StaticResource LabelColor}"/> 
    <Frame.GestureRecognizers> 
        <TapGestureRecognizer Tapped="Directions"/> 
    </Frame.GestureRecognizers> 
</Frame> 

<AbsoluteLayout.Resources> 
    <ResourceDictionary> 
        <OnIdiom x:Key="HomeCircle" x:TypeArguments="Frame" Phone=".85,.375, 80, 80"
                                                            Tablet=".85,.375, 120, 120"/> 
    </ResourceDictionary> 
</AbsoluteLayout.Resources>

I looked at this resource and it did not work:

How to use attached properties such as Grid.Row, AbsoluteLayout.LayoutFlags to OnPlatform tag in Xamarin Forms

Edit: Have tried TypeArguments of Rectangle, AbsoluteLayout, and Frame and they all give this error:

Error XFC0009 No property, BindableProperty, or event found for "Phone", or mismatching type between value and property.

Edit: Have also looked at this thread and it provides the same error:

https://xamarin.github.io/bugzilla-archives/55/55183/bug.html

Answer 1

I faced the same problem in the past. My solution is to set the AbsoluteLayout bounds by Binding in place of StaticResource.

In the ViewModel:

public Xamarin.Forms.Rectangle HomeCircle => Xamarin.Forms.Device.Idiom == TargetIdiom.Phone ? new Xamarin.Forms.Rectangle(0.5f, 0.5f, 80, 80) : new Xamarin.Forms.Rectangle(0.5f, 0.5f, 120, 120);

In the yaml:

<AbsoluteLayout>
   <Frame BackgroundColor="Gray"
      Padding="0"
      CornerRadius="40"
      AbsoluteLayout.LayoutBounds="{Binding HomeCircle}"
      AbsoluteLayout.LayoutFlags="PositionProportional">
      <Label Text="TEST"
         HorizontalOptions="Center"
         VerticalOptions="Center"
         TextColor="Black"/>
         <Frame.GestureRecognizers>
            <TapGestureRecognizer Command="{Binding DoSomething}"/>
         </Frame.GestureRecognizers>
      </Frame>
   </AbsoluteLayout>

Anyway AbsoluteLayout.LayoutBounds requires Rectangle, and markup doesn't always allow everything :)