I have a Relative layout inside Grid in Xamarin Forms. There is an image inside the relative layout. The image has AspectFill.
Xamarin.Forms.Aspect.AspectFill Field says:
Scale the image to fill the view. Some parts may be clipped in order to fill the view.
Still the image is not filling horizontally. How to fix it.
XAML
<Grid x:Name="controlGrid" ColumnSpacing="0" Padding="0">
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="2*" />
<RowDefinition Height="8*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!--Row 1-->
<BoxView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="Red" HeightRequest="1" VerticalOptions="End" HorizontalOptions="FillAndExpand" Margin="0" />
<BoxView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="Red" HeightRequest="1" VerticalOptions="Start" HorizontalOptions="FillAndExpand" Margin="0"/>
<BoxView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="Red" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End" Margin="0"/>
<BoxView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="Red" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="Start" Margin="0"/>
<RelativeLayout Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" >
<Image Source="abstracttrianglex.png" Aspect="AspectFill" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Red"/>
</RelativeLayout>
<!--Row 2-->
<RelativeLayout Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="Teal" >
<Image Source="abstracttrianglex.png" Aspect="AspectFill" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Blue"/>
</RelativeLayout>
</Grid>
Following worked
Relative layout with constraints
<RelativeLayout Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" >
<Image Source="abstracttriangleg.png"
Aspect="AspectFill" HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand" BackgroundColor="Red"
RelativeLayout.WidthConstraint=
"{ConstraintExpression Type=RelativeToParent,
Property=Width,
Factor=1}"
RelativeLayout.HeightConstraint=
"{ConstraintExpression Type=RelativeToParent,
Property=Height,
Factor=1}"/>
</RelativeLayout>
You have to give XConstraint and YConstraint for inside Relative Layout
Fellow below link
https://developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/relative-layout/
Related
I have a problem. I want to make a custom header, so I created this stacklayout:
<StackLayout VerticalOptions="Start" HeightRequest="50" HorizontalOptions="CenterAndExpand">
<Image HorizontalOptions="Start" Source="Logo.png"/>
<Image HorizontalOptions="Start" Source="Title_Dark.png"/>
</StackLayout>
Now I want to put it above the following code:
<ContentPage.Content>
<ListView x:Name="ListViewMain" VerticalOptions="FillAndExpand" BackgroundColor="#212121" SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<Label HeightRequest="1" BackgroundColor="#E3E3E3" />
<Grid x:Name="GridMain">
<Grid.RowDefinitions>
<RowDefinition Height="40" x:Name="Row0_Height"/>
<RowDefinition Height="180" x:Name="Row1_Height"/>
<RowDefinition Height="180" x:Name="Row2_Height"/>
<RowDefinition Height="40" x:Name="Row3_Height"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" x:Name="Column0_Width" />
<ColumnDefinition Width="*" x:Name="Column1_Width" />
<ColumnDefinition Width="40" x:Name="Column2_Width" />
</Grid.ColumnDefinitions>
<Label Text="{Binding Creator}" TextColor="White" FontSize="Body" FontAttributes="Bold" Grid.Column="1" Grid.Row="0" VerticalOptions="Center" HorizontalOptions="Start"/>
<Image Source="VoteUp.png" VerticalOptions="End" HorizontalOptions="Center" Grid.Row="1" Grid.Column="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="imgVoteUp_Clicked" />
</Image.GestureRecognizers>
</Image>
<Image Source="VoteDown.png" VerticalOptions="Start" HorizontalOptions="Center" Grid.Row="2" Grid.Column="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="imgVoteDown_Clicked" />
</Image.GestureRecognizers>
</Image>
<Image Source="{Binding ImageLocation}" Margin="0, 0, 20, 0" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="2" BackgroundColor="AliceBlue" VerticalOptions="Fill" HorizontalOptions="Fill"/>
<Image Source="Favorite.png" Grid.Row="3" Grid.Column="1" HorizontalOptions="Start">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="imgFavorite_Clicked" />
</Image.GestureRecognizers>
</Image>
<Image Source="Send_Dark.png" Grid.Row="3" Grid.Column="1" HorizontalOptions="End"/>
<Image Source="Save_Dark.png" Grid.Row="3" Grid.Column="2" HorizontalOptions="End"/>
</Grid>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
But when I put it right under the <ContentPage.Content> tag, it gives the following error:
The property 'Content' is set more than once
When I put it above the <ContentPage.Content> tag, my whole screen is the header.
How can I fix this?
Content can only have ONE child element. If you want to have multiple child elements, you need to place them inside of a layout container (Grid, StackLayout, etc)
I'm learning the below Xamarin code, I would like to make each image fulfills its cell. I already tried VerticalOptions="FillAndExpand".
But it doesn't work. How to solve it?
<Grid x:Name="initialpagelayout" VerticalOptions="StartAndExpand" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image VerticalOptions="FillAndExpand" BackgroundColor="Red" Grid.Row="0" Grid.Column="0" x:Name="MyIcon01"></Image>
<Image BackgroundColor="Blue" Grid.Row="0" Grid.Column="1" x:Name="MyIcon02"></Image>
<Image BackgroundColor="Green" Grid.Row="0" Grid.Column="2" x:Name="MyIcon03"></Image>
<Image BackgroundColor="Yellow" Grid.Row="1" Grid.Column="0" x:Name="MyIcon04"></Image>
<Image BackgroundColor="Pink" Grid.Row="1" Grid.Column="1" x:Name="MyIcon05"></Image>
<Image BackgroundColor="Red" Grid.Row="1" Grid.Column="2" x:Name="MyIcon06"></Image>
<Image Grid.Row="2" Grid.Column="0" x:Name="MyIcon07"></Image>
<Image Grid.Row="2" Grid.Column="1" x:Name="MyIcon08"></Image>
<Image Grid.Row="2" Grid.Column="2" x:Name="MyIcon09"></Image>
<Image Grid.Row="3" Grid.Column="0" x:Name="MyIcon10"></Image>
<Image Grid.Row="3" Grid.Column="1" x:Name="MyIcon11"></Image>
<Image Grid.Row="3" Grid.Column="2" x:Name="MyIcon12"></Image>
</Grid>
UPDATE1
I added Aspect="Fill" into each <Image>, and I get the below:
It works well but I notice there is a blank space above the first row, but I don't have any placeholder there,
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Guru.Pwa.Mobile.Initial">
<ContentPage.Content>
<Grid x:Name="initialpagelayout" VerticalOptions="StartAndExpand" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Aspect="Fill" Grid.Row="0" Grid.Column="0" x:Name="MyIcon01"></Image>
<Image Aspect="Fill" Grid.Row="0" Grid.Column="1" x:Name="MyIcon02"></Image>
<Image Aspect="Fill" Grid.Row="0" Grid.Column="2" x:Name="MyIcon03"></Image>
<Image Aspect="Fill" Grid.Row="1" Grid.Column="0" x:Name="MyIcon04"></Image>
<Image Aspect="Fill" Grid.Row="1" Grid.Column="1" x:Name="MyIcon05"></Image>
<Image Aspect="Fill" Grid.Row="1" Grid.Column="2" x:Name="MyIcon06"></Image>
<Image Aspect="Fill" Grid.Row="2" Grid.Column="0" x:Name="MyIcon07"></Image>
<Image Aspect="Fill" Grid.Row="2" Grid.Column="1" x:Name="MyIcon08"></Image>
<Image Aspect="Fill" Grid.Row="2" Grid.Column="2" x:Name="MyIcon09"></Image>
<Image Aspect="Fill" Grid.Row="3" Grid.Column="0" x:Name="MyIcon10"></Image>
<Image Aspect="Fill" Grid.Row="3" Grid.Column="1" x:Name="MyIcon11"></Image>
<Image Aspect="Fill" Grid.Row="3" Grid.Column="2" x:Name="MyIcon12"></Image>
</Grid>
</ContentPage.Content>
</ContentPage>
How to remove it?
I have a card view and in that, I have an image. I have to set the corner radius for that image so I'm using frames for doing that.
This is the UI I need and I have marked the Image
This is the result I'm getting
.
This is my code
<xfx:XfxCardView
BackgroundColor="White"
CornerRadius="30"
Elevation="30"
HeightRequest="100" >
<Grid RowSpacing="0">
<Grid ColumnSpacing="0">
<Grid.RowDefinitions >
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Frame CornerRadius="10" Margin="0" Padding="0" IsClippedToBounds="True">
<Image Margin="-70,0,0,0" Source="restaurantimage1.jpg" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3"/>
</Frame>
<Label Grid.Row="0" Grid.Column="1" Margin="0,0,100,0" BackgroundColor="Aqua" HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>
<Label Grid.Row="1" Grid.Column="1" Margin="0,0,100,0" BackgroundColor="Green" HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>
<Label Grid.Row="2" Grid.Column="1" Margin="0,0,100,0" BackgroundColor="LightBlue" VerticalTextAlignment="Start" Text="Indian,Italy,Chinese" TextColor="LightGray"/>
</Grid>
</Grid>
</xfx:XfxCardView>
I have made changes in corner radius and margins but I'm not getting the desired result. Do I have to use something else to do that or should I make any changes in the Frame.
I have done some changes in code so and I'm slightly near to the desired output.
This is the current output
There is still a gap in the frame as you can see I have made changes in the code but still it is not getting fixed. This is my code
<xfx:XfxCardView
BackgroundColor="White"
CornerRadius="30"
Elevation="30"
HeightRequest="100" >
<Grid RowSpacing="0">
<Grid ColumnSpacing="0">
<Grid.RowDefinitions >
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Frame Margin="0" Padding="-40" CornerRadius="25" Grid.RowSpan="3" BackgroundColor="LightBlue" IsClippedToBounds="True">
<Image Margin="-70,0,0,0" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" BackgroundColor="AliceBlue" Source="restaurantimage1.jpg" />
</Frame>
<Label Grid.Row="0" Grid.Column="1" Margin="0,0,100,0" HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>
<Label Grid.Row="1" Grid.Column="1" Margin="0,0,100,0" HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>
<Label Grid.Row="2" Grid.Column="1" Margin="0,0,100,0" VerticalTextAlignment="Start" Text="Indian,Italy,Chinese" TextColor="LightGray"/>
</Grid>
</Grid>
</xfx:XfxCardView>
Try setting the is clipped to bounds property as true in your Grid's xaml
<Grid RowSpacing="0" IsClippedToBounds="True">
I fixed it by changing the margin of my frame. This is my code now
<xfx:XfxCardView
BackgroundColor="White"
CornerRadius="30"
Elevation="20"
HeightRequest="150" IsClippedToBounds="True">
<Grid RowSpacing="0" >
<Grid ColumnSpacing="0">
<Grid.RowDefinitions >
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Frame Margin="10,10,10,20" Padding="-40" CornerRadius="10" Grid.RowSpan="3" BackgroundColor="LightBlue" IsClippedToBounds="True">
<Image Margin="-70,0,0,0" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" BackgroundColor="AliceBlue" Source="restaurantimage1.jpg" />
</Frame>
<Label Grid.Row="0" Grid.Column="1" Margin="0,30,30,0" HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>
<Image Grid.Row="0" Grid.Column="1" Margin="0,30,10,0" HorizontalOptions="End" Source="whitehearticon3.jpg"/>
<Label Grid.Row="1" Grid.Column="1" Margin="0,-20,40,0" HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>
<Label Grid.Row="2" Grid.Column="1" Margin="0,0,40,0" VerticalTextAlignment="Start" Text="Indian,Italy,Chinese Kitchen" TextColor="LightGray"/>
</Grid>
</Grid>
</xfx:XfxCardView>
I have a 5x5 grid defined with column definitions and row definitions. The first column contains 5 rows of entry boxes in a frame. The second column is to contain a custom view I created which itself made up of a grid that contains two graphs side by side, rotated 90 degrees.
The problem I am having is even though I am setting, the colspan, rowspan, widthRequest, heightRequest, horizontal and vertical options on the custom view, I am unable to get the view to stretch the entire length of the first column.
My grid code:
`<Grid x:Name="Grid">
<Grid.RowDefinitions>
<RowDefinition Height="20*"/>
<RowDefinition Height="20*"/>
<RowDefinition Height="20*"/>
<RowDefinition Height="20*"/>
<RowDefinition Height="20*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="20*"/>
</Grid.ColumnDefinitions>
<Frame Grid.Row="0" Grid.Column="0" OutlineColor="Black" Padding="1" BackgroundColor="Black" HeightRequest="40" VerticalOptions="Center">
<Entry WidthRequest="10"
BackgroundColor="Blue"
VerticalOptions="Center"
Focused="entryFocused"
Unfocused="entryUnfocused"
Completed="entryComplete"
Keyboard="Numeric"/>
</Frame>
<Frame Grid.Row="1" Grid.Column="0" OutlineColor="Black" Padding="1" BackgroundColor="Black" HeightRequest="40" VerticalOptions="Center">
<Entry WidthRequest="10"
BackgroundColor="Blue"
VerticalOptions="Center"
Focused="entryFocused"
Unfocused="entryUnfocused"
Completed="entryComplete"
Keyboard="Numeric"/>
</Frame>
<Frame Grid.Row="2" Grid.Column="0" OutlineColor="Black" Padding="1" BackgroundColor="Black" HeightRequest="40" VerticalOptions="Center">
<Entry WidthRequest="10"
BackgroundColor="Blue"
VerticalOptions="Center"
Focused="entryFocused"
Unfocused="entryUnfocused"
Completed="entryComplete"
Keyboard="Numeric"/>
</Frame>
<Frame Grid.Row="3" Grid.Column="0" OutlineColor="Black" Padding="1" BackgroundColor="Black" HeightRequest="40" VerticalOptions="Center">
<Entry WidthRequest="10"
BackgroundColor="Blue"
VerticalOptions="Center"
Focused="entryFocused"
Unfocused="entryUnfocused"
Completed="entryComplete"
Keyboard="Numeric"/>
</Frame>
<Frame Grid.Row="4" Grid.Column="0" OutlineColor="Black" Padding="1" BackgroundColor="Black" HeightRequest="40" VerticalOptions="Center">
<Entry WidthRequest="10"
BackgroundColor="Blue"
VerticalOptions="Center"
Focused="entryFocused"
Unfocused="entryUnfocused"
Completed="entryComplete"
Keyboard="Numeric"/>
</Frame>
<custom:BoardMeasureGraph_Micro x:Name="Micro" Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="5" Grid.RowSpan="1" Margin="150, 80, 0, 0" MinimumHeightRequest="430" MinimumWidthRequest="475" HeightRequest="400" WidthRequest="400" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
</Grid>`
My custom view code :
<ContentView.Content>
<Grid Padding="0" RowSpacing="0" BackgroundColor="Transparent" ColumnSpacing="0" Rotation="90" TranslationX="-149" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<microcharts:ChartView Grid.Row="0" x:Name="ChartView" HeightRequest="50" WidthRequest="150" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
<microcharts:ChartView Grid.Row="1" Rotation="180" RotationY="180" x:Name="UnderChartView" HeightRequest="50" WidthRequest="50" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
</Grid>
</ContentView.Content>
The output when running the App. The custom control never expands beyond the first couple of entry boxes.
I think you have to set colSpan to 4 instead of 5, since you want it to cover 4 columns (1,2,3,4 - not 0).
<custom:BoardMeasureGraph_Micro x:Name="Micro" Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="4" Grid.RowSpan="1" Margin="150, 80, 0, 0" MinimumHeightRequest="430" MinimumWidthRequest="475" HeightRequest="400" WidthRequest="400" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
Also I am not sure if it is possible to combine height/width Requests with the grid configuration. Maybe this causes some issue too. But as I said, I am not sure about this.
I have Xamarin Forms app. My page bottom should look like this:
Currently it looks like this:
Problem is that StackLayout doesn't expand to fill space. Here is my xaml:
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="End" Spacing="0" >
<Grid ColumnSpacing="0" RowSpacing="0" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<StackLayout HorizontalOptions="CenterAndExpand" Grid.Column="0" Grid.Row="1" BackgroundColor="Blue" >
<Label Text="First" TextColor="#FFFFFF" HorizontalOptions="CenterAndExpand" />
</StackLayout>
<StackLayout HorizontalOptions="CenterAndExpand" Grid.Column="1" Grid.Row="1" BackgroundColor="Red" >
<Label Text="Second" TextColor="#FFFFFF" HorizontalOptions="CenterAndExpand" />
</StackLayout>
</Grid>
</StackLayout>
How can I expand StackLayout inside Grid? I would like that blue and red backgrounds touch in the middle.
You set the StackLayouts to CenterAndExpand, which means they will only take up as much room as they need. You should FillAndExpand them like:
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="End" Spacing="0" >
<Grid ColumnSpacing="0" RowSpacing="0" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<StackLayout HorizontalOptions="FillAndExpand" Grid.Column="0" Grid.Row="1" BackgroundColor="Blue" >
<Label Text="First" TextColor="#FFFFFF" HorizontalOptions="CenterAndExpand" />
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand" Grid.Column="1" Grid.Row="1" BackgroundColor="Red" >
<Label Text="Second" TextColor="#FFFFFF" HorizontalOptions="CenterAndExpand" />
</StackLayout>
</Grid>
</StackLayout>
I know its an old thread - just stumbled on this as part of trying to solve the same problem.
"FillAndExpand" isn't the magic bullet however. You can see in this code that every nested element including the Grid is set to FillAndExpand, yet there's not expanding taking place.
<ScrollView
x:Name="rightScroll"
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="1"
Margin="0"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
BackgroundColor="Yellow">
<FlexLayout
Margin="0"
Padding="0"
AlignContent="Start"
AlignItems="Start"
BindableLayout.ItemsSource="{Binding CurrentIncidentReport.Photos}"
Direction="Column"
HorizontalOptions="FillAndExpand"
JustifyContent="SpaceBetween"
VerticalOptions="FillAndExpand">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid HorizontalOptions="FillAndExpand" BackgroundColor="DarkOrange">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition x:Name="textColumn"/>
</Grid.ColumnDefinitions>
<Image
Grid.Column="0"
Aspect="Fill"
HeightRequest="{StaticResource IconSize}"
Source="{Binding Photo.Source}"
VerticalOptions="CenterAndExpand"
WidthRequest="{StaticResource IconSize}" />
<!-- The editor sizes in jumps matching text size. Have to size the image to the editor not the other way around -->
<Frame
Grid.Column="1"
Margin="0"
Padding="3"
BorderColor="Red"
HeightRequest="{StaticResource IconSize}"
HorizontalOptions="FillAndExpand">
<Frame.Triggers>
<DataTrigger
Binding="{Binding HasValidDescription}"
TargetType="Frame"
Value="True">
<Setter Property="BorderColor" Value="Transparent" />
</DataTrigger>
</Frame.Triggers>
<controls:CustomEditor
x:Name="descEditor"
Margin="0,4,0,4"
BackgroundColor="White"
HorizontalOptions="FillAndExpand"
Keyboard="Chat"
Placeholder="Enter description of photo"
PlaceholderColor="Gray"
Text="{Binding Description, Mode=TwoWay}"
TextColor="Black"
Unfocused="CustomEditor_Unfocused" />
</Frame>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
</ScrollView>