carolzbnbr / OnScreenSizeMarkup.Maui

OnScreenSizeMarkup.MAUI is a XAML markup extension that facilitates the control of UI elements (Views) according to the physical screen size category of a device (such as medium-sized, large-sized devices, etc.). This extension provides a flexible way to tailor your interface to various screen dimensions.
35 stars 2 forks source link

Support for windows. #1

Open prabhavmehra opened 11 months ago

prabhavmehra commented 11 months ago

Is your feature request related to a problem? Please describe. I want to be able to create a responsive UI on all platforms (windows, ios, android). I want to be able to have different UI for windows compared to ios and android as we have more screen area for that.

Currently I get Platform implementation not found when running on windows

Describe the solution you'd like Maybe different mappings? Something similar to web? Where a small is a phone, medium is tablet and large is laptop screen.

Describe alternatives you've considered


<ContentPage.Resources>
    <x:Double x:Key="ExtraSmall">0</x:Double>
    <x:Double x:Key="Small">576</x:Double>
    <x:Double x:Key="Medium">768</x:Double>
    <x:Double x:Key="Large">992</x:Double>
    <x:Double x:Key="ExtraLarge">1200</x:Double>
    <x:Double x:Key="ExtraExtraLarge">1400</x:Double>
</ContentPage.Resources>

 <VisualStateManager.VisualStateGroups>
     <VisualStateGroup x:Name="Responsive">
         <VisualState x:Name="Large">
             <VisualState.StateTriggers>
                 <AdaptiveTrigger MinWindowWidth="{StaticResource Large}" />
             </VisualState.StateTriggers>
             <VisualState.Setters>
                 <!--  Show the left dock in Large state  -->
                 <Setter TargetName="navGrid" Property="IsVisible" Value="True" />
                 <Setter TargetName="contentGrid" Property="IsVisible" Value="True" />
                 <Setter TargetName="btnMenu" Property="IsVisible" Value="False" />
             </VisualState.Setters>
         </VisualState>
         <VisualState x:Name="Medium">
             <VisualState.StateTriggers>
                 <AdaptiveTrigger MinWindowWidth="{StaticResource Medium}" />
             </VisualState.StateTriggers>
             <VisualState.Setters>
                 <!--  Show the left dock in Medium state  -->
                 <Setter TargetName="navGrid" Property="IsVisible" Value="True" />
                 <Setter TargetName="contentGrid" Property="IsVisible" Value="True" />
                 <Setter TargetName="btnMenu" Property="IsVisible" Value="False" />
             </VisualState.Setters>
         </VisualState>
         <VisualState x:Name="Small">
             <VisualState.StateTriggers>
                 <AdaptiveTrigger MinWindowWidth="{StaticResource Small}" />
             </VisualState.StateTriggers>
             <VisualState.Setters>
                 <!--  Hide the left dock in Small state  -->
                 <Setter TargetName="navGrid" Property="IsVisible" Value="True" />
                 <Setter TargetName="contentGrid" Property="IsVisible" Value="False" />
                 <Setter TargetName="btnMenu" Property="IsVisible" Value="True" />
             </VisualState.Setters>
         </VisualState>
         <VisualState x:Name="ExtraSmall">
             <VisualState.StateTriggers>
                 <AdaptiveTrigger MinWindowWidth="{StaticResource ExtraSmall}" />
             </VisualState.StateTriggers>
             <VisualState.Setters>
                 <!--  Show the left dock in Default state  -->
                 <Setter TargetName="navGrid" Property="IsVisible" Value="True" />
                 <Setter TargetName="contentGrid" Property="IsVisible" Value="False" />
                 <Setter TargetName="btnMenu" Property="IsVisible" Value="True" />
             </VisualState.Setters>
         </VisualState>
     </VisualStateGroup>
 </VisualStateManager.VisualStateGroups>

I have been using something like this. But i would like to use the markup extension instead. Additional context Add any other context or screenshots about the feature request here.

@carolzbnbr

prabhavmehra commented 11 months ago

Also this is assuming that the breakpoints will be dynamic. i.e. as we resize the screen (on windows) the screen can go from a "Large" to a "Medium" to a possible "Small".

There is something similar for "Orientation" https://www.cayas.de/de/blog/responsive-layouts-for-dotnet-maui which signals the orientation change on the fly.

carolzbnbr commented 10 months ago

Hello,

Thank you for raising this issue, providing an opportunity to clarify how our markup works.

