0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

UWP タイトルバーにコントロール配置する方法

Last updated at Posted at 2020-10-30

###タイトルバーにコントロールを表示する。
モダンなデスクトップアプリはタイトルバーにコントロールを配置する傾向がある。VisualStusio2019もタイトルバーに表示している。
image.png
下記のコードで、タイトルバーへコントロールを配置可能になる。

MainPage.xaml.cs
public MainPage()
{
	this.InitializeComponent();
	
	CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
	ApplicationView.GetForCurrentView().TitleBar.ButtonBackgroundColor = Windows.UI.Colors.Transparent;
	ApplicationView.GetForCurrentView().TitleBar.ButtonInactiveBackgroundColor = Windows.UI.Colors.Transparent;
	Window.Current.SetTitleBar(TitleBar);

	CoreApplication.GetCurrentView().TitleBar.LayoutMetricsChanged += TitleBar_LayoutMetricsChanged;
}

サンプルコード
image.png

###CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
コントロールの配置タイトルバーまで広げる。

###ApplicationView.GetForCurrentView().TitleBar.ButtonBackgroundColor = Windows.UI.Colors.Transparent;
ウィンドウの右上のボタンの背景色を設定する。(ここでは透明)

###ApplicationView.GetForCurrentView().TitleBar.ButtonInactiveBackgroundColor = Windows.UI.Colors.Transparent;
ウィンドウの右上のボタンの非アクティブ時の背景色を設定する。(ここでは透明)
これがないとアプリが非アクティブ状態のときこのように背景色を透明にしたつもりが、透明でなくなる。
image.png

###Window.Current.SetTitleBar(TitleBar);
タイトルバーにフォーカスを受け取るコントロールがあるときは別途自作した任意のコントロールをタイトルバーに設定する必要がある。

###CoreApplication.GetCurrentView().TitleBar.LayoutMetricsChanged
ウィンドウが表示されるときなどに発生するイベント。
タイトルバーのサイズなどの情報を持っている。
下記のようにイベントハンドラーを設定してサイズ情報を受け取る。

MainPage.xaml.cs
private void TitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
	RightText.Margin = new Thickness(0, 0, sender.SystemOverlayRightInset, 0);
}

位置を調整しないと下の画像のように文字が閉じるボタンと被ったりする。
image.png

通常のデスクトップなどではあんまり感じないけど、タブレットなんかを考えるとタイトルバーがないほうが便利なのかも

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?