はじめに
#1で(下記)、環境作成とタイトルの見た目を変更した続きから行う。(全3記事を予定)
プロジェクトの作成(#1の続きから)
前回タイトルバーの見た目をWinUIで変更した。
次に、アプリケーションのアイコンを変更する
適当なPng画像を用意(絵が下手なのはさておき🧑🎨)
Package.appxmanifestをダブルクリックで開く、
すべてのビジュアル資産のタブを開き、先ほど用意したPng画像のパスをソースで指定し、生成ボタン押下する。
(既にAssets内に既存でSampleのPng画像が入っているので上書きする)
この状態でDebugする(PackageでDebug)
タイトルバーが下記のようになる
また、OSのタスクバーのAppのアイコンがSampleから設定した画像になる。
Icon
これでタイトルの変更とアプリケーションアイコンの実装完了！
サイドのメニューバーを実装する
今回は、タイマー、Todoリスト、設定、の3画面を想定しているので
プロジェクトを右クリックで「新規の項目」を追加して
WinUIで「ページ(Page)」を選択し、追加する。(画面名は、TimerPage、TaskPage、SettingsPageで追加する)
MainのWindowが親で、先ほど追加したPageを呼び出すイメージになります。
次に、MainのWindowのデザインで
WinUI 3 Galleryより、サイドのメニューバーは NavigationView と メニューアイコンに FontIcon を利用する
MainWindow.xaml
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="32"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid x:Name="AppTitleBar">
<Image Source="Assets/app.png"
HorizontalAlignment="Left"
Width="16" Height="16"
Margin="8,0"/>
<TextBlock x:Name="AppTitleTextBlock" Text="PomodoroApp"
TextWrapping="NoWrap"
Style="{StaticResource CaptionTextBlockStyle}"
VerticalAlignment="Center"
Margin="28,0,0,0"/>
</Grid>
<NavigationView Grid.Row="1" x:Name="navView" PaneDisplayMode="LeftCompact" IsBackButtonVisible="Collapsed" ItemInvoked="navView_ItemInvoked">
<NavigationView.MenuItems>
<NavigationViewItem Content="Timer" Tag="timer">
<NavigationViewItem.Icon>
<FontIcon Glyph="" />
</NavigationViewItem.Icon>
</NavigationViewItem>
<NavigationViewItem Content="Todo" Tag="task">
<NavigationViewItem.Icon>
<FontIcon Glyph="" />
</NavigationViewItem.Icon>
</NavigationViewItem>
</NavigationView.MenuItems>
<NavigationView.FooterMenuItems>
<NavigationViewItem Content="Settings" Tag="settings">
<NavigationViewItem.Icon>
<FontIcon Glyph="" />
</NavigationViewItem.Icon>
</NavigationViewItem>
</NavigationView.FooterMenuItems>
<Frame x:Name="contentFrame"/>
</NavigationView>
</Grid>
CS側で先ほどのPageの画面を呼び出す処理を記述する。
MainWindow.xaml.cs
public MainWindow()
{
this.InitializeComponent();
ExtendsContentIntoTitleBar = true;
SetTitleBar(AppTitleBar);
navView.SelectedItem = navView.MenuItems[0];
navView.IsSettingsVisible = false;
NavigateToPage("timer");
}
private void navView_ItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)
{
string tag = args.InvokedItemContainer.Tag.ToString()!;
NavigateToPage(tag);
}
private void NavigateToPage(string tag)
{
Type pageType = null;
switch (tag)
{
case "timer":
pageType = typeof(TimerPage);
break;
case "task":
pageType = typeof(TaskPage);
break;
case "settings":
pageType = typeof(SettingsPage);
break;
}
if (pageType != null && contentFrame.CurrentSourcePageType != pageType)
{
contentFrame.Navigate(pageType);
}
}
下記のようになる
これでサイドのメニューバーの実装完了！
設定画面を実装する
サウンドのOnOff機能、GihubへのLink、コピーライトを画面に追加する
サウンドのOnOff機能はトグルを使用する
SettingsPage.xaml
<Grid>
<StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
<ToggleSwitch x:Name="SoundToggleSwitch" HorizontalAlignment="Center" OnContent="Audio On" OffContent="Audio Off" Toggled="Sound_Toggled" />
<HyperlinkButton HorizontalAlignment="Center" Margin="0,60,0,0" Content="shisojuice on Github" NavigateUri="https://github.com/shisojuice" />
<HyperlinkButton HorizontalAlignment="Center" Content="This app source on Github" NavigateUri="https://github.com/shisojuice" />
<TextBlock Margin="0,10,0,0" TextAlignment="Center"><Bold>PomodoroApp</Bold></TextBlock>
<TextBlock TextAlignment="Center"> © 2024 shisojuice.All rights reserved.</TextBlock>
</StackPanel>
</Grid>
このサウンド設定はアプリケーション全体で適用したいのでApp.xaml.csに下記コードを追記
App.xaml.cs
public static ApplicationDataContainer LocalSettings { get; } = ApplicationData.Current.LocalSettings;
public const string SoundSettingKey = "SoundSetting";
/// <summary>
/// Initializes the singleton application object. This is the first line of authored code
/// executed, and as such is the logical equivalent of main() or WinMain().
/// </summary>
public App()
{
this.InitializeComponent();
}
/// <summary>
/// Invoked when the application is launched.
/// </summary>
/// <param name="args">Details about the launch request and process.</param>
protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
{
m_window = new MainWindow();
m_window.Activate();
if (LocalSettings.Values.ContainsKey(SoundSettingKey))
{
ElementSoundPlayer.State = (bool)LocalSettings.Values[SoundSettingKey] ? ElementSoundPlayerState.On : ElementSoundPlayerState.Off;
}
}
この設定画面を開いたときに、現在のサウンド設定と一致するようにトグルの初期状態を設定する。
また、トグルを変更した際に、
トグルのOnOffの結果に合わせてアプリケーションのサウンド設定を変化させるイベントを実装する
SettingsPage.xaml.cs
public SettingsPage()
{
this.InitializeComponent();
SoundToggleSwitch.IsOn = ElementSoundPlayer.State == ElementSoundPlayerState.On ? true : false;
}
private void Sound_Toggled(object sender, RoutedEventArgs e)
{
var toggleSwitch = sender as ToggleSwitch;
if (toggleSwitch != null)
{
ElementSoundPlayer.State = toggleSwitch.IsOn ? ElementSoundPlayerState.On : ElementSoundPlayerState.Off;
App.LocalSettings.Values[App.SoundSettingKey] = toggleSwitch.IsOn;
}
}
まとめ
今回は、アプリケーションアイコンの設定、設定画面実装まで行った。
次回で完成予定！ラストスパート頑張ります！
次回につづく。