CODEWITHSUNDEEP
xamarin.forms
developer9969
developer9969

Reputation: 5226

Can you define RowDefinition in style xamarin forms

I have the following

<Grid >
    <Grid.RowDefinitions>
        <RowDefinition Height="1.5*"></RowDefinition>
        <RowDefinition Height="7.5*"></RowDefinition>
    </Grid.RowDefinitions>

and I would like to define the Height in a Style or in a variable in the app.xaml.

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

Is this possible? I have tried but I get an error.

The reason I want to achieve this is that on small devices I need to change the row height.

I would appreciate any tips or suggestions.

Upvotes: 0

Views: 952

Answers (1)

Junior Jiang
Junior Jiang

Reputation: 12723

You can bind a model to ContentPage , then Grid can use binded data by model and row height can be setted by model data (contain row height paramaters).

For example , create a sample ViewModel(RowHeightClass) as follow :

using Xamarin.Essentials;    

public class RowHeightClass 
{
    public GridLength rowFirstHeight { set; get; }
    public GridLength rowSecondHeight { set; get; }

    public RowHeightClass()
    {
        // here can add code set by device screen 
        var mainDisplayInfo = DeviceDisplay.MainDisplayInfo;
        double screenheight = mainDisplayInfo.Height;

        rowFirstHeight = new GridLength(DeviceDisplay * 0.2);

        rowSecondHeight = new GridLength(DeviceDisplay * 0.4);
    }
}

Binding it in ContentPage :

RowHeightClass rowHeightClass = new RowHeightClass();

BindingContext = rowHeightClass;

Used in XAML :

<Grid VerticalOptions="FillAndExpand"
      HorizontalOptions="FillAndExpand">
    <Grid.RowDefinitions>
        <RowDefinition Height="{Binding rowFirstHeight}" />
        <RowDefinition Height="{Binding rowSecondHeight}" />
        <RowDefinition Height="100" />
    </Grid.RowDefinitions>

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

    <BoxView Grid.Row="0"
             Grid.Column="0"
             BackgroundColor="Blue" />

    <BoxView Grid.Row="1"
             Grid.Column="0"
             BackgroundColor="Red" />

    <Button Grid.Row="2"
            Grid.Column="0"
            BackgroundColor="Yellow"
            Clicked="Button_Clicked" />
</Grid>

Note : You can modify the constructor method of RowHeightClass to add method to set needed height by the size of device screen .

==================================Update=====================================

Using StaticResource also can set the heigh of row . Add a Resources for Grid or Application as follow :

<Grid VerticalOptions="FillAndExpand"
      HorizontalOptions="FillAndExpand">
    <Grid.Resources>
        <ResourceDictionary>
            <x:Double x:Key="SmallScreenRowheight">200</x:Double>
            <x:Double x:Key="LargeScreenRowheight">400</x:Double>
        </ResourceDictionary>
    </Grid.Resources>
    <Grid.RowDefinitions>
        <RowDefinition Height="{StaticResource SmallScreenRowheight}" />
        <RowDefinition Height="{StaticResource LargeScreenRowheight}" />
        <RowDefinition Height="100" />
    </Grid.RowDefinitions>

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

    <BoxView Grid.Row="0"
             Grid.Column="0"
             BackgroundColor="Blue" />

    <BoxView Grid.Row="1"
             Grid.Column="0"
             BackgroundColor="Red" />

    <Button Grid.Row="2"
            Grid.Column="0"
            BackgroundColor="Yellow"
            Clicked="Button_Clicked" />
</Grid>

Upvotes: 1

Related Questions