Net MAUI shadows not loading at runtime WINDOWS

Question

I run upon this bug which does not allow me to have shadow at runtime, pretty odd. If I attach the shadow to a pre rendered control it will work. but i'm trying to add shadow to a rendered collectionview datatemplate, whenever i modify in hotreload shadown seems to appear, but without touching the code it will never appear.

 <Grid BackgroundColor="#F1F1F1">
     <CollectionView ItemsSource="{Binding list}" ItemsLayout="VerticalGrid, 3">
          <CollectionView.ItemTemplate>
               <DataTemplate>
                     <Border BackgroundColor="White"
                             StrokeShape="RoundRectangle 5,5,5,5"
                             Stroke="white"
                             Padding="15"
                             Margin="15"
                             >
                             <Border.Shadow>
                                <Shadow Brush="Black"
                                        Offset="10,10"
                                        Opacity="0.2" />        
                             </Border.Shadow>
                             <Grid>
                               <Grid.RowDefinitions>
                                 <RowDefinition/>
                               </Grid.RowDefinitions>                                                    
                               <Grid.ColumnDefinitions>                
                                 <ColumnDefinition/>
                                 <ColumnDefinition/>
                               </Grid.ColumnDefinitions>                                                  
                               <VerticalStackLayout Grid.Row="0" Grid.Column="0">                                                        
                                 <Label Padding="10,10,10,2"
                                        Text="{Binding .}"
                                        FontSize="Default"
                                        FontAttributes="Bold"/>
                                 <Label Padding="10,0,0,0"                      
                                        Text="Aca va una descripción de la automatización."                                                       
                                        FontAttributes="Italic"/>
                                               
                               </VerticalStackLayout>                                                                                
                               <HorizontalStackLayout 
                                 HorizontalOptions="Center" 
                                 Grid.Row="0" Grid.Column="1">
                                   <ImageButton 
                                     HorizontalOptions="End"
                                     Source="lab.png"
                                     Margin="10" 
                                     WidthRequest="20"
                                     HeightRequest="20">
                                   </ImageButton>
                                   <ImageButton 
                                     HorizontalOptions="End"
                                     Source="lab.png"
                                     Margin="10" 
                                     WidthRequest="20"
                                     HeightRequest="20">
                                   </ImageButton>
                                   <ImageButton 
                                     HorizontalOptions="End"
                                     Source="lab.png"
                                     Margin="10" 
                                     WidthRequest="20"
                                     HeightRequest="20">
                                   </ImageButton>
                                                
                               </HorizontalStackLayout>                                                 
                          </Grid>
                       </Border>
             </DataTemplate>                           
      </CollectionView.ItemTemplate>
  </CollectionView>

In this two images we can see a one with shadow and one without shadow When i compile and load this data to the datasource it will look like this

[![Not a shadow :( ][1]][1]

Which this isn't quite right cause, i coded a shadow for each component of this Collectionview. But whenever i make a change in runtime compiling, hotreaload will make my shadow appear

[![Here's shadow!][2]][2]

Does anyone know what's going on? is this a bug ? Thanks for your time and help! [1]: https://i.stack.imgur.com/oIdSF.png [2]: https://i.stack.imgur.com/27JaF.png

Looks like a bug. You can create an issue at `github maui issues`. There, include a link to a public github repo with just enough code to demonstrate the bug. — ToolmakerSteve, Aug 10 '23 at 00:34
Yeah it looks like I'll have to post an issue at MAUI's github, thanks for your answer — Francisco José Goñi, Aug 10 '23 at 13:46

score 1 · Answer 1 · answered Aug 10 '23 at 04:50

1

I can reproduce your issue on my side. The issue is that when launching the .NET MAUI app, the Border.Shadow like below doesn't work.

<Border.Shadow>
      <Shadow Brush="Black"
              Offset="10,10"
              Opacity="0.2" />        
      </Border.Shadow>
</Border.Shadow>

However, when commenting the above Border.Shadow out and then uncommenting it at the runtime, the Border.Shadow will show as expected like below which is very weird!

And I think it's a known issue that being tracked in the links below, you can follow up there.

https://github.com/dotnet/maui/issues/8150

Thanks for your feedback and patience!

answered Aug 10 '23 at 04:50

Alexandar May - MSFT

6,536
1
8
15

I'll wait no problem, maybe I can find a workaround idk, either way thanks you! I'll submit an issue into MAUI's github. – Francisco José Goñi Aug 10 '23 at 13:48
@FranciscoJoséGoñi Thanks for the update, hopefully it'll be fixed soon! – Alexandar May - MSFT Aug 22 '23 at 08:47

Net MAUI shadows not loading at runtime WINDOWS

1 Answers1