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:

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

Any ideas?

回答1:

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>

code behind:

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

回答2:

You can do it with the followings:

Step 1) Add your colorfull frames Step 2) Set their TranslationX property to DeviceWidth -50 For example if your screen width is 350, you should set TranslationX="300" Step 3) Add them swipe gesture which set your frame's TranslationX to zero. And that is it.

来源：https://stackoverflow.com/questions/58984983/xamarin-create-swipe-page-in-page