gpt4 book ai didi

c# - 可拖动的 StackPanel Windows Phone 8.1

转载 作者:太空宇宙 更新时间:2023-11-03 15:43:45 25 4
gpt4 key购买 nike

我正在开发一个 Windows Phone 8.1 应用程序,其中一个 MapControl 作为我的应用程序的主要焦点。我基本上想集成与诺基亚 Here map 应用类似的体验设计。

底部的黑色框架可以向上拉以显示其内容。

我怎样才能做到这一点?

enter image description here

编辑

我现在有:

ExtraInfo.RenderTransform = new TranslateTransform();
ExtraInfo.ManipulationDelta += OnManipulationDelta;
ExtraInfo.ManipulationMode = Windows.UI.Xaml.Input.ManipulationModes.TranslateY;

在我的构造函数中事件处理程序

 private void OnManipulationDelta(object sender, Windows.UI.Xaml.Input.ManipulationDeltaRoutedEventArgs e)
{
try
{
Storyboard myStoryboard = (Storyboard)this.Resources["TestStoryboard"];

TranslateTransform myTranslate = new TranslateTransform();
myTranslate.Y = e.Delta.Translation.Y;
ExtraInfo.RenderTransform = myTranslate;

Storyboard.SetTarget(myStoryboard.Children[0] as DoubleAnimation, ExtraInfo);

myStoryboard.Begin();
}
catch (Exception)
{
Debug.WriteLine("Animation called");
}

}

我的 XAML

<Grid>
<StackPanel>
<Maps:MapControl Height="{Binding ActualHeight, ElementName=pageRoot}" x:Name="Map" LandmarksVisible="False" ZoomLevel="{Binding zoomlevel, Mode=TwoWay, FallbackValue=8}" MapServiceToken="#######" TrafficFlowVisible="True">

<Image x:Name="NewCheckImage" Visibility="Collapsed" Maps:MapControl.Location="{Binding Center, ElementName=Map}" Maps:MapControl.NormalizedAnchorPoint=".5,.5"></Image>
</Maps:MapControl>
<StackPanel x:Name="ExtraInfo" Height="{Binding ActualHeight, ElementName=pageRoot}" Background="Black" Margin="0,-250,0,0" Canvas.ZIndex="1">
<StackPanel.RenderTransform>
<TranslateTransform X="0" Y="0">
</TranslateTransform>
</StackPanel.RenderTransform>
</StackPanel>
</StackPanel>
</Grid>

Storyboard

<Page.Resources>
<Storyboard x:Key="TestStoryboard">
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
To="0">
</DoubleAnimation>
</Storyboard>
</Page.Resources>

但是面板做了一些神经质的不可预知的 Action 。

最佳答案

为您的 StackPanel 设置 RenderTransform = new TranslateTransform(),处理 Page ManipulationDelta 事件并更改您的 (StackPanel.RenderTransform as TranslateTransform).Y值。使用Storyboard(RenderTransform上的动画)实现触摸释放时上拉/下拉的效果。

你应该这样做:(伪代码)

void OnStackPanelLoaded(..)
{
StackPanel.VerticalAlingment = VerticalAlingment.Bottom;
StackPanel.RenderTransform = new TranslateTransform(0, StackPanel.ActualHeight);
// translate stackpanel out of page, be sure stackpanel has bottom alingment of grid
}

void OnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs args)
{
var stackPanelTransform = MyStackPanel.RenderTransform as TranslateTransform;

stackPanelTransform.Y += args.Delta.Translation.Y;
}

您还应该注册到 ManipulationCompleted 事件并在那里运行关闭/打开动画。

void OnManipulationCompleted(object sender, ManipulationCompletedEventArgs args)
{
// you can also add additional logic here to reverse open/close logic
// for example: if user touch translation delta is too small then instead of opening panel - close it like in Here
if (IsPanelOpened())
Resources["ClosePanelStoryboard"].BeginStoryboard();
else
Resources["OpenPanelStoryboard"].BeginStoryboard();

}

bool IsPanelOpened()
{
var translateTransform = myStackPanel.RenderTransform as TranslateTransform;

return translateTransform.Y > double.Epsilon;
}

检查 DoubleAnimation.EasingFunction - 实现与 Here Drive 相同的动画效果(动画打开/关闭)。

实现良好的面板需要时间。最初它应该有 Opacity = 0,IsHitTest = false(因为它可以在页面开始时闪烁 - 在设置 RenderTransform 之前) - 你还应该注册到 StackPanel 中的 SizeChanged 事件以确保 TranslateTransform 设置正确(有时你可以得到 StackPanel.ActualHeight值为 0 - 最有可能在发布版本中,因为它们更快)。

关于c# - 可拖动的 StackPanel Windows Phone 8.1,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29188080/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com