Hi,
Is it possible to customize the header template for the items in the Segmented control for MAUI?
E.g. I would like to have a button with an optional image in the segment headers along with the text.
Hi,
I cant find a solution to remove the white padding on the top/bottom of the drawercontent.
Am I doing something wrong, or is it a bug ?
Here is a simple code to reproduce :
<ContentPage.Content>
<telerik:RadSideDrawer x:Name="drawer" DrawerLength="300" DrawerLocation="Left" DrawerTransitionType="Push">
<telerik:RadSideDrawer.DrawerContent>
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Aqua" />
</telerik:RadSideDrawer.DrawerContent>
<telerik:RadSideDrawer.MainContent>
<Grid>
<Button BackgroundColor="Bisque" Clicked="Button_Clicked" Text="Open Drawer" />
</Grid>
</telerik:RadSideDrawer.MainContent>
</telerik:RadSideDrawer>
</ContentPage.Content>
And the result :
I am testing on Ipad, iOS 17.2.
Telerik.UI.for.Maui 6.8.0
Thanks for the help.
Hi there,
I've googled, searched this forum and read the docs and from what I can see there is no way in an editable grid for the user to add a new row (or delete an existing one) natively, is this correct?
For example, in my app I have the data grid below which the user enters an auction Lot # and a value of the lot. When the page is rendered the datagrid should be empty but the user would add new rows to enter lots they have bidded on and won, or delete a row if they need to.
I hope I'm wrong but I cannot see a single thing about adding or deleting rows natively so can we only do this by having explicit buttons outside the grid control for adding/deleting and do it all with code behind and/or RelayCommands in the ViewModel?
Or am I using the wrong control? It's such a simple grid (just the two columns with no filtering, grouping etc) is there a better control I could use?
And sorry to ask two questions in one but when I try to style the column headers or cell content style with a custom colour using DynamicResource I get this error:
XFC0009 No property, BindableProperty, or event found for "BackgroundColor", or mismatching type between value and property.
Is it not possible to use custom styling like this?
Many thanks,
Mike
<ScrollView Grid.Row="7" Grid.ColumnSpan="2" VerticalOptions="Fill" HorizontalOptions="Fill" Margin="10,20,10,10">
<telerik:RadDataGrid x:Name="grdInsuredAnimals" ItemsSource="{Binding CurrentApplication.AuctionDetails.LotDetails}"
AutoGenerateColumns="False" UserEditMode="Cell" CanUserResizeColumns="True" ShowGroupHeaderAggregates="False"
UserGroupMode="Disabled" CanUserExpandMultipleRowDetails="False" CanUserReorderColumns="False" >
<telerik:RadDataGrid.Columns>
<telerik:DataGridComboBoxColumn PropertyName="LotNumber" HeaderText="Lot #" ItemDisplayBindingPath="LotNumber">
<telerik:DataGridComboBoxColumn.HeaderStyle>
<telerik:DataGridColumnHeaderStyle BackgroundColor="{DynamicResource RA_DarkBlue}" TextColor="White"/>
</telerik:DataGridComboBoxColumn.HeaderStyle>
<telerik:DataGridComboBoxColumn.CellContentStyle>
<telerik:DataGridTextCellStyle TextColor="{DynamicResource RA_Blue}"
FontSize="15" SelectedTextColor="{DynamicResource RA_Orange}"/>
</telerik:DataGridComboBoxColumn.CellContentStyle>
</telerik:DataGridComboBoxColumn>
<telerik:DataGridNumericalColumn DataMemberBinding="{Binding AnimalValue, StringFormat='{0:N0}'}" PropertyName="AnimalValue" HeaderText="Sum Insured">
<telerik:DataGridNumericalColumn.HeaderStyle>
<telerik:DataGridColumnHeaderStyle BackgroundColor="{DynamicResource RA_DarkBlue}" TextColor="White"/>
</telerik:DataGridNumericalColumn.HeaderStyle>
</telerik:DataGridNumericalColumn>
</telerik:RadDataGrid.Columns>
</telerik:RadDataGrid>
</ScrollView>
From the Help Page...
The ListView provides UI virtualization, which requires the visual parent to provide vertical or horizontal space. To avoid breaking UI virtualization or gesture mechanisms:
StackLayout
or inside a ScrollView
.RowDefinition Height="Auto"
Grid definition.
Does this mean that a ListView cant be placed as a child of a Scroll View under any circumstance, or its immediate parent cant be a ScrollView? Same question for the Grid RowDefinition. If using nested grids, must all parent grids rows have a Height specified, or is it only the immediate parent? Also is * ok for the Height?
Seems like ListView is severely limited to being the only control on the page/view if this is the case.
I'm trying to replicate the signature pad control at this page: https://docs.telerik.com/devtools/maui/controls/signaturepad/events
On the control it shows an 'X' button to clear the signature but the XAML does not seem to include this or set any property etc. If I copy the example XAML into a View it also does not show up (tested in Android and Windows emulator).
So how is this rendered? Is there a property the XAML is missing or did you do some fancy XAML with a separate 'X' button overlaid?
Either way, that page need to be updated either with the correct XAML or to make it clear how the 'X' is being rendered.
Thanks,
Mike
It seems that Hot Reload does not work for any controls with the MainContent or DrawerContent of the RadSideDrawer.
Will there be a fix for this soon as having no hot reload severely slows down development time for us.
I have worked through the grouping help docs to set up a ListView with grouping. I would like to provide a means to group the list elements as follows..
When the Group By Gateway switch is on the list is grouped as shown above. When the switch is off it shows the list without the group headers as shown below....
I have tried to meld the example code to meet my desired outcome by binding the switch to the following property on the view model.
private bool _isNodeIdGroupSwitchToggled = false;
public bool IsNodeIdGroupSwitchToggled
{
get { return _isNodeIdGroupSwitchToggled; }
set
{
if (SetProperty(ref _isNodeIdGroupSwitchToggled, value))
{
UpdateExistingGroupDescriptor(nameof(IsNodeIdGroupSwitchToggled), _isNodeIdGroupSwitchToggled);
}
}
}
private ObservableCollection<GroupDescriptorBase> _groupDescriptors;
public ObservableCollection<GroupDescriptorBase> GroupDescriptors
{
get { return _groupDescriptors; }
set { SetProperty(ref _groupDescriptors, value); }
}
private void UpdateExistingGroupDescriptor(string propertyToUpdate, bool IsOn)
{
if (GroupDescriptors == null)
return;
if (IsOn)
{
if (GroupDescriptors.Count == 0)
{
GroupDescriptors.Add(new ListViewPropertyGroupDescriptor()
{
PropertyName = "NodeName",
});
}
}
else
{
if (GroupDescriptors.Count != 0)
{
GroupDescriptors.Clear();
}
}
}
The GroupDescriptors collection gets updated as I expected, but the list view does not respond to the new GroupDescriptor when the switch is set to on. If I add the descriptor in the XAML directly it generates the first view, so I am pretty sure the xaml and bindings are set up correctly, it just does not seem to work when I add it on the property updated.
Here is the cobbled together XAML for the prototype...
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
xmlns:appmodels ="clr-namespace:MauiControlLayout;assembly=MauiControlLayout"
x:Class="MauiControlLayout.MainPage">
<ContentPage.Resources>
<ResourceDictionary>
<DataTemplate x:Key="ListViewItemTemplate">
<telerik:ListViewTemplateCell>
<telerik:ListViewTemplateCell.View>
<Grid Padding="28, 0, 0, 0" BackgroundColor="White">
<VerticalStackLayout>
<Label Text="{Binding ControllerModel.NodeId}" TextColor="#6F6F70" FontSize="Small" VerticalOptions="Center" />
<Label Text="{Binding ControllerModel.ControllerId}" TextColor="#6F6F70" FontSize="Small" VerticalOptions="Center" />
</VerticalStackLayout>
</Grid>
</telerik:ListViewTemplateCell.View>
</telerik:ListViewTemplateCell>
</DataTemplate>
<!-- >> listview-features-header-template-xaml -->
<DataTemplate x:Key="ListViewGroupHeaderTemplate">
<Grid BackgroundColor="#007A53">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Text="▸" Margin="8, 12, 0, 6" TextColor="DarkGray" FontSize="Medium">
<Label.Triggers>
<DataTrigger TargetType="Label" Binding="{Binding IsExpanded}" Value="True">
<Setter Property="Text" Value="▾" />
</DataTrigger>
</Label.Triggers>
</Label>
<Label Margin="0, 12, 0, 6" Text="{Binding Key}" Grid.Column="1" TextColor="DarkGray" FontSize="Medium" HorizontalOptions="Start" />
</Grid>
</DataTemplate>
<!-- << listview-features-header-template-xaml -->
<DataTemplate x:Key="HeaderTemplate">
<StackLayout
x:Name="GatewayPageHeader"
Grid.Row="0"
BackgroundColor="White"
Padding="0, 0, 0, 3">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="9*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<!-- Register Gateway Command -->
<Label Grid.Column="0" Grid.Row="0" HorizontalOptions="Start" VerticalOptions="Center" Padding="2" FontSize="15" FontAttributes="Bold" Text="Available Gateways" TextColor="#007A53"/>
<HorizontalStackLayout
Grid.Column="0"
Grid.ColumnSpan="3"
Grid.Row="1"
HorizontalOptions="StartAndExpand">
<Label
x:Name="GroupByNodeIdEnabled"
VerticalOptions="Center"
VerticalTextAlignment="Center"
Text="Group By Gateway"
TextColor="#007A53" />
<Switch x:Name="GroupByNodeIdSwitch" Grid.Column="1" IsToggled="{Binding IsNodeIdGroupSwitchToggled}" Margin="5,0,0,0" />
</HorizontalStackLayout>
<!-- Settings Command -->
<Image Grid.Row="0" Grid.Column="2" Source="plus_small_green.png" Aspect="AspectFill" WidthRequest="15" HeightRequest="15" Margin="0"/>
<Frame Grid.Row="0" Grid.Column="2" WidthRequest="25" HeightRequest="25" BackgroundColor="Transparent" BorderColor="Transparent">
<Frame.GestureRecognizers>
<TapGestureRecognizer Command="{Binding AddGatewayCommand}"/>
</Frame.GestureRecognizers>
</Frame>
</Grid>
</StackLayout>
</DataTemplate>
<!-- << listview-features-header-template-xaml -->
</ResourceDictionary>
</ContentPage.Resources>
<ScrollView
x:Name="mainScrollView"
BackgroundColor="#007A53">
<Grid x:Name="mainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*" />
</Grid.ColumnDefinitions>
<telerik:RadListView
x:Name="GatewayListView"
Grid.Row="1"
Grid.ColumnSpan="2"
ItemsSource="{Binding Controllers}"
SelectedItem="{Binding SelectedController, Mode=TwoWay}"
ItemTemplate="{StaticResource ListViewItemTemplate}"
GroupHeaderTemplate="{StaticResource ListViewGroupHeaderTemplate}"
HeaderTemplate="{StaticResource HeaderTemplate}"
IsItemSwipeEnabled="True"
SwipeOffset="70, 0, 70, 0"
SwipeThreshold="10"
BackgroundColor="Transparent"
Margin="2">
<!--<telerik:RadListView.GroupDescriptors>
<telerik:ListViewPropertyGroupDescriptor PropertyName="NodeName"/>
</telerik:RadListView.GroupDescriptors>-->
</telerik:RadListView>
</Grid>
</ScrollView>
</ContentPage>
Hi,
Why plus and minus are so big?
<telerikInput:RadNumericInput x:Name="numericInputRecursEvery" Value="{Binding SelectRecursEvery , Mode=TwoWay}" Minimum="0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" WidthRequest="200" Margin="5"/>