Xamarin在页面中创建滑动页面 [英] Xamarin Create swipe page in page

问题描述

我有一个问题...我想创建一个看起来像这样的页面:

I have a question... I want to create a page that looks like this:

然后，当您滑动四个块之一时，您会得到:

And then when you swipe one of the four blocks, you get this:

这在Xamarin形式中是否可行?我不知道在哪里寻找Google或如何开始！

Is this somehow possible in Xamarin Forms? I have no idea where to google for or how to start!

有什么想法吗?

推荐答案

您可以使用Grid和可视状态管理器来实现:

you can do it with a Grid and the visual state manager:

<Grid>

        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

<Grid Grid.Column="1"
              Margin="0,5"
              HeightRequest="200"
              VerticalOptions="Start">

            <!-- Button to expand menu -->
            <yummy:PancakeView x:Name="ExpandButton"
                               Margin="10,0,0,18"
                               BackgroundColor="Blue"
                               CornerRadius="15,0, 15,0"
                               IsVisible="True"
                               HeightRequest="60">
                <yummy:PancakeView.GestureRecognizers>
                    <TapGestureRecognizer Tapped="ExpandButtonFrame_Tapped"/>
                </yummy:PancakeView.GestureRecognizers>

                <Label Text="&#xE752;"
                       TextColor="White"
                       HorizontalOptions="End"
                       Margin="0,20,10,0"
                       FontSize="Large"
                       FontFamily="{StaticResource SegMdl2}"/>

                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">

                        <VisualState x:Name="Expand">
                            <VisualState.Setters>
                                <Setter Property="IsVisible" Value="False"/>
                            </VisualState.Setters>
                        </VisualState>

                        <VisualState x:Name="Expanded">
                            <VisualState.Setters>
                                <Setter Property="IsVisible" Value="True"/>
                            </VisualState.Setters>
                        </VisualState>

                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>

            </yummy:PancakeView>

            <!-- Button to collapse menu-->
            <yummy:PancakeView x:Name="CollapsedButton"
                              Margin="10,0,0,18"
                              BackgroundColor="Blue"
                              CornerRadius="15,0, 15,0"
                              IsVisible="True"
                              WidthRequest="38">
                <yummy:PancakeView.GestureRecognizers>
                    <TapGestureRecognizer Tapped="CollapsedButtonFrame_Tapped"/>
                </yummy:PancakeView.GestureRecognizers>

                <Label Text="&#xE70D;"
                       HorizontalOptions="End"
                       Margin="0,20,10,0"
                       FontSize="Large"
                       TextColor="White"
                       FontFamily="{StaticResource SegMdl2}"/>

                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">

                        <VisualState x:Name="Expanded">
                            <VisualState.Setters>
                                <Setter Property="IsVisible" Value="True"/>
                            </VisualState.Setters>
                        </VisualState>

                        <VisualState x:Name="Collapsed">
                            <VisualState.Setters>
                                <Setter Property="IsVisible" Value="False"/>
                            </VisualState.Setters>
                        </VisualState>

                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>

            </yummy:PancakeView>

            <!-- Collapsed Container -->
            <StackLayout x:Name="CollapsedStackLayout"
                         Margin="10,20,40,30">

                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">

                        <VisualState x:Name="Expanded">
                            <VisualState.Setters>
                                <Setter Property="IsVisible" Value="False"/>
                            </VisualState.Setters>
                        </VisualState>

                        <VisualState x:Name="Collapsed">
                            <VisualState.Setters>
                                <Setter Property="IsVisible" Value="True"/>
                            </VisualState.Setters>
                        </VisualState>

                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>

                <Label Text="Test" TextColor="White"/>
                <Label Text="...." TextColor="White"/>

            </StackLayout>

            <!-- Expanded container menu -->
            <StackLayout x:Name="StackLayout"
                         Margin="10,20,40,30"
                         IsVisible="False"
                         Orientation="Horizontal">

                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">

                        <VisualState x:Name="Expanded">
                            <VisualState.Setters>
                                <Setter Property="IsVisible" Value="True"/>
                            </VisualState.Setters>
                        </VisualState>

                        <VisualState x:Name="Collapsed">
                            <VisualState.Setters>
                                <Setter Property="IsVisible" Value="False"/>
                            </VisualState.Setters>
                        </VisualState>

                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Label Text="Test" TextColor="White" Margin="30,0,0,0"/>
                <Label Text="Test" TextColor="White"/>
                <Label Text="Test" TextColor="White"/>
                <Label Text="Test" TextColor="White"/>
                <Label Text="Test" TextColor="White"/>
                <Label Text="Test" TextColor="White"/>
                <Label Text="Test" TextColor="White"/>
                <Label Text="Test" TextColor="White" Margin="0,0,30,0"/>
            </StackLayout>

        </Grid>
    </Grid>

后面的代码:

private void ExpandButtonFrame_Tapped(object sender, EventArgs e)
    {
        GoToSate("Expanded");
    }

    private void CollapsedButtonFrame_Tapped(object sender, EventArgs e)
    {
        GoToSate("Collapsed");
    }

    private void GoToSate(string currentState)
    {
        VisualStateManager.GoToState(CollapsedButton, currentState);
        VisualStateManager.GoToState(ExpandButton, currentState);
        VisualStateManager.GoToState(StackLayout, currentState);
        VisualStateManager.GoToState(CollapsedStackLayout, currentState);
    }

这篇关于Xamarin在页面中创建滑动页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！