[WPF] 動画プレイヤー表示/非表示できる操作画面を作りたい

前提・実現したいこと

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

VLCプレイヤーを参考に作っているのですが、再生ボタンなどがある部分（以下、操作パネルと表現）は表示がOn/Offできる機能があります。
その機能を実装するために、どんな方法があるか調査していましたが、実現できそうな方法が見つからないので、お知恵をお借りできればと思い、質問させて頂きました。

※操作パネル：画像赤枠部分の事

該当のソースコード

XAML
1<Window x:Class="WpfExpanderlayout.MainWindow"
2        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6        xmlns:local="clr-namespace:WpfExpanderlayout"
7        mc:Ignorable="d"
8        Title="MainWindow" Height="450" Width="800" Loaded="Window_Loaded">
9    <Grid>
10        <Grid.RowDefinitions>
11            <RowDefinition Height="9*"/>
12            <RowDefinition Height="1*"/>
13        </Grid.RowDefinitions>
14        <MediaElement x:Name="MediaE" Grid.Row="0" />
15        <!--<Expander Grid.Row="1">
16            <TextBlock Text="ここに操作パネル"/>
17        </Expander>-->
18        <Grid Grid.Row="1" Visibility="Collapsed">
19            <TextBlock Text="ここに操作パネル"/>
20        </Grid>
21    </Grid>
22</Window>
23

試したこと

1)Expander
アコーディオンのように表示・非表示が簡単にできる機能ですが...
操作パネル部分を非表示にはできるものの、矢印ボタンが出てしまうのが、VLCの挙動と違う

