閒置時間後隱藏鼠標光標和StackPanel Windows 8.1 - 通用應用程序

Question

我正在使用C＃和XAML編寫視頻播放器應用程序，通用應用程序（Windows 8.1和Windows Phone 8.1）。有一個非常好的UX是：

• 當鼠標是一組時間後閒置，鼠標和所有控件（播放，暫停..）被隱藏
• 當鼠標移動，鼠標光標和所有控件出現。

它看起來和Windows 8.1上的視頻應用完全一樣;雖然簡單，但它是一個非常好的用戶體驗。

下面是一些我的控制，我把他們都在一個StackPanel：

<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來說，解決方案是一樣的，幾乎相同的控件。

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