Home
%3CLINGO-SUB%20id%3D%22lingo-sub-673117%22%20slang%3D%22ja-JP%22%3ETried%20FlowLayout%20in%20Windows%20UI%20Library%202.2%20(Preview)%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-673117%22%20slang%3D%22ja-JP%22%3E%3CP%3EThe%20Windows%20UI%20Library%20has%20a%20class%20that%20moves%20like%20the%20ItemsControl%2C%20which%20has%20a%20lightweight%20and%20virtualization%20feature%20called%20ItemsRepeater.%3C%2FP%3E%0A%3CP%3EThis%20class%20is%20customizable%20for%20layout%20and%20provides%20StackLayout%20and%20UniformGridLayout%20by%20default%20in%20Windows%20UI%20Library%202.1.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIt%20is%20very%20simple%20to%20use%2C%20just%20set%20the%20collection%20to%20ItemsRepeater%20ItemsSource%20and%20specify%20the%20appearance%20in%20the%20ItemTemplate.If%20you%20need%20scrolling%2C%20just%20wrap%20it%20in%20ScrollViewer.%3C%2FP%3E%0A%3CP%3EThe%20following%20code%20is%20the%20XAML%20that%20defines%20and%20displays%20the%20Items%20property%20of%20the%20string%20array%20in%20the%20code-behind.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%3E%26lt%3BPage%0A%20%20%20%20x%3AClass%3D%22FlowLayoutApp.MainPage%22%0A%20%20%20%20xmlns%3D%22http%3A%2F%2Fschemas.microsoft.com%2Fwinfx%2F2006%2Fxaml%2Fpresentation%22%0A%20%20%20%20xmlns%3Ax%3D%22http%3A%2F%2Fschemas.microsoft.com%2Fwinfx%2F2006%2Fxaml%22%0A%20%20%20%20xmlns%3Alocal%3D%22using%3AFlowLayoutApp%22%0A%20%20%20%20xmlns%3Ad%3D%22http%3A%2F%2Fschemas.microsoft.com%2Fexpression%2Fblend%2F2008%22%0A%20%20%20%20xmlns%3Amc%3D%22http%3A%2F%2Fschemas.openxmlformats.org%2Fmarkup-compatibility%2F2006%22%0A%20%20%20%20xmlns%3Acontrols%3D%22using%3AMicrosoft.UI.Xaml.Controls%22%0A%20%20%20%20mc%3AIgnorable%3D%22d%22%0A%20%20%20%20Background%3D%22%7BThemeResource%20ApplicationPageBackgroundThemeBrush%7D%22%26gt%3B%0A%0A%20%20%20%20%26lt%3BGrid%26gt%3B%0A%20%20%20%20%20%20%20%20%26lt%3BScrollViewer%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3Bcontrols%3AItemsRepeater%20ItemsSource%3D%22%7Bx%3ABind%20Items%7D%22%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3Bcontrols%3AItemsRepeater.ItemTemplate%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BDataTemplate%20x%3ADataType%3D%22x%3AString%22%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BGrid%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BGrid.ColumnDefinitions%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BColumnDefinition%20Width%3D%22Auto%22%20%2F%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BColumnDefinition%20%2F%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%2FGrid.ColumnDefinitions%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BRectangle%20Width%3D%2230%22%20Height%3D%2230%22%20Fill%3D%22AliceBlue%22%20Margin%3D%2210%22%20%2F%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BTextBlock%20Text%3D%22%7Bx%3ABind%7D%22%20Grid.Column%3D%221%22%20VerticalAlignment%3D%22Center%22%20%2F%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%2FGrid%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%2FDataTemplate%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%2Fcontrols%3AItemsRepeater.ItemTemplate%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%2Fcontrols%3AItemsRepeater%26gt%3B%0A%20%20%20%20%20%20%20%20%26lt%3B%2FScrollViewer%26gt%3B%0A%20%20%20%20%26lt%3B%2FGrid%26gt%3B%0A%26lt%3B%2FPage%26gt%3B%3C%2FPRE%3E%0A%3CP%3EIt%20is%20displayed%20as%20follows.%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20754px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F117305i93D19155B7CA4098%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Comments%202019-06-06%20131020.jpg%22%20title%3D%22%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202019-06-06%20131020.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EYou%20can%20display%20the%20wrapping%20content%20by%20specifying%20UniformGridLayout%20in%20Layout.Try%20changing%20the%20XAML%20as%20follows%3A%3C%2FP%3E%0A%3CPRE%3E%26lt%3BPage%0A%20%20%20%20x%3AClass%3D%22FlowLayoutApp.MainPage%22%0A%20%20%20%20xmlns%3D%22http%3A%2F%2Fschemas.microsoft.com%2Fwinfx%2F2006%2Fxaml%2Fpresentation%22%0A%20%20%20%20xmlns%3Ax%3D%22http%3A%2F%2Fschemas.microsoft.com%2Fwinfx%2F2006%2Fxaml%22%0A%20%20%20%20xmlns%3Alocal%3D%22using%3AFlowLayoutApp%22%0A%20%20%20%20xmlns%3Ad%3D%22http%3A%2F%2Fschemas.microsoft.com%2Fexpression%2Fblend%2F2008%22%0A%20%20%20%20xmlns%3Amc%3D%22http%3A%2F%2Fschemas.openxmlformats.org%2Fmarkup-compatibility%2F2006%22%0A%20%20%20%20xmlns%3Acontrols%3D%22using%3AMicrosoft.UI.Xaml.Controls%22%0A%20%20%20%20mc%3AIgnorable%3D%22d%22%0A%20%20%20%20Background%3D%22%7BThemeResource%20ApplicationPageBackgroundThemeBrush%7D%22%26gt%3B%0A%0A%20%20%20%20%26lt%3BGrid%26gt%3B%0A%20%20%20%20%20%20%20%20%26lt%3BScrollViewer%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3Bcontrols%3AItemsRepeater%20ItemsSource%3D%22%7Bx%3ABind%20Items%7D%22%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3Bcontrols%3AItemsRepeater.Layout%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3Bcontrols%3AUniformGridLayout%20MinItemWidth%3D%22200%22%20%2F%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%2Fcontrols%3AItemsRepeater.Layout%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3Bcontrols%3AItemsRepeater.ItemTemplate%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BDataTemplate%20x%3ADataType%3D%22x%3AString%22%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BBorder%20BorderThickness%3D%221%22%20BorderBrush%3D%22Beige%22%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BGrid%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BGrid.ColumnDefinitions%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BColumnDefinition%20Width%3D%22Auto%22%20%2F%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BColumnDefinition%20%2F%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%2FGrid.ColumnDefinitions%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BRectangle%20Width%3D%2230%22%20Height%3D%2230%22%20Fill%3D%22AliceBlue%22%20Margin%3D%2210%22%20%2F%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BTextBlock%20Text%3D%22%7Bx%3ABind%7D%22%20Grid.Column%3D%221%22%20VerticalAlignment%3D%22Center%22%20%2F%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%2FGrid%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%2FBorder%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%2FDataTemplate%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%2Fcontrols%3AItemsRepeater.ItemTemplate%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%2Fcontrols%3AItemsRepeater%26gt%3B%0A%20%20%20%20%20%20%20%20%26lt%3B%2FScrollViewer%26gt%3B%0A%20%20%20%20%26lt%3B%2FGrid%26gt%3B%0A%26lt%3B%2FPage%26gt%3B%0A%3C%2FPRE%3E%0A%3CP%3EWhen%20you%20run%20it%2C%20it%20looks%20like%20this%3A%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F117307iE4898961E019A784%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Uniformgrid.gif%22%20title%3D%22uniformgrid.gif%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EHowever%2C%20the%20problem%20occurs%20when%20the%20content%20size%20is%20variable%20as%20the%20name%20of%20this%20UniformGridLayout.Because%20the%20layout%20becomes%20uniform%2C%20the%20one%20that%20the%20size%20is%20variable%20for%20instance%20cannot%20be%20laid%20out%20as%20thought.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EFor%20example%2C%20suppose%20you%20implement%20a%20divided%20DataTemplateSelector%20template%20that%20contains%20%223%22%20in%20the%20data%20as%20follows%20and%20is%20not%20included.%3C%2FP%3E%0A%3CPRE%3Eusing%20Windows.UI.Xaml%3B%0Ausing%20Windows.UI.Xaml.Controls%3B%0A%0Anamespace%20FlowLayoutApp%0A%7B%0A%20%20%20%20public%20class%20MyTemplateSelector%20%3A%20DataTemplateSelector%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20public%20DataTemplate%20NoThreeTemplate%20%7B%20get%3B%20set%3B%20%7D%0A%20%20%20%20%20%20%20%20public%20DataTemplate%20IsInThreeTemplate%20%7B%20get%3B%20set%3B%20%7D%0A%0A%20%20%20%20%20%20%20%20private%20DataTemplate%20Get(string%20x)%20%3D%26gt%3B%20x.Contains(%223%22)%20%3F%20IsInThreeTemplate%20%3A%20NoThreeTemplate%3B%0A%0A%20%20%20%20%20%20%20%20protected%20override%20DataTemplate%20SelectTemplateCore(object%20item)%20%3D%26gt%3B%20Get((string)item)%3B%0A%0A%20%20%20%20%20%20%20%20protected%20override%20DataTemplate%20SelectTemplateCore(object%20item%2C%20DependencyObject%20container)%20%3D%26gt%3B%20Get((string)item)%3B%0A%20%20%20%20%7D%0A%7D%3C%2FPRE%3E%0A%3CP%3EAnd%20apply%20it%20to%20the%20ItemsRepeater%20that%20set%20the%20UniformGridLayout.%3C%2FP%3E%0A%3CPRE%3E%26lt%3BPage%0A%20%20%20%20x%3AClass%3D%22FlowLayoutApp.MainPage%22%0A%20%20%20%20xmlns%3D%22http%3A%2F%2Fschemas.microsoft.com%2Fwinfx%2F2006%2Fxaml%2Fpresentation%22%0A%20%20%20%20xmlns%3Ax%3D%22http%3A%2F%2Fschemas.microsoft.com%2Fwinfx%2F2006%2Fxaml%22%0A%20%20%20%20xmlns%3Alocal%3D%22using%3AFlowLayoutApp%22%0A%20%20%20%20xmlns%3Ad%3D%22http%3A%2F%2Fschemas.microsoft.com%2Fexpression%2Fblend%2F2008%22%0A%20%20%20%20xmlns%3Amc%3D%22http%3A%2F%2Fschemas.openxmlformats.org%2Fmarkup-compatibility%2F2006%22%0A%20%20%20%20xmlns%3Acontrols%3D%22using%3AMicrosoft.UI.Xaml.Controls%22%0A%20%20%20%20mc%3AIgnorable%3D%22d%22%0A%20%20%20%20Background%3D%22%7BThemeResource%20ApplicationPageBackgroundThemeBrush%7D%22%26gt%3B%0A%20%20%20%20%26lt%3BPage.Resources%26gt%3B%0A%20%20%20%20%20%20%20%20%26lt%3Blocal%3AMyTemplateSelector%20x%3AKey%3D%22myTemplateSelector%22%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3Blocal%3AMyTemplateSelector.IsInThreeTemplate%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BDataTemplate%20x%3ADataType%3D%22x%3AString%22%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BBorder%20BorderThickness%3D%221%22%20BorderBrush%3D%22Beige%22%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BGrid%20Width%3D%22250%22%20Height%3D%22250%22%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BGrid.ColumnDefinitions%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BColumnDefinition%20Width%3D%22Auto%22%20%2F%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BColumnDefinition%20%2F%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BColumnDefinition%20Width%3D%22Auto%22%20%2F%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%2FGrid.ColumnDefinitions%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BRectangle%20Width%3D%2250%22%20Height%3D%2250%22%20Fill%3D%22Blue%22%20Margin%3D%2210%22%20%2F%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BTextBlock%20Text%3D%22%7Bx%3ABind%7D%22%20Grid.Column%3D%221%22%20VerticalAlignment%3D%22Center%22%20%2F%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BRectangle%20Width%3D%2250%22%20Height%3D%2250%22%20Fill%3D%22Blue%22%20Margin%3D%2210%22%20Grid.Column%3D%222%22%20%2F%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%2FGrid%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%2FBorder%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%2FDataTemplate%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%2Flocal%3AMyTemplateSelector.IsInThreeTemplate%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3Blocal%3AMyTemplateSelector.NoThreeTemplate%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BDataTemplate%20x%3ADataType%3D%22x%3AString%22%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BBorder%20BorderThickness%3D%221%22%20BorderBrush%3D%22Beige%22%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BGrid%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BGrid.ColumnDefinitions%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BColumnDefinition%20Width%3D%22Auto%22%20%2F%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BColumnDefinition%20%2F%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%2FGrid.ColumnDefinitions%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BRectangle%20Width%3D%2230%22%20Height%3D%2230%22%20Fill%3D%22AliceBlue%22%20Margin%3D%2210%22%20%2F%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3BTextBlock%20Text%3D%22%7Bx%3ABind%7D%22%20Grid.Column%3D%221%22%20VerticalAlignment%3D%22Center%22%20%2F%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%2FGrid%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%2FBorder%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%2FDataTemplate%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%2Flocal%3AMyTemplateSelector.NoThreeTemplate%26gt%3B%0A%20%20%20%20%20%20%20%20%26lt%3B%2Flocal%3AMyTemplateSelector%26gt%3B%0A%20%20%20%20%26lt%3B%2FPage.Resources%26gt%3B%0A%20%20%20%20%26lt%3BGrid%26gt%3B%0A%20%20%20%20%20%20%20%20%26lt%3BScrollViewer%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3Bcontrols%3AItemsRepeater%20ItemsSource%3D%22%7Bx%3ABind%20Items%7D%22%20ItemTemplate%3D%22%7BStaticResource%20myTemplateSelector%7D%22%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3Bcontrols%3AItemsRepeater.Layout%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3Bcontrols%3AUniformGridLayout%20%2F%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%2Fcontrols%3AItemsRepeater.Layout%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%2Fcontrols%3AItemsRepeater%26gt%3B%0A%20%20%20%20%20%20%20%20%26lt%3B%2FScrollViewer%26gt%3B%0A%20%20%20%20%26lt%3B%2FGrid%26gt%3B%0A%26lt%3B%2FPage%26gt%3B%3C%2FPRE%3E%0A%3CP%3EBecause%20the%20size%20is%20not%20variable%20like%20this%2C%20it%20does%20not%20appear%20properly.%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20757px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F117308i8FEF4C40648280CF%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Comments%202019-06-06%20133651.jpg%22%20title%3D%22%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202019-06-06%20133651.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%3CFONT%20size%3D%225%22%3E%3CSTRONG%3EFlowLayout%3C%2FSTRONG%3E%3C%2FFONT%3E%3C%2FP%3E%0A%3CP%3EFlowLayout%20will%20be%20added%20in%20the%20Windows%20UI%20Library%202.2%20(Preview%20release%20at%20this%20time).If%20you%20use%20this%20in%20ItemsRepeater%2C%20you%20can%20display%20it%20in%20a%20good%20feeling%20in%20the%20case%20like%20the%20previous%20one.Change%20the%20UniformGridLayout%20to%20FlowLayout%20with%20the%20Windows%20UI%20Library%202.2%20(preview).%3C%2FP%3E%0A%3CPRE%3E%26lt%3BPage%0A%20%20%20%20x%3AClass%3D%22FlowLayoutApp.MainPage%22%0A%20%20%20%20xmlns%3D%22http%3A%2F%2Fschemas.microsoft.com%2Fwinfx%2F2006%2Fxaml%2Fpresentation%22%0A%20%20%20%20xmlns%3Ax%3D%22http%3A%2F%2Fschemas.microsoft.com%2Fwinfx%2F2006%2Fxaml%22%0A%20%20%20%20xmlns%3Alocal%3D%22using%3AFlowLayoutApp%22%0A%20%20%20%20xmlns%3Ad%3D%22http%3A%2F%2Fschemas.microsoft.com%2Fexpression%2Fblend%2F2008%22%0A%20%20%20%20xmlns%3Amc%3D%22http%3A%2F%2Fschemas.openxmlformats.org%2Fmarkup-compatibility%2F2006%22%0A%20%20%20%20xmlns%3Acontrols%3D%22using%3AMicrosoft.UI.Xaml.Controls%22%0A%20%20%20%20mc%3AIgnorable%3D%22d%22%0A%20%20%20%20Background%3D%22%7BThemeResource%20ApplicationPageBackgroundThemeBrush%7D%22%26gt%3B%0A%20%20%20%20%26lt%3BPage.Resources%26gt%3B%0A%20%20%20%20%20%20%20%20%26lt%3Blocal%3AMyTemplateSelector%20x%3AKey%3D%22myTemplateSelector%22%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B!--%20%E7%9C%81%E7%95%A5%20--%26gt%3B%0A%20%20%20%20%20%20%20%20%26lt%3B%2Flocal%3AMyTemplateSelector%26gt%3B%0A%20%20%20%20%26lt%3B%2FPage.Resources%26gt%3B%0A%20%20%20%20%26lt%3BGrid%26gt%3B%0A%20%20%20%20%20%20%20%20%26lt%3BScrollViewer%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3Bcontrols%3AItemsRepeater%20ItemsSource%3D%22%7Bx%3ABind%20Items%7D%22%20ItemTemplate%3D%22%7BStaticResource%20myTemplateSelector%7D%22%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3Bcontrols%3AItemsRepeater.Layout%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3Bcontrols%3AFlowLayout%20%2F%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%2Fcontrols%3AItemsRepeater.Layout%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%2Fcontrols%3AItemsRepeater%26gt%3B%0A%20%20%20%20%20%20%20%20%26lt%3B%2FScrollViewer%26gt%3B%0A%20%20%20%20%26lt%3B%2FGrid%26gt%3B%0A%26lt%3B%2FPage%26gt%3B%3C%2FPRE%3E%0A%3CP%3EWhen%20you%20run%20it%2C%20it%20looks%20like%20this%3A%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F117309iB1D1921C9E2E6CBC%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Flowlayout.gif%22%20title%3D%22flowlayout.gif%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EYou%20can%20see%20that%20the%20elements%20of%20multiple%20sizes%20are%20displayed%20properly.%3C%2FP%3E%0A%3CP%3EHowever%2C%20because%20it%20is%20still%20the%20positioning%20of%20the%20experimental%20function%20of%20the%20preview%20stage%2C%20the%20display%20collapses%20when%20I%20scroll%20and%20the%20operation%20becomes%20unstable.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CFONT%20size%3D%225%22%3E%3CSTRONG%3ESummary%3C%2FSTRONG%3E%3C%2FFONT%3E%3C%2FP%3E%0A%3CP%3EWhen%20FlowLayout%20comes%20to%20work%20properly%2C%20it%20should%20be%20possible%20to%20display%20the%20variable%20elements%20of%20various%20sizes%20in%20a%20state%20where%20virtualization%20has%20worked.%3C%2FP%3E%0A%3CP%3EWhen%20it%20comes%20to%20that%2C%20I'm%20looking%20forward%20to%20be%20able%20to%20display%20a%20fairly%20flexible.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Microsoft

