Question

在我的共享项目中，我需要在单击按钮时调整BoxView的大小。它应该优先在不占空间和任何屏幕大小的25％之间切换，我通常使用AbsoluteLayout。

我已尝试使用AbsoluteLayout和LayoutTo，但由于LayoutTo以像素为单位操作，因此我无法按比例调整大小。

然后我改变了我的解决方案以使用Grid和自定义动画，如下面的代码所示。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:AnimationTest"
             x:Class="AnimationTest.MainPage">
    <Grid ColumnSpacing="0" RowSpacing="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="9*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" x:Name="LeftColumn"/>
            <ColumnDefinition Width="3*"/>
        </Grid.ColumnDefinitions>

        <BoxView Color="DarkMagenta" Grid.Row="0" Grid.Column="0"/>

        <Button Text="Animate" Grid.Row="1" Grid.Column="1" Clicked="Button_Clicked"/>

    </Grid>
</ContentPage>

和代码隐藏

namespace AnimationTest
{
    public partial class MainPage : ContentPage
    {
        Animation _animation;
        bool _boxCollapsed = false;

        public MainPage()
        {
            InitializeComponent();
        }

        private void Button_Clicked(object sender, EventArgs e)
        {
            switch (_boxCollapsed)
            {
                case true:
                    _animation = new Animation(
                    (d) => LeftColumn.Width = new GridLength(1, GridUnitType.Star));
                    _animation.Commit(this, "the animation", 16, 1000, Easing.SinIn, null, null);
                    _boxCollapsed = false;
                    break;
                case false:
                    _animation = new Animation(
                    (d) => LeftColumn.Width = new GridLength(0, GridUnitType.Star));
                    _animation.Commit(this, "the animation", 16, 1000, Easing.SinIn, null, null);
                    _boxCollapsed = true;
                    break;
            }
        }
    }
}

这提出了两个问题。

虽然目前不是问题，但这个解决方案显然会调整整个列的大小，而不仅仅是BoxView，这可能会在以后阶段成为问题。第二个问题是它似乎忽略了Easing参数，并且只是在两个宽度之间立即进行而不实际制作动画。

我希望有人至少可以告诉我这个问题与Easing有什么关系，或者提出一个不同的，希望更优雅的解决方案。

Answer 1

你只需要更改动画行上的代码，我已经给你提示如何获得25％的屏幕尺寸。希望它有所帮助。

private void Button_Clicked(object sender, EventArgs e)
    {
        var twentyFivePercentOfScreen = this.Width * .25;

        switch (_boxCollapsed)
        {
            case true:
                _animation = new Animation(
                    (d) => LeftColumn.Width = d, 0, twentyFivePercentOfScreen);
                _animation.Commit(this, "the animation", 16, 250, Easing.SinIn, null, null);
                _boxCollapsed = false;
                break;
            case false:
                _animation = new Animation(
                    (d) => LeftColumn.Width = d, twentyFivePercentOfScreen, 0);
                _animation.Commit(this, "the animation", 16, 250, Easing.SinIn, null, null);
                _boxCollapsed = true;
                break;
        }
    }

在Xamarin表格中按比例动画调整boxview的大小

1 个答案: