Device orientation (Portrait, Landscape) based styling not working on GridView

dabagabdabagab Member ✭✭
edited June 2018 in Xamarin.Forms

Hi.

I have a <style> element and I want that if the device in Portrait or in Landscape the Margin of the Grid has different values.

But it seems it does not work, because the margin is always 0.

<ContentView.Resources>
        <ResourceDictionary>
            <Style x:Key="CategoryGridStyle"  x:Name="CategoryGridStyle" TargetType="Grid">
                <Setter Property="ColumnSpacing" Value="10" />
                <Setter Property="RowSpacing" Value="10" />
                <Setter Property="HorizontalOptions" Value="FillAndExpand" />
                <Setter Property="VerticalOptions" Value="FillAndExpand" />
                <!--<Setter Property="Margin" Value="30, 100"/>-->
                <Setter Property="VisualStateManager.VisualStateGroups">
                    <VisualStateGroupList>
                        <VisualStateGroup x:Name="OrientationStates">
                            <VisualState Name="Portrait">
                                <VisualState.Setters>
                                    <Setter Property="Margin" Value="30, 100" />
                                </VisualState.Setters>
                            </VisualState>

                            <VisualState Name="Landscape">
                                <VisualState.Setters>
                                    <Setter Property="Margin" Value="30, 100" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </Setter>

However if I uncomment this line:
<!--<Setter Property="Margin" Value="30, 100"/>--> The margin will works. But I need different margin values on different device orientation :)

Bonus question: is it possible to do with OnIdiom element too? (Detect if it is phone or tablet)

Tagged:

Answers

  • David_GonzalezDavid_Gonzalez ESMember ✭✭

    Hi again @dabagab you can try something like this

        protected override void OnSizeAllocated(double width, double height)
        {
                if (Device.Idiom == TargetIdiom.Tablet)
            {
                YourGrid.Margin = X;
            }else if (Device.Idiom == TargetIdiom.Phone)
            {
                YourGrid.Margin = Y;
            }
        }
    

    Or you can set a style on each if condition.

  • dabagabdabagab Member ✭✭
    edited June 2018

    Hi @David_Gonzalez .

    Yes with C# source code.
    I would like to do in XAML, because of the maintiaining of the code, I do not want one of the styles implement in c# and the another implement in the xaml.

    The other problem is that, the Debug says, the Device.Idiom equals to "Unsupported"

  • David_GonzalezDavid_Gonzalez ESMember ✭✭

    Hi @dabagab I have to deal with the same problem that you have in a couple of apps and I always do for code behind what I usually do its to generate a base style and then create the inherits I need , finally I just reference like this :

    myControl.Style = Xamarin.Forms.Application.Current.Resources["ResourceName"] as Style;

    The other problem is that, the Debug says, the Device.Idiom equals to "Unsupported"

    On what are u testing ? iOS / Android ,real device / simulator?

  • dabagabdabagab Member ✭✭
    edited June 2018

    Hi @David_Gonzalez I test Android Simulator (Nexus 5x emulator with Api 27)

  • David_GonzalezDavid_Gonzalez ESMember ✭✭

    Hi @dabagab ive tested right now and is working for me :neutral:

  • dabagabdabagab Member ✭✭

    @David_Gonzalez Unfortunatelly this still gives me Device.Idiom equals with "Unsupported."

Sign In or Register to comment.