Windows UI Library に ItemsRepeater という軽量で仮想化機能がついている ItemsControl のような動きをするクラスがあります。

このクラスはレイアウトをカスタマイズ可能で Windows UI Library 2.1 ではデフォルトで StackLayout と UniformGridLayout が提供されています。

 

使い方は非常にシンプルで、ItemsRepeater の ItemsSource にコレクションを設定して ItemTemplate で見た目を指定するだけです。スクロール機能が必要な場合は ScrollViewer にラップするだけです。

以下のコードは string の配列の Items プロパティをコードビハインドに定義して表示する XAML になります。

 

<Page
    x:Class="FlowLayoutApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FlowLayoutApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <ScrollViewer>
            <controls:ItemsRepeater ItemsSource="{x:Bind Items}">
                <controls:ItemsRepeater.ItemTemplate>
                    <DataTemplate x:DataType="x:String">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>
                            <Rectangle Width="30" Height="30" Fill="AliceBlue" Margin="10" />
                            <TextBlock Text="{x:Bind}" Grid.Column="1" VerticalAlignment="Center" />
                        </Grid>
                    </DataTemplate>
                </controls:ItemsRepeater.ItemTemplate>
            </controls:ItemsRepeater>
        </ScrollViewer>
    </Grid>
</Page>

