Questions on UI for .NET MAUI Forum

1 answer

204 views

RadListPicker - some problems

Hi,

I tried to find combo box and I found this control in your documentation

1. The is too big, how I make it smaller when it open.

2.I do not see the values inside.

3.How I center the selected value.

4.Screenshhot.

  public class ResultsItemsViewModel
    {
        public ObservableCollection<ResultsItem> ResultsItems { get; set; }
        public ResultsItemsViewModel()
        {
            this.ResultsItems = new ObservableCollection<ResultsItem>()
            
            {
              new ResultsItem { Value = "OK" },
              new ResultsItem { Value = "Failed" },
             };
        }
    }

 <HorizontalStackLayout Grid.Row="1" Grid.Column="0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Margin="10">
                <Label Text="Results:"/>
                <telerikInput:RadListPicker Placeholder="Select Result" HeightRequest="30"
                          ItemsSource="{Binding ResultsItems}"
                          DisplayMemberPath="Value"
                         SelectionChanged="OnResultsSelectionChanged">
                    <telerikInput:RadListPicker.BindingContext>
                        <local:ResultsItemsViewModel/>
                    </telerikInput:RadListPicker.BindingContext>
                </telerikInput:RadListPicker>
            </HorizontalStackLayout>

ListPicker

answered on 11 Mar 2022

1 answer

217 views

Chart - problem with one point - not seen

Hi,

I used this documentation:

https://docs.telerik.com/devtools/maui/controls/chart/axes/axes-datetime-continuous-axis

Chart

answered on 11 Mar 2022

1 answer

152 views

telerik:RadTabView - set specific tab to be active in run time and set it border with red ?

HI,

How to set specific tan in runtime to be active due to error and set it border and text to be red;

Thanks,

TabView

answered on 11 Mar 2022

1 answer

1.7K+ views

Button style hand when mouse over like in css

Hi,

I want to style button with mouse over like in css.

Thanks,

Button

answered on 11 Mar 2022

1 answer

81 views

Gague are cutted

Hi,

  <ContentView.Content>
        <Grid RowDefinitions="auto, auto, auto,*" ColumnDefinitions="*">
            <Grid Grid.Row="0" Grid.Column="0" ColumnDefinitions="*,auto,auto,auto,auto,*" ColumnSpacing="45">
                <telerikGauges:RadRadialGauge x:Name="gaugeTotalFiles" Grid.Column="1" >
                    <telerikGauges:RadRadialGauge.Axis>
                        <telerikGauges:GaugeLinearAxis Maximum="200"
                                     Minimum="0"
                                     Step="25" />
                    </telerikGauges:RadRadialGauge.Axis>
                    <telerikGauges:RadRadialGauge.Indicators>
                        <telerikGauges:GaugeNeedleIndicator Offset="30" Value="60" />
                        <telerikGauges:GaugeShapeIndicator Value="80" />
                    </telerikGauges:RadRadialGauge.Indicators>
                    <telerikGauges:RadRadialGauge.Ranges>
                        <telerikGauges:GaugeRangesDefinition>
                            <telerikGauges:GaugeRange Color="#03446a"
                                    From="0"
                                    To="200" />
                          </telerikGauges:GaugeRangesDefinition>
                    </telerikGauges:RadRadialGauge.Ranges>
                </telerikGauges:RadRadialGauge>
                <telerikGauges:RadRadialGauge x:Name="gaugePushFiles" Grid.Column="2">
                    <telerikGauges:RadRadialGauge.Axis>
                        <telerikGauges:GaugeLinearAxis Maximum="200"
                                     Minimum="0"
                                     Step="25" />
                    </telerikGauges:RadRadialGauge.Axis>
                    <telerikGauges:RadRadialGauge.Indicators>
                        <telerikGauges:GaugeNeedleIndicator Offset="30" Value="60" />
                        <telerikGauges:GaugeShapeIndicator Value="80" />
                    </telerikGauges:RadRadialGauge.Indicators>
                    <telerikGauges:RadRadialGauge.Ranges>
                        <telerikGauges:GaugeRangesDefinition>
                            <telerikGauges:GaugeRange Color="#03446a"
                                    From="0"
                                    To="200" />
                        </telerikGauges:GaugeRangesDefinition>
                    </telerikGauges:RadRadialGauge.Ranges>
                </telerikGauges:RadRadialGauge>
                <telerikGauges:RadRadialGauge x:Name="gaugeTotalPulled" Grid.Column="3">
                    <telerikGauges:RadRadialGauge.Axis>
                        <telerikGauges:GaugeLinearAxis Maximum="200"
                                     Minimum="0"
                                     Step="25" />
                    </telerikGauges:RadRadialGauge.Axis>
                    <telerikGauges:RadRadialGauge.Indicators>
                        <telerikGauges:GaugeNeedleIndicator Offset="30" Value="60" />
                        <telerikGauges:GaugeShapeIndicator Value="80" />
                    </telerikGauges:RadRadialGauge.Indicators>
                    <telerikGauges:RadRadialGauge.Ranges>
                        <telerikGauges:GaugeRangesDefinition>
                            <telerikGauges:GaugeRange Color="#03446a"
                                    From="0"
                                    To="200" />
                        </telerikGauges:GaugeRangesDefinition>
                    </telerikGauges:RadRadialGauge.Ranges>
                </telerikGauges:RadRadialGauge>
                <telerikGauges:RadRadialGauge x:Name="gaugeTotalFailed" Grid.Column="4">
                    <telerikGauges:RadRadialGauge.Axis>
                        <telerikGauges:GaugeLinearAxis Maximum="200"
                                     Minimum="0"
                                     Step="25" />
                    </telerikGauges:RadRadialGauge.Axis>
                    <telerikGauges:RadRadialGauge.Indicators>
                        <telerikGauges:GaugeNeedleIndicator Offset="30" Value="60" />
                        <telerikGauges:GaugeShapeIndicator Value="80" />
                    </telerikGauges:RadRadialGauge.Indicators>
                    <telerikGauges:RadRadialGauge.Ranges>
                        <telerikGauges:GaugeRangesDefinition>
                            <telerikGauges:GaugeRange Color="#03446a"
                                    From="0"
                                    To="200" />
                        </telerikGauges:GaugeRangesDefinition>
                    </telerikGauges:RadRadialGauge.Ranges>
                </telerikGauges:RadRadialGauge>
            </Grid>
        </Grid>
    </ContentView.Content>

