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>
I am using the RichTextEditor in our .NET MAUI app and have the following:
<telerik:RadRichTextEditor
x:Name="paragraphEditor"
Grid.Row="1"
AutomationId="Editor"
BorderColor="{StaticResource Primary}"
BorderThickness="1"
Source="{Binding Test.TestWriteupHTML}" />
public class Test: INotifyPropertyChanged
{
private string? _testWriteupHTML;
public string? TestWriteupHTML
{
get => _testWriteupHTML;
set
{
if (_testWriteupHTML != value)
{
_testWriteupHTML = value;
OnPropertyChanged(nameof(TestWriteupHTML));
}
}
}
}
I have a method to update the TestWriteupHTMP property, while debugging I can see that it gets updated properly but on the UI the editor is not updating, any suggestions?
I attempted to add a dropdown in RadListView. However, when running on an iOS device, clicking the dropdown interferes with the pull-to-refresh functionality, whereas it works fine on Android.
RadListView
custom dropdown popup in RadListView
custom drop-down popup
When I want to select a word in the first line of a text in RichTextBox, then a context menu with "Cut, copy .." appears and hides
the toolbar. So I can't do any action on the selected text. How can I disable the context menu?
Hello,
Even though I have set up VisualState for RadEntry as below; However, RadEntry always has a default background color of white when receiving focus (mouse click) - in WINDOWS platform, it only changes color as in the VisualState setting after moving the mouse out later. Please explain and guide how to solve the problem.
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{AppThemeBinding Dark={StaticResource DarkMode_FrameBackground}, Light= {StaticResource LightMode_FrameBackground}}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="#336699"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Focused">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="#336699" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
Hi,
I am using the ListPickerButtonToolbarItem list picker with MVVM and binding to an observable property,
If I set the selected item to null (so none is selected) this doesnt seem to deselect it
Its not highlighted the same as when its selected but it is still styled differently to the other other items and looks selected when I go back to choose another item.
How do we deselect the item or style the selected item in the toolbar ListPickerButtonToolbarItem so at least it looks the same selected or not selected?
My app does not have a dark theme, only light theme. My PC is running with dark theme, and that creates some issues with styling on these dropdowns:
So how do I change the text color, slider color as well as font for these?
Is there a way to allow copying from the RadDataGrid for the purpose of pasting into another application (Excel, text document, etc.?)
Would it be possible to copy an entire row or would it be restricted to the cell only?
THe docs say this
I can add a HeaderItemTemplate to get what I need, but how do I add a HeaderTemplate and keep the Item Template controls?
Relatively new to XAML and using these controls..
I am trying to use the Tab control in a simar way to a previous post, with icon, label, close button to try and dynamically add, remove tabs etc
It seems when the MAUI desktop window is sized smaller, the tabs are scrollable/slidable, but its not obvious to the user, so want to show some kind of indicator (similar to what the toolbar does) maybe this a feature to add?
Feature: have scrollable buttons to scroll the Header Items like how the toolbar works