以下のように表示されます。

コメント 2019-06-06 131020.jpg

Layout に UniformGridLayout を指定すると折り返しコンテンツが表示できます。試しに XAML を以下のように変更します。

<Page
    x:Class="FlowLayoutApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FlowLayoutApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <ScrollViewer>
            <controls:ItemsRepeater ItemsSource="{x:Bind Items}">
                <controls:ItemsRepeater.Layout>
                    <controls:UniformGridLayout MinItemWidth="200" />
                </controls:ItemsRepeater.Layout>
                <controls:ItemsRepeater.ItemTemplate>
                    <DataTemplate x:DataType="x:String">
                        <Border BorderThickness="1" BorderBrush="Beige">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <Rectangle Width="30" Height="30" Fill="AliceBlue" Margin="10" />
                                <TextBlock Text="{x:Bind}" Grid.Column="1" VerticalAlignment="Center" />
                            </Grid>
                        </Border>
                    </DataTemplate>
                </controls:ItemsRepeater.ItemTemplate>
            </controls:ItemsRepeater>
        </ScrollViewer>
    </Grid>
</Page>

実行すると以下のようになります。

uniformgrid.gif

ただ、この UniformGridLayout は名前の通りコンテンツサイズが各々可変の場合に問題が起きます。レイアウトが均一になるので、例えば要素ごとにサイズが可変のものは思った通りにレイアウトできません。

 

