Questions on UI for .NET MAUI Forum

1 answer

146 views

How do I address Popup view truncation in iOS?

This is a follow-up question this question.

I followed the example provided for the question above in order to show a RadPopup programmatically from a ViewModel. However, I am running into a specific issue on iOS where the popup truncates the content at the bottom.

My CreatePopupContent method body looks like this:

private View CreatePopupContent() 
{    
    VerticalStackLayout stack = new VerticalStackLayout() 
    {
        Spacing = 10,
        Padding = new Thickness(20),
        HorizontalOptions = LayoutOptions.Center,
        VerticalOptions = LayoutOptions.Fill,
        BackgroundColor = /*(Color)Application.Current.Resources.GetValueOrNull("Gray100")*/ Colors.LightGray,
        WidthRequest = 350
    };

    Label titleLabel = new Label() 
    {
        Text = /*popupTitle*/"Lorum ipsum",
    };

    stack.Children.Add(titleLabel);

    Label messageLabel = new Label() 
    {
        Text = /*popupMessage*/ "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    };

    stack.Children.Add(messageLabel);

    var dismiss = new Button { Text = "Ok", Command = this.ClosePopupCommand, CommandParameter= "Ok" };

    var lorum= new Button { Text ="Lorum", Command = this.ClosePopupCommand, CommandParameter = "Lorum" };
    var ipsum= new Button { Text =  "Ipsum", Command = this.ClosePopupCommand, CommandParameter =  "Ipsum" };

    stack.Children.Add(dismiss);
    stack.Children.Add(lorum);
    stack.Children.Add(ipsum);

    Border border = new Border()
    {
        StrokeShape = new RoundRectangle
        {
            CornerRadius = new CornerRadius(20)
        },
        Content = stack,
        VerticalOptions = LayoutOptions.Fill,
    };

    return border;
}

After the message label reaches a certain length, the popup begins to truncate the bottom-most buttons. If the message increases in length, the bottom-most buttons are clipped out entirely.

Is there any way to fix this or has anyone encountered this issue before? It's brand new to me.

Popup

answered on 07 Sep 2023

1 answer

461 views

Get all music files from device using .NET MAUI

I am creating a music player app so what i want to automatically load all songs from phone or windows computer and display them in a listView so that I can use them to play from selecting them.

I am kind of a beginner :)

Thanks

General Discussions

ListView (obsolete)

Path

updated answer on 05 Sep 2023

1 answer

247 views

Combobox object as a command parameter of a button

I have a button where I want to navigate to another page with the object of the combobox as the command parameter of the button that the user clicks. How do I reference the object in the command parameter.

<telerik:RadComboBox x:Name="arresteeListPicker" ItemsSource="{Binding Arrestees}"
                                           DisplayMemberPath="ArresteeFullName"
                                         Placeholder="Arrestees"
                                         IsEditable="False">
                        
                        <telerik:RadComboBox.ItemTemplate>
                            <DataTemplate x:DataType="model:Arrestee">
                                <Label Text="{Binding ArresteeFullName}"
                                      ></Label>
                            </DataTemplate>
                        </telerik:RadComboBox.ItemTemplate>
                    </telerik:RadComboBox>
                    <Button x:Name="selectArresteeBtn"
                            Text="Select"
                            Command="{Binding SelectArresteeCommand}" 
                            CommandParameter= ?????????
                            WidthRequest="70"
                            HorizontalOptions="Start"
                            Margin="0, 10, 0, 0"
                            />

Thank you in advance,

Scott

Button

ComboBox

answered on 05 Sep 2023

1 answer

106 views

Can still change selection in RadListView when IsEnabled is False

So I have a problem,

when i do this:

<telerik:RadListView IsEnabled="false" SelectionMode="Single" SelectionGesture="Tap">

I can still select/deselect item even though the component is disabled. It just changes color, but behaves like enabled component.

Is this a bug, or am I missing something??

ListView (obsolete)

answered on 04 Sep 2023

1 answer

410 views

How do I show a RadPopup programmatically in .NET MAUI

I'm writing an application that needs to show a popup with a message and different number of buttons depending on the result of an API call. To achieve this with a regular MAUI toolkit popup, I'm using

App.Current.MainPage.ShowPopupAsync

However, this doesn't work with RadPopups. Is there anyway to show a RadPopup programmatically and return the result of a button click?

Popup

answered on 31 Aug 2023

1 answer

109 views

Telerik RadPieChart blocks refreshview

Hi, I have a refreshview with a grid that contains a some labels, a RadPieChart and a CollectionView.

However the existence of the RadPieChart disables the functions of the refreshview on the collectionview. If i replace it with a boxview that has the same view properties set it works fine, but then i'm missing the chart.

It seems like there is some kind of override on the refreshview from the chart. Is there a way to fix this?

<!--<BoxView x:Name="boxtest"
         Grid.Row="4"
         BackgroundColor="Red"
         VerticalOptions="Fill"
         IsEnabled="False"
         Margin="0, 16">
         
    
</BoxView>-->
<telerik:RadPieChart Grid.Row="4"
                     x:Name="AbsencePieChart"
                     BackgroundColor="Red"
                     VerticalOptions="Fill"
                     Palette="{Binding Path=PieChartDataPoints, Converter={StaticResource PieChartToChartPalette}}"
                     IsEnabled="False"
                     Margin="0, 16">
    <telerik:RadPieChart.Series>
        <telerik:PieSeries ItemsSource="{Binding Path=PieChartDataPoints}"
                           ValueBinding="Value" />
    </telerik:RadPieChart.Series>
