WindowsCommunityToolkit
WindowsCommunityToolkit copied to clipboard
AdaptiveGridView not adapting to available space
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>
https://github.com/CommunityToolkit/WindowsCommunityToolkit/assets/61227305/1a9a9b80-2c57-4564-8175-f893f58bf2bf
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
Windows Build Number
- [X] 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
- [X] 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.