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

AdaptiveGridView not adapting to available space #4979

Open
2 of 14 tasks
FallenDeity opened this issue Mar 24, 2024 · 0 comments
Open
2 of 14 tasks

AdaptiveGridView not adapting to available space #4979

FallenDeity opened this issue Mar 24, 2024 · 0 comments
Labels
bug 🐛 An unexpected issue that highlights incorrect behavior

Comments

@FallenDeity
Copy link

FallenDeity commented Mar 24, 2024

Describe the bug

In some weird cases when resizing the adaptive grid view items don't take up the available space on the right, sometimes the layout doesn't adapt properly to a larger size but once i make it a bit smaller it suddenly adapts

<controls:AdaptiveGridView
    DesiredWidth="360"
    IsItemClickEnabled="False"
    ItemHeight="120"
    ItemsSource="{x:Bind ViewModel.shimmers, Mode=OneWay}"
    SelectionMode="None"
    Visibility="{x:Bind ViewModel.TracksLoaded, Converter={StaticResource BoolToVis}, Mode=OneWay, ConverterParameter=Invert}">
    <controls:AdaptiveGridView.ItemTemplate>
        <DataTemplate x:DataType="labs:Shimmer">
            <Grid
                Margin="{ThemeResource XSmallLeftTopRightBottomMargin}"
                Padding="{ThemeResource XSmallLeftTopRightBottomMargin}"
                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                CornerRadius="6">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid
                    Grid.Column="0"
                    Width="84"
                    Height="84"
                    CornerRadius="6">
                    <labs:Shimmer
                        Width="84"
                        Height="84"
                        VerticalAlignment="Center"
                        CornerRadius="6" />
                </Grid>
                <StackPanel
                    Grid.Column="1"
                    Margin="{ThemeResource SmallLeftRightMargin}"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Center">
                    <labs:Shimmer
                        Width="180"
                        Height="24"
                        Margin="{ThemeResource XSmallLeftTopRightBottomMargin}"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Center"
                        CornerRadius="6" />
                    <labs:Shimmer
                        Width="120"
                        Height="24"
                        Margin="{ThemeResource XSmallLeftTopRightBottomMargin}"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Center"
                        CornerRadius="6" />
                </StackPanel>
            </Grid>
        </DataTemplate>
    </controls:AdaptiveGridView.ItemTemplate>
</controls:AdaptiveGridView>
Rhythm_tFcJdrkC9k.mp4

Regression

No response

Reproducible in sample app?

  • This bug can be reproduced in the sample app.

Steps to reproduce

1. Create a basic WinUi 3 App
2. Download the shimmer ui component from community toolkit
3. Copy Paste the Xaml code above into a blank page
4. Resize you're screen to test behaviour of the component

Expected behavior

The AdaptiveGridView is expected to occupy the space to the right where available

Screenshots

image image
image image

Windows Build Number

  • Windows 10 1809 (Build 17763)
  • Windows 10 1903 (Build 18362)
  • Windows 10 1909 (Build 18363)
  • Windows 10 2004 (Build 19041)
  • Windows 10 20H2 (Build 19042)
  • Windows 10 21H1 (Build 19043)
  • Windows 11 21H2 (Build 22000)
  • Other (specify)

Other Windows Build number

No response

App minimum and target SDK version

  • Windows 10, version 1809 (Build 17763)
  • Windows 10, version 1903 (Build 18362)
  • Windows 10, version 1909 (Build 18363)
  • Windows 10, version 2004 (Build 19041)
  • Other (specify)

Other SDK version

Max Version 10.0.22621.0

Visual Studio Version

2022

Visual Studio Build Number

17.9.0

Device form factor

Desktop

Nuget packages

  <ItemGroup>
    <PackageReference Include="CommunityToolkit.Labs.WinUI.Shimmer" Version="0.1.240304-pull-531.1658" />
    <PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.2" />
    <PackageReference Include="CommunityToolkit.WinUI.UI.Animations" Version="7.1.3-build.3.g7719d852da" />
    <PackageReference Include="CommunityToolkit.WinUI.UI.Controls" Version="7.1.3-build.3.g7719d852da" />
    <PackageReference Include="Microsoft.Extensions.Hosting" Version="9.0.0-preview.1.24080.9" />
    <PackageReference Include="Microsoft.WindowsAppSDK" Version="1.5.240227000" />
    <PackageReference Include="Microsoft.Xaml.Behaviors.WinUI.Managed" Version="2.0.9" />
    <PackageReference Include="WinUIEx" Version="2.3.4" />
  </ItemGroup>

Additional context

No response

Help us help you

Yes, but only if others can assist.

@FallenDeity FallenDeity added the bug 🐛 An unexpected issue that highlights incorrect behavior label Mar 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 An unexpected issue that highlights incorrect behavior
Projects
None yet
Development

No branches or pull requests

1 participant