</telerik:RadPieChart>

Chart

answered on 29 Aug 2023

0 answers

167 views

DataGrid Selection Issue

Good morning,

We are using the Telerik DataGrid in a .NET MAUI project. When I first navigate to the page, I am able to select the rows with no issue. When I go to a different tab (or different page), and then navigate back to the page where the DataGrid was, I am no longer able to make any selections to the row unless I add or remove an item from the ItemSource. Any suggestions?

  <telerik:DataGridColumnHeaderStyle x:Key="HeaderStyle"
                                     BackgroundColor="#0081C6"
                                     TextColor="White"
                                     HoverBackgroundColor="#0081C6"
                                     TextFontSize="16"
                                     TextFontAttributes="Bold"/>
  <telerik:DataGridBorderStyle x:Key="SelectedBackground"
                       BackgroundColor ="#EEEEEE"/>
  <telerik:DataGridBorderStyle x:Key="MouseHoverStyle"
                       BackgroundColor="Transparent"/>

  <telerik:RadDataGrid x:Name="SetInformationDataGrid" AutomationId="SetInformationDataGrid" UserGroupMode="Disabled"
                       ItemsSource="{Binding ConcreteCylinderSampleInfo.SetInformationList}" 
                       AutoGenerateColumns="False"
                       SelectionMode="Multiple" HeightRequest="300"
                       MouseHoverStyle="{StaticResource MouseHoverStyle}" SelectionStyle="{StaticResource SelectedBackground}">
      <telerik:RadDataGrid.Columns>
          <telerik:DataGridTextColumn  PropertyName="Order" HeaderText="#" CanUserEdit="False" CanUserGroup="False"  CanUserFilter="False" CanUserSort="False" HeaderStyle="{StaticResource HeaderStyle}"/>
          <telerik:DataGridTextColumn PropertyName="Type" HeaderText="Type"  CanUserEdit="False" CanUserFilter="False" CanUserSort="False" HeaderStyle="{StaticResource HeaderStyle}"/>
          <telerik:DataGridTextColumn PropertyName="DisplayAge" HeaderText="Age" CanUserEdit="False" CanUserFilter="False" CanUserSort="False" HeaderStyle="{StaticResource HeaderStyle}"/>
      </telerik:RadDataGrid.Columns>
  </telerik:RadDataGrid>

DataGrid

asked on 28 Aug 2023

1 answer

148 views

RadItemsControl ScrollTo(index) - How Do I Scroll An items Control Programatically

I have an items control that I am loading in a descending order (chat formate) and then will add new messages async.

I need to be able to scroll to the bottom of the list when I load the collection, and again after every message. I see a handler , but not sure how to implement this in codebehind file.

Do you have an example of how to scroll programatically or is there a way to invert the RaditemsControl orientation?

Thanks

Billy

ItemsControl

answered on 24 Aug 2023

1 answer

146 views

RadSideDrawer not opening the DrawerContent for MAUI Windows

Hi Telerik,

I trying to run my app in windows, and observe that the Telerik RadSlideDrawer is not opening, to view the content, whereas the same code works fine in Android.

Code:

App in Windows:

App in Android (Works fine):

Thanks,

Mohammed Rameez Raza (Rameez).

SideDrawer

answered on 23 Aug 2023

1 answer

104 views

GaugeBarIndictor does not honor origin of axis and fill starts at 0 instead of Axis.Minimum

As an example, if we define the Axis (GaugeLinearAxis) Min and Max from -20 to 100, and the GaugeBarIndictor value is set to 35, the Fill starts at 0 and ends at 35, rather than starting at -20 and ending at 35.

Similarly, if the GaugeBarIndictor value is set to -10, the fill starts at 0, and ends at -10, rather than -20 to -10.

This behavior occurs on both windows and android.

Xaml

 <telerik:RadRadialGauge x:Name="gauge"
                            AutomationId="gauge">
        <telerik:RadRadialGauge.Axis>
            <telerik:GaugeLinearAxis x:Name="axis" />
        </telerik:RadRadialGauge.Axis>
        <telerik:RadRadialGauge.Indicators>
            <telerik:GaugeBarIndicator x:Name="barIndicator" />
            <telerik:GaugeNeedleIndicator x:Name="needle" />            
        </telerik:RadRadialGauge.Indicators>
        <telerik:RadRadialGauge.Ranges>
            <telerik:GaugeRangesDefinition x:Name="rangeDefinition">
                <telerik:GaugeGradientRange x:Name="mainRange">
                    <telerik:RadGradientStop x:Name="mainRangeStart" />
                    <telerik:RadGradientStop x:Name="mainRangeEnd" />
                </telerik:GaugeGradientRange>
            </telerik:GaugeRangesDefinition>
        </telerik:RadRadialGauge.Ranges>
    </telerik:RadRadialGauge>

Code Behind:

axis.Minimum = MinValue;
axis.Maximum = MaxValue;

private void SetValue(float? value)
{
        if (value == null)
        {           
            barIndicator.Value = MinValue;
        }
        else
        {        
            barIndicator.Value = value.Value;
        }
}

Gauge

updated answer on 22 Aug 2023