Hi everyone,
I'm trying to create a global style so that all RadEntry controls in my application have the same look and feel.
I'd like the CornerRadius of the entry controls to be 0 and to specify a border color.
I'm having issues figuring out how to specify the BorderStyle values in my global style.
This is what I've tried so far and none of my border style values were applied:
<
OnPlatform
x:Key
=
"EntryPadding"
x:TypeArguments
=
"Thickness"
>
<
On
Platform
=
"iOS"
Value
=
"10,10,0,20"
/>
<
On
Platform
=
"Android,UWP"
Value
=
"10,10,0,10"
/>
</
OnPlatform
>
<
Style
x:Key
=
"EntryBorderStyle"
TargetType
=
"telerikInput:BorderStyle"
>
<
Setter
Property
=
"CornerRadius"
Value
=
"0"
/>
<
Setter
Property
=
"BorderColor"
Value
=
"#808080"
/>
<
Setter
Property
=
"BorderThickness"
Value
=
"5"
/>
</
Style
>
<
Style
TargetType
=
"telerikInput:RadEntry"
>
<
Setter
Property
=
"Padding"
Value
=
"{StaticResource EntryPadding}"
/>
<
Setter
Property
=
"BorderStyle"
Value
=
"{StaticResource EntryBorderStyle}"
/>
</
Style
>
Anyone have any ideas where I might be going wrong?
Thanks,
Greg
7 Answers, 1 is accepted
BorderStyle is an object you need to instantiate, it's not an inherited or implicit style you can override in a Style definition. This is also the case for all of the other UI for Xamarin controls that have Style properties (e.g. DataGrid's RowStyle or AlternateRowStyle).
Solution
To fix the issue you're having, create an instance of BorderStyle as a StaticResource for your implicit style:
<
OnPlatform
x:Key
=
"EntryPadding"
x:TypeArguments
=
"Thickness"
>
<
On
Platform
=
"iOS"
Value
=
"10,10,0,20"
/>
<
On
Platform
=
"Android,UWP"
Value
=
"10,10,0,10"
/>
</
OnPlatform
>
<
input:BorderStyle
x:Key
=
"EntryBorderStyle"
CornerRadius
=
"0"
BorderColor
=
"#808080"
BorderThickness
=
"5"
/>
<
Style
TargetType
=
"input:RadEntry"
>
<
Setter
Property
=
"Padding"
Value
=
"{StaticResource EntryPadding}"
/>
<
Setter
Property
=
"BorderStyle"
Value
=
"{StaticResource EntryBorderStyle}"
/>
</
Style
>
Here is the result at runtime on Android with two RadEntry controls on a nested page:
Further Assistance
If you have any further issues, or would like assistance from the UI for Xamarin support team, please open a support ticket and attach the problematic code so that we can investigate directly.
Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik
What am I doing wrong with this code? I assumed the first version (ApplyToDerivedTypes) would work (alone), but did not. I tried the second version (alone) as well.
<dataGrid:DataGridColumnHeaderStyle x:Key="CustomDataGridColumnHeaderStyle"
IsOptionsButtonVisible="False" />
<Style TargetType="dataGrid:DataGridColumn" ApplyToDerivedTypes="True">
<Setter Property="HeaderStyle" Value="{StaticResource CustomDataGridColumnHeaderStyle}"/>
</Style>
<Style TargetType="dataGrid:DataGridDateColumn">
<Setter Property="HeaderStyle" Value="{StaticResource CustomDataGridColumnHeaderStyle}"/>
</Style>
Hi Larry,
This conversation is about RadEntry's BorderStyle, though the concept is the same. The DataGridColumnHeaderStyle object is an instance object, not a Style. You can't use derived-type implicit styling for that specific scenario.
You can however use implicit styling for the final type. As an example, here's a screenshot using your DateTimeColumn style :
I have attached the demo for your reference.
Further Support
If you have any further issues, please take the following steps:
- Update my demo so that it replicates the problem
- Open a new Support Ticket and select UI for Xamarin -> DataGrid
- Attach the zipped up project and describe the issue/steps to reproduce
Tip - Before sipping up the solution, be sure to use Build > Clean Solution, or manually delete all the bin and obj folders, before zipping it up. This will reduce ZIP size to just one or two MBs (instead of hundreds of MBs).
Regards,
Lance | Manager Technical Support
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Hello Larry,
Arg! Sorry I missed that. Indeed, in this case, implicit styling will not work. Each column needs its own DataGridColumnHeaderStyle instance.
If you have auto-generated columns, you can use a little helper method like this:
// subscribwe to DataBindingComplete event
MyDataGrid.DataBindingComplete += MyDataGrid_DataBindingComplete;
// iterate over each column and assign a new instance of the style
private void MyDataGrid_DataBindingComplete(object sender, Telerik.XamarinForms.DataGrid.DataBindingCompleteEventArgs e)
{
foreach (DataGridColumn column in MyDataGrid.Columns)
{
// Option 1 - style them all
column.HeaderStyle = new DataGridColumnHeaderStyle { IsOptionsButtonVisible = false };
}
}
Option 2 - If you want to be a little more picky about which column types get that header style, you can check the type first
private void MyDataGrid_DataBindingComplete(object sender, Telerik.XamarinForms.DataGrid.DataBindingCompleteEventArgs e)
{
foreach (DataGridColumn column in MyDataGrid.Columns)
{
// Option 2 - If you need column-specific styling, you can first check the column type
if (column is DataGridTextColumn textColumn)
{
textColumn.HeaderStyle = new DataGridColumnHeaderStyle { IsOptionsButtonVisible = false };
}
else if (column is DataGridNumericalColumn numericalColumn)
{
}
else if (column is DataGridBooleanColumn booleanColumn)
{
}
else if (column is DataGridDateColumn dateColumn)
{
}
else if (column is DataGridPickerColumn pickerColumn)
{
}
else if (column is DataGridTimeColumn timeColumn)
{
}
else if (column is DataGridTemplateColumn templateColumn)
{
}
else
{
// fall back
}
}
}
Regards,
Lance | Manager Technical Support
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.