How to specify RowDefinitions and Column Definitions of Grid layout in XAML for different platforms

TerryLin.9450

Hi experts,

As subject, here is my XAML code. But I got "There is no Height and Width property...." exception while compiling. I know the type of Height and Width should be GridLength but I have no idea to specify in ResourceDictionary.

        <ContentPage.Resources>
            <ResourceDictionary>
              <OnPlatform x:Key="GridSize"   x:TypeArguments="x:Double"  iOS="50"  Android="100" WinPhone="100" />
            </ResourceDictionary>
          </ContentPage.Resources>
        ........
        <Grid>
         <Grid.RowDefinitions>
                <RowDefinition Height="{StaticResource GridSize}" />
              </Grid.RowDefinitions>

              <Grid.ColumnDefinitions>
                 <RowDefinition Height="{StaticResource GridSize}" />
              </Grid.ColumnDefinitions>
        </Grid>

Any directions and hints will be appreciated. Thanks in advance.

MitchMilam

Look at this
http://forums.xamarin.com/discussion/18841/custom-cell-in-table-using-grid-via-xaml

TerryLin.9450

That does not help. The Row and Column definition in Grid View does not accept integer or double.

grishav

Well, probably this is not your problem, but just in case... Is it true that inside your ColumnDefinitions tag you have RowDefinition?

TerryLin.9450

It is typo. it should be

<Grid.RowDefinitions>
                <RowDefinition Height="{StaticResource GridSize}" />
              </Grid.RowDefinitions>

              <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="{StaticResource GridSize}" />
              </Grid.ColumnDefinitions>
        </Grid>

After performed some research and found the value of Height and Width should be converted to GridLength and it is needed to create a new class which implement IValueConverter. I'll try to see if it could solve my problem.

SteveHatch.7397

I'm stumped on this one as well, has anyone figured it out yet?

RizkyNugroho

Yes Terry Lin, you need to use GridLength.

this work for me,
30

hvaughan

I ended up doing the following, so I am binding the RowDefinition's Height property to a GridLength property in my ViewModel. And then in my ViewModel's constructor, I specify a different height based on the Device OS:

XAML:
<Grid.RowDefinitions> <RowDefinition Height="{Binding RowHeight}" /> </Grid.RowDefinitions>

ViewModel:

public class GridViewModel {
    public GridLength RowHeight { get; set; }

    public GridViewModel() {
        RowHeight = new GridLength(Device.OS == TargetPlatform.Android ? 175 : 155);
    }
}

Could not (and did not have enough time to) successfully make it work in the XAML code.

DerekvanNiekerk

OnPlatform Grid Height & Width Definition in XAML Code:

<Grid BackgroundColor="#080808">
    <Grid.RowDefinitions>
        <RowDefinition>
            <RowDefinition.Height>
                <OnPlatform x:TypeArguments="GridLength"
                                  iOS="2"
                               Android="20*"
                        WinPhone="2" />
            </RowDefinition.Height>
        </RowDefinition>
        <RowDefinition Height=2*>
        <RowDefinition Height=1*>
    </Grid.RowDefinitions>

<Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="20*"/>
        <ColumnDefinition Width="1*"/>
   </Grid.ColumnDefinitions>

hvaughan

@DerekvanNiekerk
Thanks!

ThibaultD

Thanks @DerekvanNiekerk!

The 20* Xaml syntax for GridLength(20, GridUnitType.Star) was exactly I have been looking for.
Why couldn't I find it anywhere in the documentation?

LSNaidu

  <ContentPage.Resources>
        <ResourceDictionary>
          <OnPlatform x:Key="GridSize"   x:TypeArguments="GridLength"  iOS="50"  Android="100" WinPhone="100" />
        </ResourceDictionary>
      </ContentPage.Resources>
    <Grid>
     <Grid.RowDefinitions>
            <RowDefinition Height="{StaticResource GridSize}" />
          </Grid.RowDefinitions>

          <Grid.ColumnDefinitions>
             <RowDefinition Height="{StaticResource GridSize}" />
          </Grid.ColumnDefinitions>
    </Grid>

ChaseFlorell

the new way

    <Grid.RowDefinitions>
        <RowDefinition>
            <RowDefinition.Height>
                <OnPlatform x:TypeArguments="GridLength">
                    <On Platform="Android" Value="24" />
                    <On Platform="iOS" Value="22" />
                </OnPlatform>
            </RowDefinition.Height>
        </RowDefinition>
    </Grid.RowDefinitions>

lucidBrot

This even works in staticResources. Including the star notation.

<OnPlatform x:TypeArguments="GridLength" x:Key="MyKey">
                    <On Platform="Android" Value="0.5*" />
                    <On Platform="iOS" Value="0.5*" />
        </OnPlatform>