例えば、以下のようにデータに "3" が含まれているものと含まれていないものでテンプレートをわける DataTemplateSelector を実装したとします。

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace FlowLayoutApp
{
    public class MyTemplateSelector : DataTemplateSelector
    {
        public DataTemplate NoThreeTemplate { get; set; }
        public DataTemplate IsInThreeTemplate { get; set; }

        private DataTemplate Get(string x) => x.Contains("3") ? IsInThreeTemplate : NoThreeTemplate;

        protected override DataTemplate SelectTemplateCore(object item) => Get((string)item);

        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container) => Get((string)item);
    }
}

そして、それを UniformGridLayout を設定した ItemsRepeater に適用します。

<Page
    x:Class="FlowLayoutApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FlowLayoutApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Page.Resources>
        <local:MyTemplateSelector x:Key="myTemplateSelector">
            <local:MyTemplateSelector.IsInThreeTemplate>
                <DataTemplate x:DataType="x:String">
                    <Border BorderThickness="1" BorderBrush="Beige">
                        <Grid Width="250" Height="250">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Rectangle Width="50" Height="50" Fill="Blue" Margin="10" />
                            <TextBlock Text="{x:Bind}" Grid.Column="1" VerticalAlignment="Center" />
                            <Rectangle Width="50" Height="50" Fill="Blue" Margin="10" Grid.Column="2" />
                        </Grid>
                    </Border>
                </DataTemplate>
            </local:MyTemplateSelector.IsInThreeTemplate>
            <local:MyTemplateSelector.NoThreeTemplate>
                <DataTemplate x:DataType="x:String">
                    <Border BorderThickness="1" BorderBrush="Beige">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>
                            <Rectangle Width="30" Height="30" Fill="AliceBlue" Margin="10" />
                            <TextBlock Text="{x:Bind}" Grid.Column="1" VerticalAlignment="Center" />
                        </Grid>
                    </Border>
                </DataTemplate>
            </local:MyTemplateSelector.NoThreeTemplate>
        </local:MyTemplateSelector>
    </Page.Resources>
    <Grid>
        <ScrollViewer>
            <controls:ItemsRepeater ItemsSource="{x:Bind Items}" ItemTemplate="{StaticResource myTemplateSelector}">
                <controls:ItemsRepeater.Layout>
                    <controls:UniformGridLayout />
                </controls:ItemsRepeater.Layout>
            </controls:ItemsRepeater>
        </ScrollViewer>
    </Grid>
