Click here to Skip to main content
15,799,491 members
Articles / Mobile Apps / Xamarin

Xamarin Frame and Style with Padding

Rate me:
Please Sign up or sign in to vote.
5.00/5 (1 vote)
23 Apr 2016CPOL2 min read 25K   38   1   5
Xamarin Frame and Style with Padding

If you are a bit advanced with Xamarin, you should already now that there is a possibility of styling your controls almost like in WPF.

Almost, because there is a few strange bugs involving this. For example, there is a problem with styling a Padding property in Frame. Consider the following XAML of Xamarin application (I tested it in Android):

XML
<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:styles="clr-namespace:Styles;assembly=Styles"
             x:Class="Styles.App">
  <Application.Resources>
    <ResourceDictionary>
      <Style TargetType="Frame" x:Key="Style">
        <Setter Property="Padding" Value="0" />
      </Style>
    </ResourceDictionary>
  </Application.Resources>
  <Application.MainPage>
    <ContentPage>
      <Grid>
        <Grid.RowDefinitions>
          <RowDefinition Height="100" />
            <RowDefinition Height="100" />
            <RowDefinition Height="100" />
          <RowDefinition Height="100" />
        </Grid.RowDefinitions>
        <Frame VerticalOptions="Center"
               Grid.Row="0"
               Padding="0">
          <Label Text="100 height" FontSize="60" />
        </Frame>
        <Frame VerticalOptions="Center" Style="{StaticResource Style}"
               Grid.Row="1"
               Padding="0">
          <Label Text="100 height" FontSize="60" />
        </Frame>
        <Frame VerticalOptions="Center" Style="{StaticResource Style}"
               Grid.Row="2">
          <Label Text="100 height" FontSize="60" />
        </Frame>
      </Grid>
    </ContentPage>
  </Application.MainPage>
</Application>

It is almost the same as default (created by template) shared application - but instead of App.cs, we have a more advanced XAML file.

What not suspecting (or better: excepting a normal behavior) user would except all Frames to have the same view because properties will have the same values. Should have the same values, but they are not. This code will produce the following layout:

 Image 1

Last Frame does not have explicit setting for Padding in its declaration and this property is resolved to default value and its contents just do not fit in the available space. Why? There is a bug for that.

But according to comments, Xamarin Team is not exactly willing to fix it.

Fortunately, there is a quick workaround for that. The easiest thing to do is to just add this method to a new class named i.e. FixedFrame:

C#
public class ExtendedFrame : Frame
{
    protected override void OnPropertyChanged(string propertyName = null)
    {
        // ReSharper disable once ExplicitCallerInfoArgument
        base.OnPropertyChanged(propertyName);
        if (propertyName == StyleProperty.PropertyName)
        {
            if (Style.Setters.Any(s => s.Property == PaddingProperty))
            {
                Padding = (Thickness)Style.Setters.First(s => s.Property == PaddingProperty).Value;
            }
        }
    }
}

Using this class instead of original Frame from Xamarin framework will ensure proper Padding value after applying Style to FixedFrame control. Consider changed above Android application, with added new FixedFrame control at the end. Only property set is Style and there is no explicit value for Padding in control declaration:

XML
<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:styles="clr-namespace:Styles;assembly=Styles"
             x:Class="Styles.App">
  <Application.Resources>
    <ResourceDictionary>
      <Style TargetType="Frame" x:Key="Style">
        <Setter Property="Padding" Value="0" />
      </Style>
    </ResourceDictionary>
  </Application.Resources>
  <Application.MainPage>
    <ContentPage>
      <Grid>
        <Grid.RowDefinitions>
          <RowDefinition Height="100" />
            <RowDefinition Height="100" />
            <RowDefinition Height="100" />
          <RowDefinition Height="100" />
        </Grid.RowDefinitions>
        <Frame VerticalOptions="Center"
               Grid.Row="0"
               Padding="0">
          <Label Text="100 height" FontSize="60" />
        </Frame>
        <Frame VerticalOptions="Center" Style="{StaticResource Style}"
               Grid.Row="1"
               Padding="0">
          <Label Text="100 height" FontSize="60" />
        </Frame>
        <Frame VerticalOptions="Center" Style="{StaticResource Style}"
               Grid.Row="2">
          <Label Text="100 height" FontSize="60" />
        </Frame>
        <styles:FrameExt VerticalOptions="Center" Style="{StaticResource Style}"
               Grid.Row="3">
          <Label Text="100 height" FontSize="60" />
        </styles:FrameExt>
      </Grid>
    </ContentPage>
  </Application.MainPage>
</Application>

As a result, we will have the following window layout:

Image 2

As you see, the last row with FixedFrame control has proper Padding property value. Smile
Simple and effective. See the link at the top of this post for a sample application.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
Poland Poland
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionC# Pin
tweber201217-Nov-17 13:57
tweber201217-Nov-17 13:57 
AnswerRe: C# Pin
n.podbielski20-Nov-17 1:43
n.podbielski20-Nov-17 1:43 
QuestionDid you create a pull request for this? Pin
kamnas14-Oct-17 7:17
kamnas14-Oct-17 7:17 
AnswerRe: Did you create a pull request for this? Pin
n.podbielski19-Oct-17 23:18
n.podbielski19-Oct-17 23:18 
QuestionWell done ! Pin
Member 1249354929-Apr-16 7:43
Member 1249354929-Apr-16 7:43 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.