custom dropDowViewFooterTemplate

[Daniel]

Hi,

I want to achieve this UI using path.

Thanks,

 <ControlTemplate x:Key="dropDowViewFooterTemplate">
                <telerikMauiControls:RadBorder BackgroundColor="{TemplateBinding BackgroundColor}"
                                               BorderColor="{TemplateBinding BorderColor}"
                                               BorderThickness="{TemplateBinding BorderThickness}"
                                               CornerRadius="{TemplateBinding CornerRadius}">
                    <Grid ColumnSpacing="0"
                          RowSpacing="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <telerikMauiControls:RadButton Grid.Column="0" HorizontalOptions="Center" VerticalOptions="Center"
                                               Text="{TemplateBinding CancelButtonText}"
                                               Style="{TemplateBinding CancelButtonStyle}"
                                               Command="{TemplateBinding CancelCommand}"/>
                        <telerikMauiControls:RadButton Grid.Column="2" HorizontalOptions="Center" VerticalOptions="Center"
                                               Text="{TemplateBinding AcceptButtonText}"
                                               Style="{TemplateBinding AcceptButtonStyle}"
                                               Command="{TemplateBinding AcceptCommand}"/>
                    </Grid>
                </telerikMauiControls:RadBorder>
            </ControlTemplate>

[Lance | Manager Technical Support]

Hi,

Custom UI design is not something that official Telerik support can't really assist with. If you want a line between those buttons, then you need to design your custom UI to add that line. inside your custom template

If you are asking "How do I draw a line?" , this is again the wrong forum to ask in. Please check with the developer community on StackOverflow or Microsoft Q&A

Otherwise, just use the RadButton's BorderThickness value with your own custom value, like BorderThickness=1,0,0,0

Regards,
Lance | Manager Technical Support
Progress Telerik

[Lance | Manager Technical Support]

Note: If you want to use RadPath instead of the easier/faster BorderThickness, you can see an example of a LineSegment here NET MAUI Path Documentation | PathGeometry | Telerik UI for .NET MAUI

[Daniel]

I used path but its crash:

     <ControlTemplate x:Key="dropDowViewFooterTemplate">
                <telerikMauiControls:RadBorder BackgroundColor="{TemplateBinding BackgroundColor}"
                                               BorderColor="{TemplateBinding BorderColor}"
                                               BorderThickness="{TemplateBinding BorderThickness}"
                                               CornerRadius="{TemplateBinding CornerRadius}">
                    <Grid ColumnSpacing="0"
                          RowSpacing="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <telerikMauiControls:RadButton Grid.Column="0" HorizontalOptions="Center" VerticalOptions="Center"
                                               Text="{TemplateBinding CancelButtonText}"
                                               Style="{TemplateBinding CancelButtonStyle}"
                                               Command="{TemplateBinding CancelCommand}"/>
                        <telerikPrimitives:RadPath  Grid.Column="1"
                            StrokeThickness="4"
                            Stroke="#2EC262">
                            <telerikPrimitives:RadPath.Geometry>
                                <telerikCommon:RadPathGeometry>
                                    <telerikCommon:RadPathFigure StartPoint="0.8, 0.1">
                                        <telerikCommon:RadLineSegment Point="0.1, 0.8" />
                                    </telerikCommon:RadPathFigure>
                                </telerikCommon:RadPathGeometry>
                            </telerikPrimitives:RadPath.Geometry>
                        </telerikPrimitives:RadPath>
                        <telerikMauiControls:RadButton Grid.Column="2" HorizontalOptions="Center" VerticalOptions="Center" 
                                               Text="{TemplateBinding AcceptButtonText}"
                                               Style="{TemplateBinding AcceptButtonStyle}"
                                               Command="{TemplateBinding AcceptCommand}"/>
                    </Grid>
                </telerikMauiControls:RadBorder>
            </ControlTemplate>

[Lance | Manager Technical Support]

This is because of the .NET MAUI Content Attribute bug. To workaround it, you need to explicitly define every property you're using in XAML.

Here's what your code looks like after you've taken the time to write out all the properties:

<telerikPrimitives:RadPath  Grid.Column="1"
                            StrokeThickness="4"
                            Stroke="#2EC262">
    <telerikPrimitives:RadPath.Geometry>
        <telerikCommon:RadPathGeometry>
            <telerikCommon:RadPathGeometry.Figures>
                <telerikCommon:RadPathFigure StartPoint="0.8, 0.1">
                    <telerikCommon:RadPathFigure.Segments>
                        <telerikCommon:RadLineSegment Point="0.1, 0.8" />
                    </telerikCommon:RadPathFigure.Segments>
                </telerikCommon:RadPathFigure>
            </telerikCommon:RadPathGeometry.Figures>
        </telerikCommon:RadPathGeometry>
    </telerikPrimitives:RadPath.Geometry>
</telerikPrimitives:RadPath>

Hopefully this will be fixed in RC2 or GA release.

[Daniel]

We can use rad border also.

 <telerik:RadBorder Grid.Column="1"  WidthRequest="1" Margin="2" BorderColor="#00B5DC"/>