XAML
A language based on Extensible Markup Language (XML) that enables developers to specify a hierarchy of objects with a set of properties and logic.
857 questions
This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
How to align items using ItemRepeater in a non uniform layout in Winui3.
Here i need some of my tile to take 2 times the width
Not sure if it is what you want to get, but you can change width in ElementPrepared
A test by changing width from 100 to 200 for items 2 and 6 in 10 items :
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Button x:Name="myButton" Grid.Row="0" Click="MyButton_Click">Click Me</Button>
<ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
<ItemsRepeater x:Name="ir1" ItemsSource="{x:Bind MyItems}">
<ItemsRepeater.Layout>
<LinedFlowLayout/>
</ItemsRepeater.Layout>
<ItemsRepeater.ItemTemplate>
<DataTemplate x:DataType="x:String">
<Border x:Name="ItemBorder"
Width="100"
Height="100"
Margin="5"
Background="Blue"/>
</DataTemplate>
</ItemsRepeater.ItemTemplate>
</ItemsRepeater>
</ScrollViewer>
</Grid>
public ObservableCollection<string> MyItems { get; } = new();
private async void MyButton_Click(object sender, RoutedEventArgs e)
{
{
for (int i = 0; i < 10; i++)
{
MyItems.Add($"Item {i}");
}
ir1.ElementPrepared += ir1_ElementPrepared;
return;
}
}
private void ir1_ElementPrepared(ItemsRepeater sender, ItemsRepeaterElementPreparedEventArgs args)
{
int nIndex = sender.GetElementIndex(args.Element);
if (args.Element is FrameworkElement element)
{
if (element.FindName("ItemBorder") is Border border)
{
Test items 2 and 6 with Width = 200 and in Red
if (nIndex == 2 || nIndex == 6)
{
border.Width = 200;
border.Background = new SolidColorBrush(Microsoft.UI.Colors.Red);
}
else
{
border.Width = 100;
border.Background = new SolidColorBrush(Microsoft.UI.Colors.Blue);
}
}
}
}