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

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.

Answers

  • TerryLin.9450TerryLin.9450 USMember ✭✭

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

  • grishavgrishav USMember

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

  • TerryLin.9450TerryLin.9450 USMember ✭✭

    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.

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

  • RizkyNugrohoRizkyNugroho IDMember ✭✭

    Yes Terry Lin, you need to use GridLength.

    this work for me,
    30

  • hvaughanhvaughan USMember ✭✭✭

    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.

  • hvaughanhvaughan USMember ✭✭✭
  • ThibaultDThibaultD SEMember ✭✭✭
    edited March 2016

    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?

  • LSNaiduLSNaidu INMember ✭✭
    edited November 2017
      <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>
    
  • ChaseFlorellChaseFlorell CAInsider, University mod

    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>
    
Sign In or Register to comment.