Questions on UI for .NET MAUI Forum

2 questions

1 answer

63 views

How do we use the WrapLayout Control with dynamic items?

I have tried this sort of thing to create a button that wrap within an area (and scroll if they don't fit)

<ScrollView x:Name="scrollView" Grid.Row="1" Grid.Column="0" VerticalOptions="Fill" HorizontalOptions="Fill">
    <telerik:RadWrapLayout Orientation="Horizontal" BackgroundColor="#404040" VerticalOptions="Fill" HorizontalOptions="Fill">
        <telerik:RadItemsControl x:Name="HashTagList" ItemsSource="{Binding HashTags, Mode=TwoWay}" VerticalOptions="Fill" HorizontalOptions="Fill">
            <telerik:RadItemsControl.ItemTemplate>
                <DataTemplate>
                    <Button Text="{Binding HashTag}" Style="{StaticResource hashTagButtonStyle }" CommandParameter="{Binding HashTag}"></Button>
                </DataTemplate>
            </telerik:RadItemsControl.ItemTemplate>
        </telerik:RadItemsControl>
    </telerik:RadWrapLayout>
</ScrollView>

The buttons are only rendered in a stack, how do we render out buttons that will work like the doc example, except the buttons are added dynamically

Ideally the WrapLayout has an ItemSource and DataTemplate like an Items Control?

Am I missing something?

Some things I have tried

This gives me an exception : Layout cycle detected. Layout could not complete.

<ScrollView x:Name="scrollView" Grid.Row="1" Grid.Column="0" VerticalOptions="Fill" HorizontalOptions="Fill">
    <telerik:RadWrapLayout Orientation="Horizontal" BackgroundColor="#404040" VerticalOptions="Fill" HorizontalOptions="Fill">
        <FlexLayout Wrap="Wrap" BindableLayout.ItemsSource="{Binding HashTags, Mode=TwoWay}" VerticalOptions="Fill" HorizontalOptions="Fill" FlowDirection="LeftToRight">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <Button Text="{Binding HashTag}" Style="{StaticResource hashTagButtonStyle }" CommandParameter="{Binding HashTag}" FlowDirection="LeftToRight"></Button>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </FlexLayout>
    </telerik:RadWrapLayout>
</ScrollView>

This works (ie not using the WrapLayout)

<ScrollView x:Name="scrollView" Grid.Row="1" Grid.Column="0" VerticalOptions="Fill" HorizontalOptions="Fill" Padding="4, 4, 4, 4" BackgroundColor="#404040">
    <!--<telerik:RadWrapLayout Orientation="Horizontal" BackgroundColor="#404040" VerticalOptions="Fill" HorizontalOptions="Fill">-->
        <FlexLayout Wrap="Wrap" BindableLayout.ItemsSource="{Binding HashTags, Mode=TwoWay}" VerticalOptions="Fill" HorizontalOptions="Fill" FlowDirection="LeftToRight">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <Button Text="{Binding HashTag}" Style="{StaticResource hashTagButtonStyle }" CommandParameter="{Binding HashTag}" FlowDirection="LeftToRight"></Button>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </FlexLayout>
    <!--</telerik:RadWrapLayout>-->
</ScrollView>

Is this control for static content only?

WrapLayout

answered on 20 Dec 2023

1 answer

120 views

Telerik UI for Maui Examples is not building.

Hi,

I am trying to run the `SDKBrowserMaui` Example locally and `UseTelerik()` function is throwing the below error. I also tried to use `Telerik UI for Maui` in my test project following this documentation TelerikUI and landed in the same issue. Is something changed? Any help is much appreciated.