Rank 3
Iron
Iron
Iron
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?
1 Answer, 1 is accepted
Hello Mark,
To achieve your requirement, you can use the BindableLayout attached properties directly on the WrapLayout like so:
<telerik:RadWrapLayout BindableLayout.ItemsSource="{Binding HashTags, Mode=TwoWay}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Button Text="{Binding HashTag}" Style="{StaticResource hashTagButtonStyle }" CommandParameter="{Binding HashTag}" FlowDirection="LeftToRight"></Button>
</DataTemplate>
</BindableLayout.ItemTemplate>
</telerik:RadWrapLayout>I also attached a sample project showing this. Can you give it a try and let me know if it helps?
Regards,
Martin Ivanov
Progress Telerik
Rank 3
Iron
Iron
Iron