Assignment to ColumnDefinitions with binding to xamarin forms - xaml

Question

I need the column to be dynamic and the values ​​to change when I click the button.
I made a method that, when activated, will pass the value to a variable that will be used for association through binding.
private void clickedColumnDefinition()
{
ColumnDefinition1 = 420;
}
The property this method have a declared GrindLenght:
private GridLength _columnDefinition1;
public GridLength ColumnDefinition1 {
get { return _columnDefinition1; }
set { SetProperty(ref _columnDefinition1, value); }
}
In xaml define the column like this:
<ColumnDefinition Width="{Binding ColumnDefinition1, Converter={StaticResource numberToGridLengthConverter}}"/>
The converter I'm using is this one, but nothing happens when I press the button.
public class NumberToGridLengthConverter: IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var numberValue = (double)value;
return new GridLength(numberValue, GridUnitType.Star);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
var gridLength = (GridLength)value;
return gridLength.Value;
}
}
what can be wrong?

Answer 1

If you want to set the RowDefinition's Height to a Dynamic value. You can do as follows:
1.created a view model RowHeightClass
public class RowHeightClass: INotifyPropertyChanged
{
bool swith;
//public GridLength rowFirstHeight { set; get; }
GridLength _rowFirstHeight;
public GridLength RowFirstHeight
{
get => _rowFirstHeight;
set => SetProperty(ref _rowFirstHeight, value);
}
//public GridLength rowSecondHeight { set; get; }
GridLength _rowSecondHeight;
public GridLength RowSecondHeight
{
get => _rowSecondHeight;
set => SetProperty(ref _rowSecondHeight, value);
}
public RowHeightClass()
{
//initial RowFirstHeight and RowSecondHeight
RowFirstHeight = new GridLength(15);
RowSecondHeight = new GridLength(15);
}
public ICommand ResetHeightCommand => new Command(resetHeight);
private void resetHeight()
{ //reset RowFirstHeight and RowSecondHeight
if (!swith)
{
RowFirstHeight = new GridLength(50);
RowSecondHeight = new GridLength(50);
}
else {
RowFirstHeight = new GridLength(15);
RowSecondHeight = new GridLength(15);
}
swith = !swith;
}
bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
{
if (Object.Equals(storage, value))
return false;
storage = value;
OnPropertyChanged(propertyName);
return true;
}
protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
public event PropertyChangedEventHandler PropertyChanged;
}
2.bind the properties in MainPage.xaml as follows:
<?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="DynamicHeightApp.MainPage">
<StackLayout>
<Grid BackgroundColor="Orange">
<Grid.RowDefinitions>
<RowDefinition Height="{Binding RowFirstHeight}" />
<RowDefinition Height="{Binding RowSecondHeight}"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Text="Testing Color Change on this one" TextColor="Red"/>
<Label Grid.Row="1" Text="Testing Height" />
<Label Grid.Row="2" Text="Testing Height Change on this one through binding"/>
</Grid>
<Button Text="reset" Command="{Binding ResetHeightCommand}"/>
</StackLayout>
</ContentPage>
3.MainPage.xaml.cs
public partial class MainPage : ContentPage
{
RowHeightClass rowHeightClass;
public MainPage()
{
InitializeComponent();
rowHeightClass = new RowHeightClass();
BindingContext = rowHeightClass;
}
}
Note:
I added two properties RowFirstHeight and RowSecondHeight and implemented interface INotifyPropertyChanged for this view model, if we change the value of above properties, the UI will update automatically.