Gauge

answered on 11 Mar 2022

2 answers

133 views

Chart - view model get data from outside

Hi,

I have two RadDateTimePickers and search button I want when I click on button the data on

chart need to be updated.

How I pass datetime picker selection to view model or there is other simple way?

Thanks,

<telerikChart:RadCartesianChart Grid.Row="4" Grid.Column="0">

                <telerikChart:RadCartesianChart.BindingContext>
                    <local:TotalFilesDividedByRoutesDataViewModel />
                </telerikChart:RadCartesianChart.BindingContext>
                <telerikChart:RadCartesianChart.HorizontalAxis>
                    <telerikChart:CategoricalAxis PlotMode="OnTicks"
                                    MajorTickInterval="2"
                                    GapLength="0.5"/>
                </telerikChart:RadCartesianChart.HorizontalAxis>
                <telerikChart:RadCartesianChart.VerticalAxis>
                    <telerikChart:NumericalAxis LabelFitMode="MultiLine" />
                </telerikChart:RadCartesianChart.VerticalAxis>
                <telerikChart:RadCartesianChart.Series>
                    <telerikChart:BarSeries ValueBinding="Value"
                                    CategoryBinding="RouteName"
                                    ItemsSource="{Binding Data}" />
                </telerikChart:RadCartesianChart.Series>
            </telerikChart:RadCartesianChart>

Chart

DatePicker

TimePicker

answered on 11 Mar 2022

1 answer

79 views

Gague - change values in run time

Hi,

How I change in run time(in code behind):

-GeneralLinerAxis/Maximun property.

-GaugeNeedleIndicator - Value property.

- GaugeShapeIndicator - Value property.

 <telerikGauges:RadRadialGauge x:Name="gaugeTotalFiles"  >
                    <telerikGauges:RadRadialGauge.Axis>
                            <telerikGauges:GaugeLinearAxis Maximum="200"
                                     Minimum="0"
                                     Step="25" />
                    </telerikGauges:RadRadialGauge.Axis>
                    <telerikGauges:RadRadialGauge.Indicators>
                        <telerikGauges:GaugeNeedleIndicator Offset="30" Value="60" />
                        <telerikGauges:GaugeShapeIndicator Value="80" />
                    </telerikGauges:RadRadialGauge.Indicators>
                    <telerikGauges:RadRadialGauge.Ranges>
                        <telerikGauges:GaugeRangesDefinition>
                            <telerikGauges:GaugeRange Color="#03446a"
                                    From="0"
                                    To="200" />
                          </telerikGauges:GaugeRangesDefinition>
                    </telerikGauges:RadRadialGauge.Ranges>
                </telerikGauges:RadRadialGauge>

