Search code examples
iosxamlxamarin.forms

BoxView not visible in iOS


I created the following BoxView in my App.xaml (as a separator)...

<Style x:Key="BoxViewGray" TargetType="BoxView">
      <Setter Property="HeightRequest" Value="0.2"/>
      <Setter Property="Color" Value="Gray"/>
</Style>

...and use it like so in my Page:

<BoxView Style="{StaticResource BoxViewGray}" />

Straight forward and it works out quite fine with Android (Release & Debug) though when I debug the iOS Solution, it's not visible. Maybe as an additional info: I don't have a physical Mac for debugging but use Macincloud instead of. Don't have a physical device (iPhone etc) either.

Update: The complete XAML code of the page:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:vm="clr-namespace:ErzengelMichael.ViewModels"
             x:Class="ErzengelMichael.Views.EinstellungenPage"
             Title="{Binding Rosenkranz[0].TabBarTitleSettings}" >

    <ContentPage.BindingContext>
        <vm:RosenkranzViewModel />
    </ContentPage.BindingContext>

    <ContentPage.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
            <GradientStop Offset="0.1" Color="Purple" />
            <GradientStop Offset="0.9" Color="DarkSlateBlue" />
        </LinearGradientBrush>
    </ContentPage.Background>


    <ScrollView>
        <StackLayout Padding="10" >
            <StackLayout Padding="5">
                <BoxView Style="{StaticResource BoxViewGray}" />
                <Label Text="{Binding Rosenkranz[0].SettingsText}" 
                        HorizontalOptions="Center" FontSize="24" TextColor="White"
                        BackgroundColor="Transparent" Margin="0,0,0,5" />
                
                <BoxView Style="{StaticResource BoxViewGray}" />
            </StackLayout>

            <StackLayout Orientation="Vertical" Padding="10"  >
                <StackLayout HorizontalOptions="Center" Orientation="Horizontal" Spacing="20" Padding="10">
                    <ImageButton CornerRadius="10" HeightRequest="80" BackgroundColor="Transparent" CommandParameter="French" 
                                Command="{Binding ChangeLanguageCommand}" Source="france.jpg" VerticalOptions="Center"  />
                    <ImageButton CornerRadius="10" HeightRequest="80" BackgroundColor="Transparent" CommandParameter="German" 
                                Command="{Binding ChangeLanguageCommand}" Source="germany.jpg" VerticalOptions="Center" />
                </StackLayout>

                <StackLayout HorizontalOptions="Center" Orientation="Horizontal" Spacing="20" Padding="10" >
                    <ImageButton CornerRadius="10" HeightRequest="80" BackgroundColor="Transparent" 
                                CommandParameter="English" Command="{Binding ChangeLanguageCommand}" Source="usa.jpg" VerticalOptions="Center" />
                    <ImageButton CornerRadius="10" HeightRequest="80" BackgroundColor="Transparent" CommandParameter="Spanish" 
                                Command="{Binding ChangeLanguageCommand}" Source="spain.jpg" VerticalOptions="Center" />
                </StackLayout>

                <StackLayout HorizontalOptions="Center" Orientation="Horizontal" Spacing="20" Padding="10" >
                    <ImageButton CornerRadius="10" HeightRequest="80" BackgroundColor="Transparent" CommandParameter="Italian" 
                                Command="{Binding ChangeLanguageCommand}" Source="italy.jpg" VerticalOptions="Center" />
                    <ImageButton CornerRadius="10" HeightRequest="80" BackgroundColor="Transparent" CommandParameter="Portugese" 
                                Command="{Binding ChangeLanguageCommand}" Source="portugal.jpg" VerticalOptions="Center" />
                </StackLayout>
            </StackLayout>            

            <!--#region IMPRESSUM -->
            <StackLayout Spacing="15" Padding="10" HorizontalOptions="Center" VerticalOptions="Center">
                <BoxView Style="{StaticResource BoxViewGray}"/>
                <Label HorizontalOptions="Center" HorizontalTextAlignment="Center" Text="Development and Design by [email protected]" TextColor="White" />
                <Label HorizontalOptions="Center" Text="Version 1.0" TextColor="White" FontAttributes="Italic"/>
                <Label HorizontalOptions="Center" TextColor="White" HorizontalTextAlignment="Center"
                        Text="Images used in this App are in the public domain worldwide."/>

                <StackLayout Orientation="Horizontal" Spacing="0" HorizontalOptions="Center" >
                    <Label HorizontalTextAlignment="Center" >
                        <Label.FormattedText>
                            <FormattedString>
                                <Span Text="&#xf4ec;" FontFamily="FA-B" TextColor="White" CharacterSpacing="20" FontSize="24" />
                                <Span Text="&#xf4ed;" FontFamily="FA-B" TextColor="White" FontSize="24"  />
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                </StackLayout>

                <BoxView Style="{StaticResource BoxViewGray}" />

            </StackLayout>
            <!--#endregion-->

        </StackLayout>
    </ScrollView>
</ContentPage>




Solution

  • That because you set the HeightRequest as 0.2(which is less than 0.5) . So in iOS it will been ignored on some device because of screen resolution .

    So you would better set it as 0.5 or higher on iOS device .

      <Style x:Key="BoxViewGray" TargetType="BoxView">
            <Setter Property="HeightRequest">
    
                <Setter.Value>
                    <OnPlatform iOS="0.5" Android="0.2" />
                </Setter.Value>
    
            </Setter>
            <Setter Property="Color" Value="Gray"/>
        </Style>