-
-
Notifications
You must be signed in to change notification settings - Fork 2.4k
Container queries #7938
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Container queries #7938
Conversation
You can test this PR using the following package version. |
You can test this PR using the following package version. |
I certainly think this is useful in some cases. However, I'm a big fan of fully adaptive/responsive UI's that adjust based on resolution or orientation though. This type of functionality in my mind is needed for less-powerful UI frameworks. XAML is resolution independent, fully vector-based and composable. You can generally-speaking design a good UI that works everywhere and automatically adjusts itself. |
It's a great addition, but I'd like to suggest an improvement eg: <Style Selector=":min-width(600) TextBlock#MinWidth">
<Setter Property="Foreground" Value="Red" />
</Style>
<Style Selector=":max-width(600) TextBox">
<Setter Property="Foreground" Value="Red" />
</Style>
<Style Selector=":max-width(600) Rectangle">
<Setter Property="Fill" Value="Red" />
</Style>
<Style Selector=":min-width(800) TextBlock#MinWidth">
<Setter Property="Foreground" Value="Blue" />
</Style>
<Style Selector=":max-width(800) TextBox">
<Setter Property="Foreground" Value="Blue" />
</Style>
<Style Selector=":max-width(800) Rectangle">
<Setter Property="Fill" Value="Blue" />
</Style>
.... will became: <Media Selector=":min-width(600)">
<Style "TextBlock#MinWidth">
<Setter Property="Foreground" Value="Red" />
</Style>
<Style Selector="TextBox">
<Setter Property="Foreground" Value="Red" />
</Style>
<Style Selector=" Rectangle">
<Setter Property="Fill" Value="Red" />
</Style>
</Media>
<Media Selector=":min-width(800)">
<Style Selector="TextBlock#MinWidth">
<Setter Property="Foreground" Value="Blue" />
</Style>
<Style Selector="TextBox">
<Setter Property="Foreground" Value="Blue" />
</Style>
<Style Selector="Rectangle">
<Setter Property="Fill" Value="Blue" />
</Style>
</Media>
.... Other possible MediaSelector:
|
This should just work
|
From my perspective it is quite hard to create truly responsive controls in pure XAML. For example |
Yea, this can certainly be useful and I'm not against it all. I guess my point was more it isnt a blocker for supporting multiple devices and form factors. I generally found that there was a solution by rethinking designs and your app at a fundamental level. XAML with minimal C# code-behind is already powerful enough to do everything needed. A desktop XAML app was made to work with mobile with the thinking I'm describing here. The only layout changes were triggered based on orientation and pixel size of the window -- very simple and done in code behind. It turned out quite well. That said, the examples above based on width/height are good ones. AdaptiveTriggers in UWP were useful in several cases. I'm sure I can find a use for this too. |
FYI: CSS spec for container queries: w3c/csswg-drafts#5796 |
I had another thought about this. It's common for many views to share the same trigger width/height in pixels when the layout should change. Is there any way to declare a resource for width/height and then use it in a selector (I know the answer to this is no...) but is it possible in the future? Should it be? <Style Selector=":min-width({StaticResource MinWindowWidth})"> Doing this would greatly help updating many views that use this type of selector. |
With CSS syntax it's a bit of a pain. Yet another reason to split "selector" and "media-query" (as it is in CSS), so we will be able to write: <Style MediaQuery="min-width(600) and pointer(mouse)" Selector="Border" /> as well as <Style Selector="Border">
<Style.MediaQuery>
<AndMediaQuery>
<!-- Any other non-bindable markup extension should work here without any problem -->
<SizeMediaQuery MinWidth="{StaticResource MinWindowWidth}" />
<PointerMediaQuery PointerType="Mouse" />
</AndMediaQuery>
</Style.MediaQuery>
</Style> Which also can be extended with custom MediaQuery types (like it's possible with AdaptiveTriggers). CSS seems to not support variables in media queries, but only environment variables (consts), see w3c/csswg-drafts#1693 |
Perhaps it is better to shift the conversation into a discussion so as not to dirty the PR.
I don't see the need to add a new attribute when it's really nothing more than a selector. <StyleInclude Selector="max-width(600)" Source="avares://MyApp/Assets/screen_small.xaml"/>
<StyleInclude Selector="max-width(1024)" Source="avares://MyApp/Assets/screen_medium.xaml"/>
<StyleInclude Selector="min-width(1280)" Source="avares://MyApp/Assets/screen_high.xaml"/> |
JFYI: This is just an initial prototype of how to make the functionality work, and its expected that the final syntax of media queries would be seperated from selectors. We have identified this is a 2-stage process.
|
Why this choice? I don't see any difference between MediaQuery and Selector, they both allow you to activate / deactivate a style based on a condition. Adding an extra attribute would increase cofusion.
Greats idea of syntax could also be extended to selector. It would make the approach easier for those like me who do not have a web background and at the beginning find it difficult to read and write a Selector. |
Closing as inactive. |
# Conflicts: # samples/ControlCatalog/MainView.xaml # samples/ControlCatalog/MainView.xaml.cs # src/Avalonia.Base/LogicalTree/IScreenSizeProvider.cs # src/Avalonia.Base/LogicalTree/ITopLevelScreenSizeProvider.cs # src/Avalonia.Base/Styling/Activators/ScreenActivator.cs # src/Avalonia.Base/Styling/ScreenSelector.cs # src/Avalonia.Base/Visual.cs # src/Avalonia.Controls/TopLevel.cs # src/Markup/Avalonia.Markup/Markup/Parsers/SelectorGrammar.cs
You can test this PR using the following package version. |
You can test this PR using the following package version. |
@emmauss any status updates for this? |
# Conflicts: # src/Markup/Avalonia.Markup.Xaml.Loader/IncludeXamlIlSre.props
You can test this PR using the following package version. |
You can test this PR using the following package version. |
@dan Walmsley, Please read the following Contributor License Agreement (CLA). If you agree with the CLA, please reply with the following:
Contributor License AgreementContribution License AgreementThis Contribution License Agreement ( “Agreement” ) is agreed to by the party signing below ( “You” ), 1. Definitions. “Code” means the computer software code, whether in human-readable or machine-executable form, “Project” means any of the projects owned or managed by AvaloniaUI OÜ and offered under a license “Submit” is the act of uploading, submitting, transmitting, or distributing code or other content to any “Submission” means the Code and any other copyrightable material Submitted by You, including any 2. Your Submission. You must agree to the terms of this Agreement before making a Submission to any 3. Originality of Work. You represent that each of Your Submissions is entirely Your 4. Your Employer. References to “employer” in this Agreement include Your employer or anyone else 5. Licenses. a. Copyright License. You grant AvaloniaUI OÜ, and those who receive the Submission directly b. Patent License. You grant AvaloniaUI OÜ, and those who receive the Submission directly or c. Other Rights Reserved. Each party reserves all rights not expressly granted in this Agreement. 6. Representations and Warranties. You represent that You are legally entitled to grant the above 7. Notice to AvaloniaUI OÜ. You agree to notify AvaloniaUI OÜ in writing of any facts or 8. Information about Submissions. You agree that contributions to Projects and information about 9. Governing Law/Jurisdiction. This Agreement is governed by the laws of the Republic of Estonia, and 10. Entire Agreement/Assignment. This Agreement is the entire agreement between the parties, and AvaloniaUI OÜ dedicates this Contribution License Agreement to the public domain according to the Creative Commons CC0 1. 2 out of 3 committers have signed the CLA. Dan Walmsley doesn't seem to be a GitHub user. |
You can test this PR using the following package version. |
@dan Walmsley, Please read the following Contributor License Agreement (CLA). If you agree with the CLA, please reply with the following:
Contributor License AgreementContribution License AgreementThis Contribution License Agreement ( “Agreement” ) is agreed to by the party signing below ( “You” ), 1. Definitions. “Code” means the computer software code, whether in human-readable or machine-executable form, “Project” means any of the projects owned or managed by AvaloniaUI OÜ and offered under a license “Submit” is the act of uploading, submitting, transmitting, or distributing code or other content to any “Submission” means the Code and any other copyrightable material Submitted by You, including any 2. Your Submission. You must agree to the terms of this Agreement before making a Submission to any 3. Originality of Work. You represent that each of Your Submissions is entirely Your 4. Your Employer. References to “employer” in this Agreement include Your employer or anyone else 5. Licenses. a. Copyright License. You grant AvaloniaUI OÜ, and those who receive the Submission directly b. Patent License. You grant AvaloniaUI OÜ, and those who receive the Submission directly or c. Other Rights Reserved. Each party reserves all rights not expressly granted in this Agreement. 6. Representations and Warranties. You represent that You are legally entitled to grant the above 7. Notice to AvaloniaUI OÜ. You agree to notify AvaloniaUI OÜ in writing of any facts or 8. Information about Submissions. You agree that contributions to Projects and information about 9. Governing Law/Jurisdiction. This Agreement is governed by the laws of the Republic of Estonia, and 10. Entire Agreement/Assignment. This Agreement is the entire agreement between the parties, and AvaloniaUI OÜ dedicates this Contribution License Agreement to the public domain according to the Creative Commons CC0 1. 3 out of 4 committers have signed the CLA. Dan Walmsley doesn't seem to be a GitHub user. |
Closing this PR as feature is getting reworked in #16846 |
Please read the following Contributor License Agreement (CLA). If you agree with the CLA, please reply with the following:
Contributor License AgreementContribution License AgreementThis Contribution License Agreement ( “Agreement” ) is agreed to by the party signing below ( “You” ), 1. Definitions. “Code” means the computer software code, whether in human-readable or machine-executable form, “Project” means any of the projects owned or managed by AvaloniaUI OÜ and offered under a license “Submit” is the act of uploading, submitting, transmitting, or distributing code or other content to any “Submission” means the Code and any other copyrightable material Submitted by You, including any 2. Your Submission. You must agree to the terms of this Agreement before making a Submission to any 3. Originality of Work. You represent that each of Your Submissions is entirely Your 4. Your Employer. References to “employer” in this Agreement include Your employer or anyone else 5. Licenses. a. Copyright License. You grant AvaloniaUI OÜ, and those who receive the Submission directly b. Patent License. You grant AvaloniaUI OÜ, and those who receive the Submission directly or c. Other Rights Reserved. Each party reserves all rights not expressly granted in this Agreement. 6. Representations and Warranties. You represent that You are legally entitled to grant the above 7. Notice to AvaloniaUI OÜ. You agree to notify AvaloniaUI OÜ in writing of any facts or 8. Information about Submissions. You agree that contributions to Projects and information about 9. Governing Law/Jurisdiction. This Agreement is governed by the laws of the Republic of Estonia, and 10. Entire Agreement/Assignment. This Agreement is the entire agreement between the parties, and AvaloniaUI OÜ dedicates this Contribution License Agreement to the public domain according to the Creative Commons CC0 1. 3 out of 4 committers have signed the CLA. |
What does the pull request do?
Prototype for implementation of css like media queries.
Essential to support multiple form factors.
What is the current behavior?
What is the updated/expected behavior with this PR?
How was the solution implemented (if it's not obvious)?
Checklist
Breaking changes
Obsoletions / Deprecations
Fixed issues