Gauge

answered on 10 Mar 2022

0 answers

628 views

Location of popup - cause problem

Hi,

When I run this login page without popup is OK.

But When I add it to the content page he throw exception in runtime , why ?

System.NullReferenceException: 'Object reference not set to an instance of an object.'

Thanks,

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AutomationClient.MAUI.LoginPage"
             xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.Maui.Controls.Compatibility"
             xmlns:telerik="clr-namespace:Telerik.Maui.Controls;assembly=Telerik.Maui.Controls"
             xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.Maui.Controls.Compatibility" 
              xmlns:telerikMauiControls="clr-namespace:Telerik.Maui.Controls;assembly=Telerik.Maui.Controls">
    <Grid>
      
        <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="110"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="450"/>
            <RowDefinition Height="130"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="350"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Image  Grid.Row="0" Grid.RowSpan="4" Grid.ColumnSpan="3" Source="loginbackground.png" Aspect="Fill"/>
        <Image  Grid.Row="0" Grid.RowSpan="4" Source="gslogo.png" WidthRequest="250" HeightRequest="110"/>
   
        <telerik:RadBorder Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" BorderColor="AliceBlue" BorderThickness="2"  HorizontalOptions="Center" VerticalOptions="Center" CornerRadius="15, 5, 15, 5">
            <Grid BackgroundColor="White" RowSpacing="25" RowDefinitions="Auto,Auto,Auto,Auto,Auto, Auto,Auto,Auto,Auto">
                <Label  Grid.Row="0" Grid.Column ="0"  Text="Automation Client"  FontSize="Large" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
                <Label Grid.Row="1" Grid.Column ="0"  Text="Login"  FontSize="Title" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
                <Entry Grid.Row="2" Grid.Column ="0" x:Name="txtName" Placeholder="User Name" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" WidthRequest="200" />
                <Entry Grid.Row="3" Grid.Column ="0"   x:Name="txtPassword" Placeholder="Password"  HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" WidthRequest="200" IsPassword="True"  />
                <telerik:RadButton Grid.Row="4" Grid.Column ="0" Text="Login" HorizontalOptions="CenterAndExpand" VerticalOptions="Center" Clicked="OnLoginClicked"/>
                
                 <telerikPrimitives:RadBusyIndicator Grid.Row="7" Grid.Column ="0" x:Name="busyIndicator" IsVisible="false"
                                  AnimationContentHeightRequest="100"
                                  AnimationContentWidthRequest="100"
                                  AnimationContentColor="{DynamicResource PrimaryColor}"
                                                    IsBusy="false">
                    <telerikPrimitives:RadBusyIndicator.Content>
                        <Label Text="Loading..." TextColor="Black" />
                    </telerikPrimitives:RadBusyIndicator.Content>
                </telerikPrimitives:RadBusyIndicator>
            </Grid>
        </telerik:RadBorder>
        <Image  Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" Margin="0,0,0,10" Opacity="0.7" Source="wave.png" Aspect="Fill"/>
        </Grid>

        <telerikPrimitives:RadPopup.Popup Margin="10" Grid.Row="1" >
            <telerikPrimitives:RadPopup x:Name="popupError"
                                  IsModal="True"
                                  OutsideBackgroundColor="#6F000000"
                                            Placement='Center'>
                <telerikMauiControls:RadBorder CornerRadius="8"
                                         BackgroundColor="{DynamicResource PrimaryColor}">
                    <telerikMauiControls:RadScrollView >
                        <Grid Padding="20"
                                WidthRequest="200"
                                HeightRequest="170">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="40" />
                                <RowDefinition Height="70" />
                            </Grid.RowDefinitions>
                            <Button Grid.Row="0"
                                    Padding="2"
                                   HorizontalOptions="End"
                                   Text="X"
                                   Clicked="OnClosePopup" 
                                  BackgroundColor="{DynamicResource PrimaryColor}" TextColor="White" />
                            <Label x:Name="labelError" Grid.Row="1" Text="" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
                        </Grid>
                    </telerikMauiControls:RadScrollView>
                </telerikMauiControls:RadBorder>
            </telerikPrimitives:RadPopup>
        </telerikPrimitives:RadPopup.Popup>

    </Grid>
  
</ContentPage>