</Page>

このようにサイズが可変ではないので、ちゃんと表示されません。

コメント 2019-06-06 133651.jpg

FlowLayout

Windows UI Library の 2.2 (現時点でプレビューリリース)で FlowLayout が追加されます。これを ItemsRepeater で使うと先ほどのようなケースでもいい感じに表示できます。Windows UI Library を 2.2 (プレビュー) にして UniformGridLayout を FlowLayout に変更します。

<Page
    x:Class="FlowLayoutApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FlowLayoutApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Page.Resources>
        <local:MyTemplateSelector x:Key="myTemplateSelector">
            <!-- 省略 -->
        </local:MyTemplateSelector>
    </Page.Resources>
    <Grid>
        <ScrollViewer>
            <controls:ItemsRepeater ItemsSource="{x:Bind Items}" ItemTemplate="{StaticResource myTemplateSelector}">
                <controls:ItemsRepeater.Layout>
                    <controls:FlowLayout />
                </controls:ItemsRepeater.Layout>
            </controls:ItemsRepeater>
        </ScrollViewer>
    </Grid>
</Page>

実行すると、以下のようになります。

flowlayout.gif

複数サイズの要素がきちんと表示されていることがわかります。

ただ、まだプレビュー段階の実験的機能の位置づけなのでスクロールをすると表示が崩れたり動作が不安定になります。

 

まとめ

FlowLayout がちゃんと動くようになると、色々なサイズの可変要素を仮想化が効いた状態で表示することが可能になるはずです。

そうなってくると、結構柔軟な表示が可能になると思うので楽しみですね。