2)GridレイアウトのVisibilityをCollapsedにして非表示(動きよければ、コンバーターなのでコントロールしたかった）
Collapsedは、コンポーネントの場所を保持しないという認識だったが、Gridにてスペースを保持しているためか、期待動作にはならず

補足情報（FW/ツールのバージョンなど）

VisualStudio2019
.Net4.7.2

行動規範の内容に同意します

回答2件

ベストアンサー

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

私も過去に何度か挑戦しているんですが、なかなか「これが決定版！」というのはできてないんですよねぇ（WinUI 3でMediaPlayerElementが使えるようになるんだったら、用済みになりそうというのもあります^^;
メディアプレーヤー - Windows apps | Microsoft Docs

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

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

ということなので「しばらくマウス操作がなければ消える」というのはどうでしょう？
割と今風？ですし、何もしなくていいので（ユーザー目線で）楽な感じはします。

３秒間ウィンドウ内でマウスが動かなかった場合、下方向にスーッとスライドアウトします。
マウスが動くとシュッとスライドインします（秒数やイージング具合はお好みで）

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

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

xml
1<Window
2  x:Class="Questions358311.MainWindow"
3  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5  Width="800"
6  Height="450">
7  <Grid
8    x:Name="grid"
9    Background="Transparent"
10    ClipToBounds="True">
11    <Grid.Resources>
12      <Style TargetType="{x:Type Button}">
13        <Setter Property="FontFamily" Value="Segoe MDL2 Assets" />
14        <Setter Property="Width" Value="40" />
15        <Setter Property="Height" Value="40" />
16      </Style>
17    </Grid.Resources>
18
19    <!--<MediaElement />-->
20    <!--  MediaElementのかわりにとりあえずImage  -->
21    <Image Source="https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/KnkDDC5A_thumbnail.jpg" />
22
23    <StackPanel x:Name="lowerArea" VerticalAlignment="Bottom">
24      <StackPanel.Background>
25        <LinearGradientBrush MappingMode="RelativeToBoundingBox" StartPoint="0.5,0" EndPoint="0.5,1">
26          <GradientStop Offset="1" Color="#CC000000" />
27          <GradientStop Color="#00000000" />
28        </LinearGradientBrush>
29      </StackPanel.Background>
30      <ProgressBar
31        Height="30"
32        Background="#00E6E6E6"
33        Foreground="#340034B2"
34        Value="50" />
35      <Grid>
36        <Grid.ColumnDefinitions>
37          <ColumnDefinition />
38          <ColumnDefinition Width="Auto" />
39          <ColumnDefinition />
40        </Grid.ColumnDefinitions>
41        <StackPanel Orientation="Horizontal">
42          <Button Command="MediaCommands.MuteVolume" Content="&#xE767;" />
43          <Slider
44            Width="125"
45            VerticalAlignment="Center"
46            IsMoveToPointEnabled="True" />
47        </StackPanel>
48        <StackPanel
49          Grid.Column="1"
50          Margin="10"
51          HorizontalAlignment="Center"
52          Orientation="Horizontal">
53          <Button Command="MediaCommands.PreviousTrack" Content="&#xE892;" />
54          <Button Command="MediaCommands.Play" Content="&#xE768;" />
55          <Button Command="MediaCommands.Pause" Content="&#xE769;" />
56          <Button Command="MediaCommands.NextTrack" Content="&#xE893;" />
57        </StackPanel>
58      </Grid>
59    </StackPanel>
60    <VisualStateManager.VisualStateGroups>
61      <VisualStateGroup x:Name="ControllerStates">
62        <VisualState x:Name="ControllerHide">
63          <Storyboard>
64            <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="lowerArea" Storyboard.TargetProperty="(FrameworkElement.Margin)">
65              <EasingThicknessKeyFrame KeyTime="0:0:0.5" Value="0,0,0,-85">
66                <EasingThicknessKeyFrame.EasingFunction>
67                  <ExponentialEase EasingMode="EaseIn" />
68                </EasingThicknessKeyFrame.EasingFunction>
69              </EasingThicknessKeyFrame>
70            </ThicknessAnimationUsingKeyFrames>
71          </Storyboard>
72        </VisualState>
73        <VisualState x:Name="ControllerShow">
74          <Storyboard>
75            <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="lowerArea" Storyboard.TargetProperty="(FrameworkElement.Margin)">
76              <EasingThicknessKeyFrame KeyTime="0:0:0.2" Value="0,0,0,0">
77                <EasingThicknessKeyFrame.EasingFunction>
78                  <CubicEase EasingMode="EaseIn" />
79                </EasingThicknessKeyFrame.EasingFunction>
80              </EasingThicknessKeyFrame>
81            </ThicknessAnimationUsingKeyFrames>
82          </Storyboard>
83        </VisualState>
84      </VisualStateGroup>
85    </VisualStateManager.VisualStateGroups>
86  </Grid>
87</Window>

cs
1using System;
2using System.Windows;
3using System.Windows.Input;
4using System.Windows.Threading;
5
6namespace Questions358311
7{
8    public partial class MainWindow : Window
9    {
10        private readonly DispatcherTimer hideTimer;
11        private bool isHide;
12
13        public MainWindow()
14        {
15            InitializeComponent();
16
17            hideTimer = new DispatcherTimer { Interval = TimeSpan.FromSeconds(3), };
18            hideTimer.Tick += (s, e) =>
19            {
20                hideTimer.Stop();
21                isHide = true;
22                UpdateStates(true);
23            };
24        }
25
26        private void UpdateStates(bool useTransitions)
27        {
28            if (isHide) VisualStateManager.GoToElementState(grid, "ControllerHide", useTransitions);
29            else VisualStateManager.GoToElementState(grid, "ControllerShow", useTransitions);
30        }
31
32        protected override void OnMouseMove(MouseEventArgs e)
33        {
34            base.OnMouseMove(e);
35
36            isHide = false;
37            UpdateStates(true);
38
39            hideTimer.Start();
40        }
41    }
42}

本来はボタン等にスタイルを当てていますが、無駄に長くなるので省略。
コントローラ上にマウスを置きっぱにするとちょっとピクピクします（ちゃんとやろうとするとかなり面倒なので^^;

投稿2021/09/08 09:22

編集2023/07/29 04:40

TN8001

総合スコア9898

Base

2021/09/13 03:10

なるほど、その操作パネルも良いですね！！隠れた状態でも再生位置がわかるようになっていると、きっと使いやすいですよね。自分のプレイヤーにも、その考え方を反映させたいです。ご回答、ありがとうございます。

行動規範の内容に同意します

ツールバーを使う事で、対応ができそうです。
もし他のアイディアもあれば、記載いただけたら嬉しいです。

XAML
1        <DockPanel>
2            <ToolBar DockPanel.Dock="Bottom" Visibility="Visible" ToolBarTray.IsLocked="True" ToolBar.OverflowMode="Never" Loaded="ToolBar_Loaded">
3                <Button Content="▶" Width="20" Height="20"/>
4                <Button Content="■" Width="20" Height="20"/>
5            </ToolBar>
6            <MediaElement x:Name="MediaE" DockPanel.Dock="Top" MinWidth="800"/>
7        </DockPanel>

ツールバーのトグルボタンの設定(右側の▼ボタンを消す)

C#
1        private void ToolBar_Loaded(object sender, RoutedEventArgs e)
2        {
3            ToolBar toolBar = sender as ToolBar;
4            var overflowGrid = toolBar.Template.FindName("OverflowGrid", toolBar) as FrameworkElement;
5            if(overflowGrid != null)
6            {
7                overflowGrid.Visibility = Visibility.Collapsed;
8            }
9
10            var mainPanelBorder = toolBar.Template.FindName("MainPanelBorder", toolBar) as FrameworkElement;
11            if(mainPanelBorder != null)
12            {
13                mainPanelBorder.Margin = new Thickness();
14            }
15        }