Our markup is designed with a focus on the physical size of the screen. Therefore, depending on the actual size of your screen, it will be categorized as ExtraSmall, Small, Large, and so forth. It's important to note that this classification is based on the screen's physical size, not the window size. Hence, even if the markup functions for Windows, the screen size of your monitor remains constant, irrespective of the window size, as it is tied to the physical dimensions, not the window dimensions.

The exception was raised because I do not use Windows as my development environment. Consequently, when I compile/generate the NuGet package, it produces a build not based on Windows. To resolve this, I would need assistance from anyone willing to contribute to this markup library, to also generate/compile the markup on Windows. Alternatively, someone could create a CI/CD pipeline capable of compiling on Windows and packaging the output for the NuGet. However, I haven't had sufficient time lately to focus on CI/CD for this project, as my current focus is on my startup, (Treinify), which requires much of my effort right now.

If the NuGet package were generated on Windows, it would classify all monitor sizes as a fixed size, for example, ExtraLarge, regardless of the actual monitor/screen size. We could improve this behavior, but additional help would also be needed to achieve that.

Regards, Carol

kenny1983 commented 7 months ago

Hi @carolzbnbr, I might be able to provide some help for you to bring this promising-looking library to Windows. Shoot me a message when you see this and let me know exactly what kind of help you would require, and we can try to work something out ๐Ÿ˜‰

kenny1983 commented 7 months ago

Hi @prabhavmehra, if it's not too much trouble could you please let me know whether you've found another workaround for dynamic font scaling or the like across all MAUI-supported environments? Or even where exactly you implemented the code given in your OP? Thanks! ๐Ÿ˜„

prabhavmehra commented 6 months ago

@kenny1983 I was actually able to implement a markup extension which does what I described, i.e based on different app window dimensions applies the value ( similar to breakpoints). I will aim to create a repo with some details in it by today.

The only thing I havenโ€™t implemented in it is support for Enums. I think FontScaling is an enum indeed. I would suggest give it a go when I have it set up.

kenny1983 commented 6 months ago

Awesome, thanks mate! ๐Ÿ˜„


From: prabhavmehra @.> Sent: Saturday, 16 March 2024 11:06 AM To: carolzbnbr/OnScreenSizeMarkup.Maui @.> Cc: Kent Cooper @.>; Mention @.> Subject: Re: [carolzbnbr/OnScreenSizeMarkup.Maui] Support for windows. (Issue #1)

@kenny1983https://github.com/kenny1983 I was actually able to implement a markup extension which does what I described, i.e based on different app window dimensions applies the value ( similar to breakpoints). I will aim to create a repo with some details in it by today.

The only thing I havenโ€™t implemented in it is support for Enums. I think FontScaling is an enum indeed. I would suggest give it a go when I have it set up.

โ€” Reply to this email directly, view it on GitHubhttps://github.com/carolzbnbr/OnScreenSizeMarkup.Maui/issues/1#issuecomment-2000902229, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ACHCHCS72KLXNHQ3UDA7GK3YYOLKNAVCNFSM6AAAAAA7LTLP42VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMBQHEYDEMRSHE. You are receiving this because you were mentioned.Message ID: @.***>

prabhavmehra commented 6 months ago

@kenny1983 https://github.com/prabhavmehra/maui-markup-extensions

I have added the markup extension and sample. I was able to get the font scaling working as well. I have added a wiki to help use the extension. Let me know if you find it difficult to use.

kenny1983 commented 6 months ago

Awesome, thanks again buddy! Will check it out tonight after work and let you know if I have any feedback ๐Ÿ™‚


From: prabhavmehra @.> Sent: Monday, 18 March 2024 9:07 AM To: carolzbnbr/OnScreenSizeMarkup.Maui @.> Cc: Kent Cooper @.>; Mention @.> Subject: Re: [carolzbnbr/OnScreenSizeMarkup.Maui] Support for windows. (Issue #1)

@kenny1983https://github.com/kenny1983 https://github.com/prabhavmehra/maui-markup-extensions

I have added the markup extension and sample. I was able to get the font scaling working as well. I have added a wiki to help use the extension. Let me know if you find it difficult to use.

โ€” Reply to this email directly, view it on GitHubhttps://github.com/carolzbnbr/OnScreenSizeMarkup.Maui/issues/1#issuecomment-2002649991, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ACHCHCS32LDMMU6HXCXXAMLYYYO2FAVCNFSM6AAAAAA7LTLP42VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMBSGY2DSOJZGE. You are receiving this because you were mentioned.Message ID: @.***>