Skip to content
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

Add vertical alignment support to WrapPanel #3466

Closed
vgromfeld opened this issue Sep 4, 2020 · 4 comments · Fixed by #3471
Closed

Add vertical alignment support to WrapPanel #3466

vgromfeld opened this issue Sep 4, 2020 · 4 comments · Fixed by #3471
Assignees
Labels
bug 🐛 An unexpected issue that highlights incorrect behavior Completed 🔥 controls 🎛️
Milestone

Comments

@vgromfeld
Copy link
Contributor

Describe the bug

The WrapPanel control does not respect the required vertical alignments of its children controls.

Steps to Reproduce

Steps to reproduce the behavior:

  1. Use the following code
<controls:WrapPanel
    Orientation="Horizontal">
    <Border Width="32" Height="32" Background="Blue" VerticalAlignment="Center" />
    <TextBlock
        VerticalAlignment="Center"
        Text="Some random text" />
    <Rectangle
        Width="1"
        Height="8"
        Margin="8,0"
        VerticalAlignment="Center"
        Fill="{ThemeResource SystemBaseHighColor}" />
    <Button
        VerticalAlignment="Center"
        Content="Button 2" />
    <Rectangle
        Width="1"
        Height="8"
        Margin="8,0"
        VerticalAlignment="Center"
        Fill="{ThemeResource SystemBaseHighColor}" />
    <HyperlinkButton
        VerticalAlignment="Center"
        Padding="0"
        Content="Button 2" />
</controls:WrapPanel>

Expected behavior

The panel should vertically align the children based on their vertical alignment values.

Screenshots

Actual behavior
image

Expected behavior (using a stack panel)
image

@vgromfeld vgromfeld added the bug 🐛 An unexpected issue that highlights incorrect behavior label Sep 4, 2020
@ghost ghost added the needs triage 🔍 label Sep 4, 2020
@ghost
Copy link

ghost commented Sep 4, 2020

Hello vgromfeld, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

@Kyaa-dost
Copy link
Contributor

Thanks, @vgromfeld for highlight this. Padding has been a known issue similar to #3257 and #3416

@skendrot
Copy link
Contributor

What other Panels offer VerticalContentAlignment and HorizontalContentAlignment? StackPanel does not, and Grid does not. Why offer it for the WrapPanel?

@michael-hawker
Copy link
Member

Thanks @skendrot I agree that we should just be inspecting the child's alignment property in the layout pass of the panel vs. a separate property, I commented more in the pr here.

The bug itself here about the property currently not being respected is a valid concern still though. I think we can just pivot the solution a bit.

@ghost ghost closed this as completed in #3471 Oct 29, 2020
ghost pushed a commit that referenced this issue Oct 29, 2020
…lAlignment support to WrapPanel (#3471)

## Fixes #3466
This PR adds the support of the `FrameworkElement.VerticalAlignment` and `FrameworkElement.HorizontalAlignment` to `WrapPanel`.

## PR Type
What kind of change does this PR introduce?
 - Bugfix

## What is the current behavior?
The wrap panel is always top/left aligning its children.

## What is the new behavior?
The controls will now use the children alignment to properly align them inside their row/column.
The `Arrange` code has been updated and is now a two steps process. The position and size of all the controls are stored in a new `UvRect` structure. Those `UvRect` are grouped by `Row`. This allows us to get the final height of the row before drawing the children so we can adjust their position.

**VerticalAlignment.Top**
![image](https://user-images.githubusercontent.com/20152272/92946831-74f88e80-f457-11ea-9467-1e3124ef837a.png)

**VerticalAlignment.Center**
![image](https://user-images.githubusercontent.com/20152272/92946849-7c1f9c80-f457-11ea-8a1c-868438d9da90.png)
![image](https://user-images.githubusercontent.com/20152272/92946920-978aa780-f457-11ea-9928-1346b5cf3a8e.png)

**VerticalAlignment.Bottom**
![image](https://user-images.githubusercontent.com/20152272/92946873-8772c800-f457-11ea-86ae-049fbe1676ab.png)

**VerticalAlignment.Stretch**
![image](https://user-images.githubusercontent.com/20152272/92946900-90fc3000-f457-11ea-8f70-fe01db58930a.png)


## PR Checklist

Please check if your PR fulfills the following requirements:

- [x] Tested code with current [supported SDKs](../readme.md#supported)
- [ ] Pull Request has been submitted to the documentation repository [instructions](..\contributing.md#docs). Link: <!-- docs PR link -->
- [x] Sample in sample app has been added / updated (for bug fixes / features)
    - [ ] Icon has been created (if new sample) following the [Thumbnail Style Guide and templates](https://github.com/windows-toolkit/WindowsCommunityToolkit-design-assets)
- [ ] Tests for the changes have been added (for bug fixes / features) (if applicable)
- [ ] Header has been added to all new source files (run *build/UpdateHeaders.bat*)
- [x] Contains **NO** breaking changes
@ghost ghost added Completed 🔥 and removed In-PR 🚀 labels Oct 29, 2020
@ghost ghost locked as resolved and limited conversation to collaborators Dec 29, 2020
This issue was closed.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug 🐛 An unexpected issue that highlights incorrect behavior Completed 🔥 controls 🎛️
Projects
None yet
4 participants