XAML 与xamarin形式绑定的列定义赋值

pdkcd3nj  于 2023-01-03  发布在  其他
关注(0)|答案(1)|浏览(108)

我需要列是动态的并且值 来改变我点击按钮的时间。
我创建了一个方法,当激活该方法时,它会将值传递给一个变量,该变量将通过绑定用于关联。

private void clickedColumnDefinition()
        {
           ColumnDefinition1 = 420;
        }

此方法的属性具有声明的GrindLenght:

private GridLength _columnDefinition1;
    public GridLength ColumnDefinition1 {
        get { return _columnDefinition1; }
        set { SetProperty(ref _columnDefinition1, value); }
    }

在xaml中,像这样定义列:

<ColumnDefinition Width="{Binding ColumnDefinition1, Converter={StaticResource numberToGridLengthConverter}}"/>

我使用的转换器是这一个,但当我按下按钮时什么也没发生.

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;
        }
    }

会有什么问题呢?

lyfkaqu1

lyfkaqu11#

如果您想将RowDefinition的高度设置为动态值,您可以执行以下操作:
1.创建视图模型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.绑定MainPage.xaml中的属性,如下所示:

<?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;
    }
}
    • 注:**

我为这个视图模型添加了RowFirstHeightRowSecondHeight两个属性,并实现了INotifyPropertyChanged接口,如果我们更改上述属性的值,UI将自动更新。

相关问题