在空闲时间后隐藏鼠标光标和堆栈面板 Windows 8.1 - 通用应用程序

本文关键字：Windows 应用程序 堆栈 时间 隐藏 光标 鼠标 | 更新日期: 2023-09-27 18:35:45

我正在使用C#和XAML编写一个视频播放器应用程序，一个通用应用程序（Windows 8.1和Windows Phone 8.1）。有一个非常好的用户体验是：

    当鼠标在
  • 一段时间后处于空闲状态时，鼠标和所有控件（播放、暂停等）都将隐藏
  • 当鼠标移动时，将显示鼠标光标和所有控件。

它看起来与Windows 8.1上的视频应用程序一模一样;虽然简单，但它是一个非常好的UX。

这是我的一些控件，我将它们全部放在堆栈面板中：

<StackPanel x:Name="MyControls" 
            Orientation="Horizontal" >
    <Button x:Name="btnPlay"
            Click="btnPlay_Click" />
    <Button x:Name="btnPause"
            Click="btnPause_Click" />
</StackPanel>

以及我的控件代码：

private void btnPlay_Click(object sender, RoutedEventArgs e)
{
    videoMediaElement.Play();
}
private void btnPause_Click(object sender, RoutedEventArgs e)
{
    videoMediaElement.Pause();
}

所以再一次，我的问题是如何做到这一点？

    当鼠标在
  • 一段时间后处于空闲状态时，鼠标和所有控件（播放、暂停等）都将隐藏
  • 当鼠标移动时，将显示鼠标光标和所有控件。

因为它是一个通用应用程序，我想Windows Phone 8.1的解决方案是相同的，只是相同的控件。

在空闲时间后隐藏鼠标光标和堆栈面板 Windows 8.1 - 通用应用程序

创建一个DispatcherTimer在一定时间后隐藏StackPanel和光标，并在移动指针时显示它们怎么样？

private DispatcherTimer _timer = new DispatcherTimer { Interval = TimeSpan.FromSeconds(5) };
public MainPage()
{
    this.InitializeComponent();
}
private void MainPage_PointerMoved(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
{
    this.ShowControls();
    // restart the timer whenever the user moves the cursor
    _timer.Start();
}
private void Timer_Tick(object sender, object e)
{
    this.HideControls();
}
private void btnPlay_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
    _timer.Tick += Timer_Tick;
    this.PointerMoved += MainPage_PointerMoved;
    _timer.Start();
}
private void btnPause_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
    _timer.Tick -= Timer_Tick;
    this.PointerMoved -= MainPage_PointerMoved;
    _timer.Stop();
}
private void HideControls()
{
    // todo: better use animation here
    this.MyControls.Visibility = Visibility.Collapsed;
    Window.Current.CoreWindow.PointerCursor = null;
}
private void ShowControls()
{
    // todo: better use animation here
    this.MyControls.Visibility = Visibility.Visible;
    Window.Current.CoreWindow.PointerCursor = new CoreCursor(CoreCursorType.Arrow, 1);
}

奖金

说你想对StackPanel的输入/输出进行动画处理。首先，您需要在页面的 xaml 中定义两个Storyboard。

<Page.Resources>
    <Storyboard x:Name="HideAnimation">
        <DoubleAnimation Duration="0:0:0.3" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MyControls" d:IsOptimized="True"/>
        <DoubleAnimation Duration="0:0:0.3" To="0.6" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="MyControls" d:IsOptimized="True">
            <DoubleAnimation.EasingFunction>
                <ExponentialEase EasingMode="EaseIn"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
        <DoubleAnimation Duration="0:0:0.3" To="0.6" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="MyControls" d:IsOptimized="True">
            <DoubleAnimation.EasingFunction>
                <ExponentialEase EasingMode="EaseIn"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)" Storyboard.TargetName="MyControls">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <x:Boolean>False</x:Boolean>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
            <DiscreteObjectKeyFrame KeyTime="0:0:0.3">
                <DiscreteObjectKeyFrame.Value>
                    <x:Boolean>True</x:Boolean>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Name="ShowAnimation">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MyControls">
            <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimation Duration="0:0:0.3" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="MyControls" d:IsOptimized="True">
            <DoubleAnimation.EasingFunction>
                <ExponentialEase EasingMode="EaseOut"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
        <DoubleAnimation Duration="0:0:0.3" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="MyControls" d:IsOptimized="True">
            <DoubleAnimation.EasingFunction>
                <ExponentialEase EasingMode="EaseOut"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)" Storyboard.TargetName="MyControls">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <x:Boolean>True</x:Boolean>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
            <DiscreteObjectKeyFrame KeyTime="0:0:0.3">
                <DiscreteObjectKeyFrame.Value>
                    <x:Boolean>True</x:Boolean>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</Page.Resources>

然后您只需调用它们而不是设置Visibility。

private void HideControls()
{
    this.HideAnimation.Begin();
    Window.Current.CoreWindow.PointerCursor = null;
}
private void ShowControls()
{
    this.ShowAnimation.Begin();
    Window.Current.CoreWindow.PointerCursor = new CoreCursor(CoreCursorType.Arrow, 1);
}
相关文章：