This is a migrated thread and some comments may be shown as answers.

Creating a Global Style that specifies the BorderStyle

7 Answers 515 Views
Entry
This is a migrated thread and some comments may be shown as answers.
Greg
Top achievements
Rank 1
Iron
Greg asked on 09 Apr 2018, 04:14 PM

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

Sort by
0
Accepted
Lance | Senior Manager Technical Support
Telerik team
answered on 09 Apr 2018, 05:30 PM
Hi Greg,

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Greg
Top achievements
Rank 1
Iron
answered on 09 Apr 2018, 09:54 PM
Perfect, thanks Lance!
0
Larry
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 10 Feb 2021, 02:37 AM

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>

0
Lance | Senior Manager Technical Support
Telerik team
answered on 10 Feb 2021, 01:28 PM

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:

  1. Update my demo so that it replicates the problem
  2. Open a new Support Ticket and select UI for Xamarin -> DataGrid
  3. 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/.

0
Larry
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 10 Feb 2021, 07:52 PM
Actually :-), if you put your mouse on the grid and move it to the left, you'll see that the style wasn't applied.
0
Lance | Senior Manager Technical Support
Telerik team
answered on 10 Feb 2021, 09:29 PM

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/.

0
Larry
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 10 Feb 2021, 10:03 PM
No worries, I already have it manually applied everywhere. I was just diving into learning about templates and styles and was perplexed at why this didn't work.  I'm still perplexed, but don't need to deep dive on this.  Thanks!
Tags
Entry
Asked by
Greg
Top achievements
Rank 1
Iron
Answers by
Lance | Senior Manager Technical Support
Telerik team
Greg
Top achievements
Rank 1
Iron
Larry
Top achievements
Rank 1
Iron
Iron
Veteran
Share this question
or