MacOS: Anyone having trouble with having to specify width requests?

CaptainXamtasticCaptainXamtastic GBUniversity ✭✭✭
edited February 8 in Xamarin.Forms

Hi, I'm finding that I have to specify width and height requests for Grids and Images, when doing Xaml layout for MacOS - yet for everything else, leaving things to * and Auto expansion works.

This is truly a Cross-Platform project, Android, iOS, UWP, WPF, and MacOS, and Xaml that works well elsewhere has me creating specific OnPlatform Xaml just for MacOS.

Does anyone have any strategy recommendations?

Kind regards!

Answers

  • coolrjmcoolrjm INMember ✭✭✭

    Hi,

    Can you please provide some sample XAML coding that shows differently (grid and images) on the different platforms. Unless we see the code it is hard to guess where the code is wrong.

    Thanks,

  • CaptainXamtasticCaptainXamtastic GBUniversity ✭✭✭
    edited February 8

    @coolrjm said:
    Hi,

    Can you please provide some sample XAML coding that shows differently (grid and images) on the different platforms. Unless we see the code it is hard to guess where the code is wrong.

    Thanks,

    Here's an image from UWP, it has zero height on MacOS unless the Height and Width requests are put in:

    The Xaml that works on other platforms is this without the Height and Width Requests, this only works on MacOD with the Height and Width requests.

            <OnPlatform x:TypeArguments="Grid">
                    <OnPlatform.Platforms>
                        <On Platform="macOS">
                            <Grid IsVisible="{Binding IsHeaderVisible}" RowSpacing="0" BackgroundColor="{StaticResource DetailPageBackgroundColor}" HeightRequest="200">
                                <StackLayout Grid.Row="0" Orientation="Vertical" Spacing="0" VerticalOptions="Start" HeightRequest="200">
                                    <Grid HeightRequest="200">
                                            <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="Auto" />
                                            </Grid.ColumnDefinitions>
                                            <Image Aspect="AspectFill" Grid.ColumnSpan="3" Source="{extensions:ImageResource SMSApp.Images.header.jpg}" />
                                            <Image Grid.Column="0" Aspect="AspectFill" Source="{extensions:ImageResource SMSApp.Images.smart-logo-icon-152.png}" VerticalOptions="Center" Margin="20,0,0,0" HeightRequest="100" WidthRequest="100" />
                                            <Image Grid.Column="2" Aspect="AspectFill" Source="{extensions:ImageResource SMSApp.Images.solutions-badge-icon-152.png}" VerticalOptions="Center" Margin="0,0,20,0" HeightRequest="100" WidthRequest="100" />
                                    </Grid>
                                    <Label Text="Smart Event Systems ™"  FontSize="Micro" TextColor="{StaticResource Grey}" HorizontalTextAlignment="Center" Margin="0,10,0,0" IsVisible="{Binding IsTitleVisible}" />
                                    <Label AutomationId="PageTitle" Text="{TemplateBinding Title}" FontAttributes="Bold" HorizontalOptions="Center" Margin="0,0,0,5" IsVisible="{Binding IsTitleVisible}" />
                                </StackLayout>
                            </Grid>
                        </On>
                    </OnPlatform.Platforms>
            </OnPlatform>
    

    None of the HeightRequests or WidthRequests exist for the other platforms.

    Also, the following Templates in App.xaml allow a ListView to display each one via a DataTemplateSelector, each row just stacks on the previous in all the other platorms but expand hideously vertical on MacOS:

    (Background Colors put in so you can compare with the following image)

                <DataTemplate x:Key="ListH1DataTemplate">
                    <ViewCell>
                        <Grid Margin="10,20,10,10" BackgroundColor="Fuchsia">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="10" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="10" />                                
                            </Grid.ColumnDefinitions>    
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>                            
                            <Label Grid.Column="1" Text="{Binding Data.H1, Converter={StaticResource ListH1JsonConverter}}" FontSize="Large" VerticalOptions="Center" HorizontalOptions="Start" FontAttributes="Bold" LineBreakMode="WordWrap" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>  
    
                <DataTemplate x:Key="ListH2DataTemplate">
                    <ViewCell>
                        <Grid Margin="10,20,10,10" BackgroundColor="Lime">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="10" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="10" />                                
                            </Grid.ColumnDefinitions>    
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>                            
                            <Label Grid.Column="1" Text="{Binding Data.H2}" FontSize="Medium" VerticalOptions="Center" HorizontalOptions="Start" FontAttributes="Bold" LineBreakMode="WordWrap" />
                        </Grid>
                    </ViewCell>                
                </DataTemplate>  
    
                <DataTemplate x:Key="ListH3DataTemplate">
                    <ViewCell>
                        <Grid Margin="10,0,10,10" BackgroundColor="Navy">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="10" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="10" />                                
                            </Grid.ColumnDefinitions>    
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>                            
                            <Label Grid.Column="1" Text="{Binding Data.H3}" FontSize="Small" VerticalOptions="Center" HorizontalOptions="Start" FontAttributes="Bold" LineBreakMode="WordWrap" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>  
    
                <DataTemplate x:Key="ListParagraphDataTemplate">
                    <ViewCell>
                        <Grid Margin="10,10,10,10" BackgroundColor="Purple">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="10" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="10" />                                
                            </Grid.ColumnDefinitions>    
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>                            
                            <Label Grid.Column="1" Text="{Binding Data.Paragraph}" FontSize="Small" VerticalOptions="Center" HorizontalOptions="Start" FontAttributes="None" LineBreakMode="WordWrap" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>  
    
                <DataTemplate x:Key="ListBrochureDataTemplate">
                    <ViewCell>
                        <Grid Margin="10,20,10,10" BackgroundColor="Yellow">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="10" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="10" />                                
                            </Grid.ColumnDefinitions>    
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>                            
                            <Label Grid.Column="1" Text="Share Brochure" TextColor="Blue" FontSize="Small" VerticalOptions="Center" HorizontalOptions="End" FontAttributes="None" LineBreakMode="WordWrap" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>  
    
                <DataTemplate x:Key="ListBullet1DataTemplate">
                    <ViewCell>
                        <Grid Margin="20,5,10,5" BackgroundColor="Olive">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="10" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />                            
                                <ColumnDefinition Width="10" />                                
                            </Grid.ColumnDefinitions>    
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>   
                                <controls:FontAwesomeLabel
                                    Grid.Column="1"
                                    Text="{x:Static controls:Icon.FACircle}"
                                    HorizontalOptions="Center"
                                    VerticalOptions="Center"
                                    FontSize="7"
                                    TextColor="{StaticResource Black}"
                                    />  
                            <Label Grid.Column="2" Text="{Binding Data.Bullet1}" TextColor="Black" FontSize="Small" VerticalOptions="Center" HorizontalOptions="Start" FontAttributes="None" LineBreakMode="WordWrap" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>      
    

    However this ListView looks like this on the other platforms:

  • CaptainXamtasticCaptainXamtastic GBUniversity ✭✭✭

    Also, this is how the "Default" Master-Detail template looks when wired into MacOS:

  • CaptainXamtasticCaptainXamtastic GBUniversity ✭✭✭
    edited February 9

    @coolrjm I put in everything you requested, what do you think?

  • coolrjmcoolrjm INMember ✭✭✭

    Hi,

    Have you ever used this feature in your application

    <ContentPage.Padding> <OnPlatform x:TypeArguments="Thickness" iOS="5, 20, 5, 0" Android="8, 8, 8, 8" WinPhone="5, 0, 5, 0" /> </ContentPage.Padding>
    That will give some space around the edges so that it is visible within the screen. Let me know if that helps solve the problem.

    Thanks,

  • CaptainXamtasticCaptainXamtastic GBUniversity ✭✭✭

    Yes, but it's not the issue here, the issue is that the Xaml renders correctly in the other platforms but not MacOS, if one puts a margin around the edges, when they fix the bug you end up with double the margin. I put a bug report in today to the Xamarin Forms team.

  • NMackayNMackay GBInsider, University mod

    @CaptainXamtastic said:
    Yes, but it's not the issue here, the issue is that the Xaml renders correctly in the other platforms but not MacOS, if one puts a margin around the edges, when they fix the bug you end up with double the margin. I put a bug report in today to the Xamarin Forms team.

    You should post the issue here, it will help others.

  • CaptainXamtasticCaptainXamtastic GBUniversity ✭✭✭

    @NMackay said:

    @CaptainXamtastic said:
    Yes, but it's not the issue here, the issue is that the Xaml renders correctly in the other platforms but not MacOS, if one puts a margin around the edges, when they fix the bug you end up with double the margin. I put a bug report in today to the Xamarin Forms team.

    You should post the issue here, it will help others.

    We've put MacOS on hold until it comes out of preview, we are not interested in progressing the platform until a ListView can easily render a list.

    Here's my bug report: https://github.com/xamarin/Xamarin.Forms/issues/5217

    Here's a list of outstanding bugs (the list is horrendous): https://github.com/xamarin/Xamarin.Forms/issues

    Here's the MacOS platform status statement: https://github.com/xamarin/Xamarin.Forms/wiki/Platform-Support-macOS-Status#status

Sign In or Register to comment.