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>1 Answer, 1 is accepted
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
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Silver
Bronze
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>
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.
Rank 1
Silver
Bronze
<telerik:RadBorder Grid.Column="1" WidthRequest="1" Margin="2" BorderColor="#00B5DC"/>