maui
maui copied to clipboard
dotnet
Border with shadows not working on iOS and Mac but works on Android and Windows
Description
Above 5 case for different platforms. Only for iOS and Mac, at startup the border is hidden.
Case 1: On iOS Simulator at startup (Light mode): Border is hidden (Why?)
Case 2: On iOS Simulator after change to dark mode: Border is ok
Case 3: On iOS Simulator changing again to light mode: Border is ok
Same thing happens in Mac
Case 4: On Android Emulator: Border is ok (Dark mode works properly too)
Case 5: On Windows: Border is ok (Dark mode works properly too)
Steps to Reproduce
- Using any Maui app with the XAML code above you could reproduce this issue:
` <ContentPage x:Class="CallManager.Views.Forms.LoginPage" xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:converter="clr-namespace:CallManager.Converters" xmlns:local="clr-namespace:CallManager.Views.Forms" xmlns:helpers="clr-namespace:CallManager.Helpers" xmlns:control="clr-namespace:CallManager.Controls" xmlns:viewModel="clr-namespace:CallManager.ViewModels.Forms" NavigationPage.HasNavigationBar="False" Shell.FlyoutBehavior="Disabled" Shell.NavBarIsVisible="False" BackgroundColor="{AppThemeBinding Light=White, Dark=Black}">
<ContentPage.BindingContext>
<viewModel:LoginPageViewModel />
</ContentPage.BindingContext>
<ContentPage.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Styles.xaml" />
</ResourceDictionary.MergedDictionaries>
<converter:BooleanToColorConverter x:Key="ColorConverter" />
</ResourceDictionary>
</ContentPage.Resources>
<Grid>
<ScrollView HorizontalOptions="Center">
<ScrollView.VerticalOptions>
<OnIdiom
x:TypeArguments="LayoutOptions"
Default="FillAndExpand"
Phone="FillAndExpand" />
</ScrollView.VerticalOptions>
<!--
Margin="{core:OnPlatformOrientationThickness
PhonePortrait='20,32',
PhoneLandscape='150,32',
TabletPortrait='200,50',
TabletLandscape='300,50',
Desktop='30'}"
-->
<StackLayout
Margin="20,32"
Spacing="0"
VerticalOptions="FillAndExpand"
WidthRequest="-1">
<Grid Margin="0"
HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Settings button -->
<Button
Grid.Row="0"
Margin="0,0,0,0"
Padding="0"
BorderWidth="0"
BackgroundColor="Transparent"
Clicked="ShowSettings"
HorizontalOptions="End"
VerticalOptions="Start"
HeightRequest="32"
WidthRequest="32" >
<Button.ImageSource>
<FontImageSource
FontFamily="IconFontTypes"
Glyph="{x:Static helpers:IconFont.Cog}"
Color="{AppThemeBinding Light=Black, Dark=White}"
Size="18" />
</Button.ImageSource>
</Button>
</Grid>
<Grid RowSpacing="0" VerticalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- Label to display the title of this page -->
<Label
Grid.Row="0"
FontFamily="Montserrat-SemiBold"
FontSize="20"
HorizontalTextAlignment="Center"
Style="{StaticResource LabelStyle}"
Text="Bem-vindo" />
<!-- Label to display the description of this page -->
<Label
Grid.Row="1"
Margin="0,8"
FontFamily="Montserrat-Medium"
HorizontalTextAlignment="Center"
Style="{StaticResource LabelStyle}"
Text="Use suas credenciais para acessar sua conta" />
<!-- Entry to get code from user -->
<StackLayout Grid.Row="2" Margin="0,12">
<Border
Stroke="{AppThemeBinding Light=Black, Dark=White}"
HorizontalOptions="FillAndExpand"
BackgroundColor="{AppThemeBinding Light=White, Dark=Black}"
StrokeThickness="2"
StrokeShape="RoundRectangle 10">
<Border.Shadow>
<Shadow Offset="5,5"
Opacity="0.8"
Brush="{AppThemeBinding Light=Black, Dark=White}"
Radius="20"/>
</Border.Shadow>
<StackLayout Orientation="Horizontal">
<Image Margin="10,0,0,0">
<Image.Source>
<FontImageSource
FontFamily="IconFontTypes"
Glyph="{x:Static helpers:IconFont.AccountOutline}"
Color="{AppThemeBinding Light=Black, Dark=White}"/>
</Image.Source>
</Image>
<control:BorderlessEntry
Text="{Binding UserCode}"
BackgroundColor="Transparent"
Margin="5,0,0,0"
HorizontalOptions="FillAndExpand"
VerticalOptions="Center"
Style="{StaticResource EntryStyle}"
PlaceholderColor="{AppThemeBinding Light={DynamicResource Gray600}, Dark={DynamicResource Gray300}}"
Placeholder="Código do usuário" />
</StackLayout>
</Border>
</StackLayout>
<!-- Entry to get password from user -->
<StackLayout Grid.Row="3" Margin="0,12">
<Border
Stroke="{AppThemeBinding Light=Black, Dark=White}"
HorizontalOptions="FillAndExpand"
BackgroundColor="{AppThemeBinding Light=White, Dark=Black}"
StrokeThickness="2"
StrokeShape="RoundRectangle 10">
<Border.Shadow>
<Shadow Offset="5,5"
Opacity="0.8"
Brush="{AppThemeBinding Light=Black, Dark=White}"
Radius="20"/>
</Border.Shadow>
<StackLayout Orientation="Horizontal">
<Image Margin="10,0,0,0">
<Image.Source>
<FontImageSource
FontFamily="IconFontTypes"
Glyph="{x:Static helpers:IconFont.KeyOutline}"
Color="{AppThemeBinding Light=Black, Dark=White}"/>
</Image.Source>
</Image>
<control:BorderlessEntry
Text="{Binding Password}"
BackgroundColor="Transparent"
Margin="5,0,0,0"
IsPassword="True"
HorizontalOptions="FillAndExpand"
VerticalOptions="Center"
Style="{StaticResource EntryStyle}"
PlaceholderColor="{AppThemeBinding Light={DynamicResource Gray600}, Dark={DynamicResource Gray300}}"
Placeholder="Senha" />
</StackLayout>
</Border>
</StackLayout>
<!-- Forgot password link -->
<Label
x:Name="ForgotPasswordLabel"
Grid.Row="4"
Margin="0,16"
HorizontalOptions="End"
Style="{StaticResource LabelStyle}"
Text="Esqueci minha senha">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ForgotPasswordCommand}" CommandParameter="{x:Reference ForgotPasswordLabel}" />
</Label.GestureRecognizers>
</Label>
<!-- Login button -->
<Button
Grid.Row="5"
Margin="0,16"
Command="{Binding LoginCommand}"
Style="{StaticResource ButtonStyle}"
Text="Entrar" />
</Grid>
<StackLayout
HorizontalOptions="Center"
Orientation="Horizontal"
Spacing="1"
VerticalOptions="End">
</StackLayout>
</StackLayout>
</ScrollView>
<local:LoginSettingView x:Name="LoginSettingView" Grid.RowSpan="1" />
<Label Text="{Binding MessageTitle}" IsVisible="False"></Label>
<Label Text="{Binding Message}" IsVisible="False"></Label>
<local:ErrorMessageView x:Name="ErrorMessageView" Grid.RowSpan="1" IsVisible="{Binding ShowErrorMessage}" />
</Grid>
</ContentPage>`
Version with bug
6.0.400
Last version that worked well
Unknown/Other
Affected platforms
iOS, macOS
Affected platform versions
iOS 15 (I'm not sure about other version, not tested)
Did you find any workaround?
Not yet
Relevant log output
No response
I had this same issue. Works well with Android and breaks in iOS. If you check it closely you could see a small shadow, which is added to the texts. Anyway as a workaround, I've wrapped the <Border> with a <Grid> and added the shadow to the <Grid> as <Grid.Shadow>.
<Grid>
<Grid.Shadow>
<Shadow Opacity="0.15" Radius="10" Offset="4,4" />
</Grid.Shadow>
<Border Margin="10,5" BackgroundColor="Red">
<Border.StrokeShape>
<RoundRectangle CornerRadius="10" />
</Border.StrokeShape>
<!-- ..... content here ..... -->
</Border>
</Grid>
@jfversluis / @PureWeen - should this move to a different milestone? It's sitting in 6.0-sr3.
What is the status on this issue? This shows "closed as completed", but then reopened 22 days ago. I can confirm that it's still a problem in Microsoft Visual Studio Enterprise 2022 (64-bit) - Current Version 17.3.4. This is causing major problems with my UI. Thanks!
Sounds like the same issue here. This has not been fixed. https://github.com/dotnet/maui/issues/7744
It seems that setting Border.BackgroundColor can be used as a temporary solution. At least, this helped in my project.
