question

JassimAlRahma-9056 avatar image
0 Votes"
JassimAlRahma-9056 asked LeonLu-MSFT edited

Styling RowDefination inside App.xaml Resource

Hi,

How can I set the style of a Row per Idiom inside the App.xaml's Resources like this:

 <Style x:Key="HeaderRowStyle" TargetType="Row">
     <Setter Property="Height" Value="{OnIdiom x:TypeArguments="x:Double" Phone="80" Tablet="120"}" />
 </Style>


Thanks,
Jassim

dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

LeonLu-MSFT avatar image
0 Votes"
LeonLu-MSFT answered LeonLu-MSFT edited

Hello,​

Welcome to our Microsoft Q&A platform!

You cannot set Gird's Row by setting TargetType="Row", targetType should be a Forms Control(such as Gird, Button..etc).

If you want to set a style for Height of Grid's RowDefinitions, you can use following way. I set the first row 's height of RowDefinitions, Phone 60, Tablet=120 for testing.

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StyleDemo.App">
    <Application.Resources>
  
        <Style TargetType="Grid" x:Key="HeaderRowStyle" >
            <Setter Property="RowDefinitions">
                <Setter.Value>
                    <RowDefinitionCollection>
                        <RowDefinition  Height="{OnIdiom 10 , Phone=60 ,Tablet=120}"/>
                        <!--If you want to add other rows, just add  RowDefinition here-->
                        <RowDefinition/>
                    </RowDefinitionCollection>
                </Setter.Value>
            </Setter>
        </Style>

    </Application.Resources>
</Application>


Then Apply this style to Gird.

<Grid Style="{StaticResource HeaderRowStyle}">
           
            <BoxView Color="Green" />
            <Label Text="Row 0, Column 0"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
            <BoxView Grid.Column="1"
                 Color="Blue" />
            <Label Grid.Column="1"
               Text="Row 0, Column 1"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
            <BoxView Grid.Row="1"
                 Color="Teal" />
            <Label Grid.Row="1"
               Text="Row 1, Column 0"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
            <BoxView Grid.Row="1"
                 Grid.Column="1"
                 Color="Purple" />
            <Label Grid.Row="1"
               Grid.Column="1"
               Text="Row1, Column 1"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
            <BoxView Grid.Row="2"
                 Grid.ColumnSpan="2"
                 Color="Red" />
            <Label Grid.Row="2"
               Grid.ColumnSpan="2"
               Text="Row 2, Columns 0 and 1"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
        </Grid>


Here is running screenshot.

Phone

131296-image.png

Tablet

131376-image.png

Best Regards,

Leon Lu



If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.



image.png (74.0 KiB)
image.png (112.3 KiB)
· 4
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thanks Leon,

But there is a problem here..

Sometimes I have 2 Rows:

 <Grid.RowDefinitions>
     <RowDefinition Height="Auto" />
     <RowDefinition Height="*" />
 </Grid.RowDefinitions>

and sometimes I have 3 Rows:

 <Grid.RowDefinitions>
     <RowDefinition Height="Auto" />
     <RowDefinition Height="*" />
     <RowDefinition Height="Auto" />
 </Grid.RowDefinitions>




0 Votes 0 ·

If you have two kind of rows, you can define two styles in your app.xaml.

<Application.Resources>
  
        <Style TargetType="Grid" x:Key="HeaderTwoRowStyle" >
            <Setter Property="RowDefinitions">
                <Setter.Value>
                    <RowDefinitionCollection>
                        <RowDefinition  Height="{OnIdiom 10 , Phone=60 ,Tablet=120}"/>
                        <RowDefinition  Height="{OnIdiom 10 , Phone=60 ,Tablet=120}"/>
                       
                    </RowDefinitionCollection>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="Grid" x:Key="HeaderThreeRowStyle" >
            <Setter Property="RowDefinitions">
                <Setter.Value>
                    <RowDefinitionCollection>
                        <RowDefinition  Height="{OnIdiom 10 , Phone=60 ,Tablet=120}"/>
                        <RowDefinition  Height="{OnIdiom 10 , Phone=60 ,Tablet=120}"/>
                        <RowDefinition  Height="{OnIdiom 10 , Phone=60 ,Tablet=120}"/>
                        <!--If you want to add other rows, just add  RowDefinition here-->
                      
                    </RowDefinitionCollection>
                </Setter.Value>
            </Setter>
        </Style>

    </Application.Resources>
1 Vote 1 ·

Then you want to use it, Just set different styles for different Grid.

<Grid  Margin="0,20,0,0" Style="{StaticResource HeaderTwoRowStyle}">


<Grid  Margin="0,20,0,0" Style="{StaticResource HeaderThreeRowStyle}">
0 Votes 0 ·

@JassimAlRahma-9056 May I know if you have got any chance to check my answer? I am glad to help if you have any other questions

0 Votes 0 ·