How to position a image in a relative layout to go full screen

I have a page with nested grid which looks something like this

<ContentPage.Content>

    <Grid Style="{DynamicResource DisplayGridStyle}" x:Name="SearchRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="10*" />
        </Grid.RowDefinitions>
        <Grid Grid.Row="0" Style="{DynamicResource ToolBarStyle}" HorizontalOptions="FillAndExpand"
              VerticalOptions="FillAndExpand" x:Name="ToolBar">
            <Image Grid.Column="0" HorizontalOptions="Start"
                   Source="{Binding  Logo}" />                
        </Grid>


        <Grid Grid.Row="1" x:Name="SearchControlsGrid">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="4" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="4" />
            </Grid.ColumnDefinitions>
            <RelativeLayout x:Name="SearchControlsLayout">
                <Image Source="{Binding ImageSource}"
                       HorizontalOptions="FillAndExpand"
                       VerticalOptions="FillAndExpand"
                       Aspect="Fill"
                       Opacity="0.3"
                       RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, ElementName=SearchControlsGrid,Property=Width, Factor=1, Constant=0 }"
                       RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, ElementName=SearchControlsGrid, Property=Height,Factor=1, Constant=0}" />
            </RelativeLayout>

            <Grid Style="{DynamicResource DisplayGridStyle}" Grid.Column="1" x:Name="SearchGrid">
                <Grid.RowDefinitions>
                    <RowDefinition Height="7*" />
                    <RowDefinition Height="3*" />
                    <RowDefinition Height="7*" />                        
                </Grid.RowDefinitions>                  
            </Grid>
        </Grid>
    </Grid>
</Grid>

</ContentPage.Content>

The image gets rendered in the background and takes's up the entire height available but the width is only 4 units wide. From what i understand about RelativeLayout with the right reference ( control name/ element name) should be allow it to adjust it self .

Best Answer

Answers

Sign In or Register to comment.