Skip to content

Instantly share code, notes, and snippets.

@wbokkers
Created November 4, 2021 12:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wbokkers/4a07fedfb99d49d4b8e8ff62971d4eb8 to your computer and use it in GitHub Desktop.
Save wbokkers/4a07fedfb99d49d4b8e8ff62971d4eb8 to your computer and use it in GitHub Desktop.
Layout Cycle Detected Exception in Windows App SDK 1.0 Preview 3
<UserControl
x:Class="LayoutCycleTest.TestControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:layoutcycletest="using:LayoutCycleTest"
mc:Ignorable="d"
>
<UserControl.Resources>
<Style x:Key="StretchedListViewItem" TargetType="ListViewItem">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="MinHeight" Value="4" />
<Setter Property="FocusVisualPrimaryThickness" Value="0" />
<Setter Property="FocusVisualSecondaryThickness" Value="0" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Margin" Value="0,0" />
<Setter Property="Padding" Value="0" />
</Style>
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Button Click="NextSeed">Next Seed</Button>
<TextBlock Margin="8,0,12,0" VerticalAlignment="Center" x:Name="tbSeed"/>
<TextBlock VerticalAlignment="Center" FontSize="11" Text="Seed 9 will often cause Layout Cycle Detected Exception (restart app to retry)"/>
</StackPanel>
<ListView Grid.Row="1" Width="666.4" Height="343.2" BorderBrush="Black" BorderThickness="1" ItemContainerStyle="{StaticResource StretchedListViewItem}"
IsItemClickEnabled="False"
x:Name="listView"
ScrollViewer.VerticalScrollMode="Auto"
SelectionMode="None">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel VerticalAlignment="Bottom" ItemsUpdatingScrollMode="KeepLastItemInView" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate x:DataType="layoutcycletest:TestGroup">
<TextBlock
Margin="8,12,4,8"
HorizontalAlignment="Center"
FontSize="16"
Foreground="Gray"
Text="{x:Bind GroupDate}" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
<ListView.ItemTemplate>
<DataTemplate x:DataType="layoutcycletest:TestModel">
<Border
x:Name="commItemRoot"
Margin="8,0,100,0"
HorizontalAlignment="Left"
BorderBrush="Gray"
BorderThickness="1,1,2,2"
CornerRadius="4">
<TextBlock
Padding="4"
VerticalAlignment="Top"
Margin="4,0,4,0"
HorizontalAlignment="Stretch"
Text="{x:Bind UiLabel, Mode=OneWay}"
IsTextSelectionEnabled="True"
TextWrapping="Wrap"
/>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</UserControl>
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Data;
using System;
using System.Collections.ObjectModel;
namespace LayoutCycleTest
{
public static class TestRnd
{
public static Random Rnd { get; set; } = new Random();
}
public class TestGroup : ObservableCollection<TestModel>
{
public TestGroup()
{
var date = DateTime.Now.AddDays(TestRnd.Rnd.Next(-10, 10));
GroupDate = date.ToString("yyyy-MM-dd");
}
public string GroupDate { get; }
}
public class TestModel
{
private static readonly string[] _str = new[]
{
"The Quick Brown Fox Jumps Over The Lazy Dog. The Quick Brown Fox Jumps Over The Lazy Dog. The Quick Brown Fox Jumps Over The Lazy Dog. The Quick Brown Fox Jumps Over The Lazy Dog.",
"Ab cde Fghi Jklm Nopq Rst Uvw Xyz. Ab cde Fghi Jklm Nopq Rst Uvw Xyz. Ab cde Fghi Jklm Nopq Rst Uvw Xyz. Ab cde Fghi Jklm Nopq Rst Uvw Xyz. Ab cde Fghi Jklm Nopq Rst Uvw Xyz. Ab cde Fghi Jklm Nopq Rst Uvw Xyz.",
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"
};
public string UiLabel
{
get
{
var istr = TestRnd.Rnd.Next(2);
var str = _str[istr];
var startIndex = TestRnd.Rnd.Next(0, 11);
var maxIndex = TestRnd.Rnd.Next(20, str.Length - 1);
return str[startIndex..maxIndex];
}
}
}
public sealed partial class TestControl : UserControl
{
private readonly ObservableCollection<TestGroup> _testList = new();
private ICollectionView _groupedCollection = null;
private CollectionViewSource _viewSource = null;
public TestControl()
{
this.InitializeComponent();
Loaded += TestControl_Loaded;
}
private void TestControl_Loaded(object sender, RoutedEventArgs e)
{
ShowNextSeedResults();
}
private int _seed = 5;
private void NextSeed(object sender, RoutedEventArgs e)
{
ShowNextSeedResults();
}
private void ShowNextSeedResults()
{
_seed++;
TestRnd.Rnd = new Random(_seed);
listView.Width = TestRnd.Rnd.Next(550, 700);
listView.Height = TestRnd.Rnd.Next(320, 420);
_testList.Clear();
for (int g = 0; g < 5; g++)
{
var group = new TestGroup();
for (int i = 0; i < 10; i++)
group.Add(new TestModel());
_testList.Add(group);
}
_viewSource = new CollectionViewSource { IsSourceGrouped = true, Source = _testList };
_groupedCollection = _viewSource.View;
listView.ItemsSource = _groupedCollection;
tbSeed.Text = _seed.ToString();
}
}
}
@wbokkers
Copy link
Author

wbokkers commented Nov 4, 2021

Use this control to reproduce a nasty layout cycle bug: microsoft/microsoft-ui-xaml#6218

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment