Questions on UI for .NET MAUI Forum

1 answer

304 views

Hi
I'm new in .Net MAUI.
I want to add some high-resolution images in my app. The dimensions of the images are about 7000*4000 pixels, and they are layered on top of each other. (Layers will visible/invisible by buttons)
There is no problem on Windows platform, but when I run it on Android device or emulator, it runs very slow and laggy.
Considering that by double-clicking on the image, their scale will double or triple, if I reduce their dimensions, the final quality will decrease.
Is there a solution?

ImageEditor

Map

answered on 29 Dec 2023

1 answer

197 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

200 views

RichTextEditor Data Binding Issue

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?

RichTextEditor

answered on 19 Dec 2023

0 answers

71 views

About on IOS devices can't pull to refresh in RadListView control

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

ListView (obsolete)

Popup

asked on 18 Dec 2023

2 answers

56 views

Context menu hides toolbar of richtextbox

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?

RichTextEditor

updated answer on 13 Dec 2023

1 answer

123 views

.NET 7 -> .NET 8 issue with telerik components on iOS, application crashed

Android version works fine.
iOS version throw error when page has a Telerik Control on it and you can see error below.

Our .csproj file:
<PropertyGroup>
<TargetFrameworks>net8.0-android;net8.0-ios;net8.0-maccatalyst</TargetFrameworks>
<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net8.0-windows10.0.19041.0</TargetFrameworks>
....

<OutputType>Exe</OutputType>
<UseMaui>true</UseMaui>
<SingleProject>true</SingleProject>
<ImplicitUsings>enable</ImplicitUsings>
<Nullable>enable</Nullable>
....
</PropertyGroup>

BusyIndicator

answered on 13 Dec 2023

1 answer

177 views

RadEntry always have background color is white

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>

Entry

answered on 07 Dec 2023

0 answers

91 views

How to select non on ListPickerButtonToolbarItem

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?