WPFとNAudioで音楽プレイヤーを作る～第4回：画面全体を大まかに作る～
第4回：画面全体を大まかに作る
今回のポイント
ModernWpfを導入する
Gridで分割された区画の適切な部分に配置する
完成形
MainWindow.xamlの完成形を先に載せておきます。
MainWindow.xaml
<Window x:Class="MusicPlayer.MVVM.View.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:MusicPlayer"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800"
xmlns:viewmodels="clr-namespace:MusicPlayer.MVVM.ViewModel"
xmlns:ui="http://schemas.modernwpf.com/2019"
ui:WindowHelper.UseModernWindowStyle="True"
d:DataContext="{d:DesignInstance Type=viewmodels:MainWindowViewModel}"
Background="#262626"
Foreground="White"
MinHeight="600"
MinWidth="950"
>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="80"/>
</Grid.RowDefinitions>
<Button
Grid.Column="0" Grid.Row="1"
Width="30" Height="30"
Content="▶"
Command="{Binding OnPlayButtonClickCommand}"
/>
<ui:NavigationView Background="#131313"
Grid.Column="0" Grid.Row="0"
x:Name="NaviView"
IsBackButtonVisible="Collapsed"
IsSettingsVisible="False"
IsTitleBarAutoPaddingEnabled="False"
IsPaneToggleButtonVisible="False"
PaneDisplayMode="Left"
Width="150"
>
<ui:NavigationView.MenuItems>
<ui:NavigationViewItem
Content="Music"
Icon="Audio"
IsSelected="True" />
</ui:NavigationView.MenuItems>
</ui:NavigationView>
<Grid Background="#131313"
Grid.Column="1" Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0"
Text="Music"
Margin="30,30,30,0"
FontWeight="Bold"
FontSize="24" />
<ListView Grid.Row="1"
Margin="30,0,0,0"
x:Name="MusicListView"
SelectionMode="Single"
>
<ListView.View>
<GridView ScrollViewer.VerticalScrollBarVisibility="Auto">
<GridViewColumn Header="Title"/>
<GridViewColumn Header="Artist"/>
<GridViewColumn Header="Album"/>
<GridViewColumn Header="Track"/>
<GridViewColumn Header="Time"/>
</GridView>
</ListView.View>
</ListView>
</Grid>
</Grid>
</Window>
ModernWpfの導入
今回は画面を作成するのですが、デフォルトだと見た目が微妙なので ModernWpfというUIフレームワークを導入します。
まずはプロジェクト > NuGetパッケージの管理からModernWpfUIと検索してインストールします。
次にApp.xaml全体を以下の通りに記述します。
Applicationタグ内にxmlns:ui="http://schemas.modernwpf.com/2019"を記述してください。
ui:ThemeResourcesとui:XamlControlsResourcesを設定することでModernWpfが適用されるようになります。
App.xaml
<Application x:Class="MusicPlayer.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MusicPlayer"
xmlns:ui="http://schemas.modernwpf.com/2019"
StartupUri="MVVM\View\MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ui:ThemeResources />
<ui:XamlControlsResources />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>画面全体を4分割する
まずMainWindow.xamlのWindowタグ内に以下の記述を追加します。
1 xmlns:ui="http://schemas.modernwpf.com/2019"
2 ui:WindowHelper.UseModernWindowStyle="True"
3 d:DataContext="{d:DesignInstance Type=viewmodels:MainWindowViewModel}"
4 Background="#262626"
5 Foreground="White"
6 MinHeight="600"
7 MinWidth="950"1,2行目をxamlに記述することでModernWpfUIが適用されます。
3行目ではデザインプレビューで使用する設定を行っています。
それ以降の行では背景色の変更、最小ウィンドウサイズの設定などを行っています。
それではGridで画面全体を分割します。
ColumnDefinitionsとRowDefinitionsで行と列を定義しています。
今回は4分割するのでColumnDefitionとRowDefinitionを2つずつ定義しています。
幅や高さの設定も行えます。Width="150"のように長さを直接指定するか、Width="2*"のように割合で指定することもできます。
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="80"/>
</Grid.RowDefinitions>
<!-- 以下省略 -->
</Grid>再生ボタンを配置する
次は再生ボタンを左下の区画に配置します。
Grid.Column="0" Grid.Row="1"でGridで分割されたうちのどの区画に配置するかを設定しています。
また、ボタンの高さと幅、ボタン上に表示するテキスト、押されたときのコマンドを設定しています。
<Grid>
<!-- 省略 -->
<Button
Grid.Column="0" Grid.Row="1"
Width="30" Height="30"
Content="▶"
Command="{Binding OnPlayButtonClickCommand}"
/>
</Grid>サイドメニューを設定する
分割した左上の区画をサイドメニューにしようと思います。
今回のサンプルではページの切り替え等は実装しないのでメニューは一つだけです。
ui:から始まるタグはModerWpfのコントロールを利用しています。
<ui:NavigationViewItem />内のIcon=""では様々なアイコンを設定できます。
何が設定できるかはこちらを確認してください。
<Grid>
<!-- 省略 -->
<ui:NavigationView Background="#131313"
Grid.Column="0" Grid.Row="0"
x:Name="NaviView"
IsBackButtonVisible="Collapsed"
IsSettingsVisible="False"
IsTitleBarAutoPaddingEnabled="False"
IsPaneToggleButtonVisible="False"
PaneDisplayMode="Left"
Width="150"
>
<ui:NavigationView.MenuItems>
<ui:NavigationViewItem
Content="Music"
Icon="Audio"
IsSelected="True" />
</ui:NavigationView.MenuItems>
</ui:NavigationView>
</Grid>楽曲の一覧を表示するListViewを配置する
今後曲の一覧を表示するために使うListViewを用意しておきます。
先程画面全体を分割するのに使用したGridの右上の区画を更に2行に分割しています。
Gridの1行目にはヘッダー表示用としてテキストボックスを配置しています。
2行目に配置したListViewはGridViewColumnで5列に分割しました。
<Grid>
<!-- 省略 -->
<Grid Background="#131313"
Grid.Column="1" Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0"
Text="Music"
Margin="30,30,30,0"
FontWeight="Bold"
FontSize="24" />
<ListView Grid.Row="1"
Margin="30,0,0,0"
x:Name="MusicList"
SelectionMode="Single"
>
<ListView.View>
<GridView ScrollViewer.VerticalScrollBarVisibility="Auto">
<GridViewColumn Header="Title"/>
<GridViewColumn Header="Artist"/>
<GridViewColumn Header="Album"/>
<GridViewColumn Header="Track"/>
<GridViewColumn Header="Time"/>
</GridView>
</ListView.View>
</ListView>
</Grid>
</Grid>右下の区画はまた今度作ります。
参考
https://marunaka-blog.com/wpf-modernwpfui-modern-style/7074/#index_id2
https://github.com/Kinnara/ModernWpf/wiki
https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.symbol?view=winrt-22000