Question

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

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

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

有什么想法吗？

Answer 1

您可以使用网格和可视状态管理器来完成此操作：

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

Answer 2

您可以执行以下操作：

步骤1）添加您的创辉相框第2步）将其TranslationX属性设置为DeviceWidth -50例如，如果屏幕宽度为350，则应将TranslationX =“ 300”设置为第三步添加它们的滑动手势，将框架的TranslationX设置为零。就是这样。

Xamarin在页面中创建滑动页面

2 个答案: