回答編集履歴

  > 動画プレイヤーを学習の一環として作ってみようと考えていますが、On/Offできる操作パネルのレイアウト方法で困っています。

 

  私も過去に何度か挑戦しているんですが、なかなか「これが決定版！」というのはできてないんですよねぇ（WinUI 3で`MediaPlayerElement`が使えるようになるんだったら、用済みになりそうというのもあります^^;

  [メディア プレーヤー - Windows apps | Microsoft Docs](https://docs.microsoft.com/ja-jp/windows/apps/design/controls/media-playback)

 

 

  Baseさんのイメージとはちょっと違うのかな？という気もしますが、

 

  > もし他のアイディアもあれば、記載いただけたら嬉しいです。

 

  ということなので「しばらくマウス操作がなければ消える」というのはどうでしょう？

  割と今風？ですし、何もしなくていいので（ユーザー目線で）楽な感じはします。

 

  ３秒間ウィンドウ内でマウスが動かなかった場合、下方向にスーッとスライドアウトします。

  マウスが動くとシュッとスライドインします（秒数やイージング具合はお好みで）

 

  こだわりポイントはシークバーをわざと見切れるようにして、隠れた状態でも再生位置がわかるようになっているところですｗ

 

  実際のプロジェクトではカスタムコントロールですが、最低限に簡略化するとこんな感じです。

 

  <Window

  x:Class="Questions358311.MainWindow"

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  Width="800"

  Height="450">

  <Grid

  x:Name="grid"

  Background="Transparent"

  ClipToBounds="True">

  <Grid.Resources>

  <Style TargetType="{x:Type Button}">

  <Setter Property="FontFamily" Value="Segoe MDL2 Assets" />

  <Setter Property="Width" Value="40" />

  <Setter Property="Height" Value="40" />

  </Style>

  </Grid.Resources>

 

  <!--<MediaElement />-->

  <!-- MediaElementのかわりにとりあえずImage -->

  <Image Source="https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/KnkDDC5A_thumbnail.jpg" />

 

  <StackPanel x:Name="lowerArea" VerticalAlignment="Bottom">

  <StackPanel.Background>

  <LinearGradientBrush MappingMode="RelativeToBoundingBox" StartPoint="0.5,0" EndPoint="0.5,1">

  <GradientStop Offset="1" Color="#CC000000" />

  <GradientStop Color="#00000000" />

  </LinearGradientBrush>

  </StackPanel.Background>

  <ProgressBar

  Height="30"

  Background="#00E6E6E6"

  Foreground="#340034B2"

  Value="50" />

  <Grid>

  <Grid.ColumnDefinitions>

  <ColumnDefinition />

  <ColumnDefinition Width="Auto" />

  <ColumnDefinition />

  </Grid.ColumnDefinitions>

  <StackPanel Orientation="Horizontal">

  <Button Command="MediaCommands.MuteVolume" Content="&#xE767;" />

  <Slider

  Width="125"

  VerticalAlignment="Center"

  IsMoveToPointEnabled="True" />

  </StackPanel>

  <StackPanel

  Grid.Column="1"

  Margin="10"

  HorizontalAlignment="Center"

  Orientation="Horizontal">

  <Button Command="MediaCommands.PreviousTrack" Content="&#xE892;" />

  <Button Command="MediaCommands.Play" Content="&#xE768;" />

  <Button Command="MediaCommands.Pause" Content="&#xE769;" />

  <Button Command="MediaCommands.NextTrack" Content="&#xE893;" />

  </StackPanel>

  </Grid>

  </StackPanel>

  <VisualStateManager.VisualStateGroups>

  <VisualStateGroup x:Name="ControllerStates">

  <VisualState x:Name="ControllerHide">

  <Storyboard>

  <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="lowerArea" Storyboard.TargetProperty="(FrameworkElement.Margin)">

  <EasingThicknessKeyFrame KeyTime="0:0:0.5" Value="0,0,0,-85">

  <EasingThicknessKeyFrame.EasingFunction>

  <ExponentialEase EasingMode="EaseIn" />

  </EasingThicknessKeyFrame.EasingFunction>

  </EasingThicknessKeyFrame>

  </ThicknessAnimationUsingKeyFrames>

  </Storyboard>

  </VisualState>

  <VisualState x:Name="ControllerShow">

  <Storyboard>

  <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="lowerArea" Storyboard.TargetProperty="(FrameworkElement.Margin)">

  <EasingThicknessKeyFrame KeyTime="0:0:0.2" Value="0,0,0,0">

  <EasingThicknessKeyFrame.EasingFunction>

  <CubicEase EasingMode="EaseIn" />

  </EasingThicknessKeyFrame.EasingFunction>

  </EasingThicknessKeyFrame>

  </ThicknessAnimationUsingKeyFrames>

  </Storyboard>

  </VisualState>

  </VisualStateGroup>

  </VisualStateManager.VisualStateGroups>

  </Grid>

  </Window>

  ```

 

  using System;

  using System.Windows;

  using System.Windows.Input;

  using System.Windows.Threading;

 

  namespace Questions358311

  {

  public partial class MainWindow : Window

  {

  private readonly DispatcherTimer hideTimer;

  private bool isHide;

 

  public MainWindow()

  {

  InitializeComponent();

 

  hideTimer = new DispatcherTimer { Interval = TimeSpan.FromSeconds(3), };

  hideTimer.Tick += (s, e) =>

  {

  hideTimer.Stop();

  isHide = true;

  UpdateStates(true);

  };

  }

 

  private void UpdateStates(bool useTransitions)

  {

  if (isHide) VisualStateManager.GoToElementState(grid, "ControllerHide", useTransitions);

  else VisualStateManager.GoToElementState(grid, "ControllerShow", useTransitions);

  }

 

  protected override void OnMouseMove(MouseEventArgs e)

  {

  base.OnMouseMove(e);

 

  isHide = false;

  UpdateStates(true);

 

  hideTimer.Start();

  }

  }

  }

  ```

  

  

 

  本来はボタン等にスタイルを当てていますが、無駄に長くなるので省略。

  コントローラ上にマウスを置きっぱにするとちょっとピクピクします（ちゃんとやろうとするとかなり面倒なので^^;