如何在Windows 8.1手机中添加从底部滑动/拖动视图

时间:2015-12-22 16:07:58

标签: windows xaml windows-phone-8.1 windows-8.1

嘿我想在我的Windows 8.1手机应用程序中查看我可以从窗口底部轻扫(下面的图片更好地解释了它)。视图必须允许再次滑动/拖动到底部。有什么想法或提示我该怎么做?提前谢谢。

这是我最初想要的 Image - Initial state of view

Image - On swiping of view

2 个答案:

答案 0 :(得分:0)

使用Windows手机底部应用栏。这将为您提供所需的功能。但是无法自定义底部应用栏,例如你无法添加单选按钮或复选框。它有自己的预定义按钮,称为 AppBarButton &的 AppBarToggleButtons 即可。 有关更多信息,请访问以下链接: Windows Phone 8.1 for Developers – Application bar

我希望这会对你有所帮助。

答案 1 :(得分:0)

试试这个:
MainPage.xaml中

<Page x:Name="page"
x:Class="MyApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Canvas Background="Red">
    <Grid>
        <!--Your layout-->
    </Grid>
    <Grid x:Name="swipingContent"  Canvas.Left="0"  Background="Black" Width="{Binding ActualWidth, ElementName=page, Mode=OneWay}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Thumb x:Name="thumb" Height="35" ManipulationMode="TranslateY" IsEnabled="True" ManipulationDelta="Thumb_ManipulationDelta"/>
        <TextBlock Foreground="Black" FontSize="22" Text="Heading" VerticalAlignment="Center"/>
        <CheckBox Grid.Row="1" IsChecked="True" Content="Some CheckBox"/>
        <!--and other layout-->
    </Grid>
</Canvas>
</Page>

MainPage.xaml.cs中:

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        Windows.UI.ViewManagement.StatusBar.GetForCurrentView().HideAsync();
        this.NavigationCacheMode = NavigationCacheMode.Required;
        this.SizeChanged += MainPage_SizeChanged;

    }

    private void MainPage_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        swipingContent.SetValue(Canvas.TopProperty, e.NewSize.Height - thumb.ActualHeight);
    }


    private void Thumb_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
        var maxSwipedHeight = swipingContent.Height;
        var currentPosition = (double)swipingContent.GetValue(Canvas.TopProperty);
        var distanceFromBottom = this.ActualHeight - currentPosition;
        var targetDistance = distanceFromBottom  - e.Delta.Translation.Y;
        double targetPosition;
        if (targetDistance <= thumb.ActualHeight)
        {
            targetPosition = this.ActualHeight - thumb.ActualHeight;
        }
        else if (targetDistance >= maxSwipedHeight)
        {
            targetPosition = this.ActualHeight - maxSwipedHeight;
        }
        else
        {
            targetPosition = this.ActualHeight - targetDistance;
        }
        swipingContent.SetValue(Canvas.TopProperty, targetPosition);
    }
}