Windows系のあれこれ

港区の SIer で Windows 系の開発に従事している SE みたいな人です。Xamarin 中心です。

Window.Current.Bounds.Height の罠

Mobileで実行しているUWPで画面いっぱいにポップアップを出す際の注意点です。


最初に結論から言うと、

  • ポップアップを開く前にcs上でポップアップのサイズを動的に指定して画面いっぱいにする
  • Window.Current.Bounds は危険
  • Mobileは通知領域やOSボタンを考慮しましょう(GetForCurrentView().VisibleBoundsを使えば大丈夫!)

です。

今回使用したサンプルアプリは一番下にまるまる載せているので、ご参考までに。

サンプルアプリの概要

  • 画面上にデバイスファミリー、Window.Current.Bounds(画面サイズ)、ApplicationView.GetForCurrentView().VisibleBoundsのサイズを表示
  • アプリをフルスクリーンモードへの切り替え
  • Window.Current.Boundsのサイズと同じサイズのポップアップを表示する
  • ページの一番上の階層のGridのサイズと同じサイズのポップアップを表示する

では実際に見てみましょう。

PCでサイズの確認

サンプルアプリを動かすと以下のようになります。
タイトルバーやツールバーの有無が変わるので、それぞれのモードで数字は違いますが、
Window.Current.BoundsとVisibleBoundsは両方同じ数字になってますね。

Windowモード時

f:id:ShunsukeKawai:20160217192143p:plain

フルスクリーンモード時

f:id:ShunsukeKawai:20160217192156p:plain

PCでPopup表示

Window.Current.Boundsを設定する方法

ポップアップを開く前にWindow.Current.Boundsをポップアップに設定して表示します。
ポップアップにはテキストを並べてスクロールするようになっています。
「1」を並べて、一番下だけ「2」になっています。

grdPop.Height = Window.Current.Bounds.Height;
grdPop.Width = Window.Current.Bounds.Width;

popTest.IsOpen = true;

f:id:ShunsukeKawai:20160217192232p:plainf:id:ShunsukeKawai:20160217192240p:plain
当然ながら一番下までスクロールできますね。

VisibleBoundsを設定する方法

最初に確認した通り、数字が一緒なので、同じ結果になります。
同じなので、画像は割愛します。

var view = ApplicationView.GetForCurrentView();
grdPop.Height = view.VisibleBounds.Height;
grdPop.Width = view.VisibleBounds.Width;

popTest.IsOpen = true;

それでは問題のMobileです。

Mobileで確認

同じアプリをNuAns NEOで表示してみます。
フルスクリーンモードでは同じですが、Windowモードの場合、
Window.Current.Bounds.HeightとVisibleBounds.Heightの数字が異なっています。
そうです。
こいつが諸悪の根源です。

Windowモード時

f:id:ShunsukeKawai:20160217203950p:plain 

フルスクリーンモード時

f:id:ShunsukeKawai:20160217203957p:plain

Window.Current.Boundsだと、Mobileの通知領域やOS標準のボタン領域も含めた単純な画面サイズが取得されてしまいます。
ApplicationView.GetForCurrentView().VisibleBounds だと、現在のビューに表示されている領域のサイズが取得されます。
そのため、このような差が生まれてしまうのですね。

では続いてポップアップを表示してみましょう。

MobileでPopup表示

Window.Current.Boundsを設定する方法

最終行である「2」がボタン領域の下に隠れてしまっています。
f:id:ShunsukeKawai:20160217210616g:plain

VisibleBoundsを設定する方法

正常にすべて表示されます。
f:id:ShunsukeKawai:20160217210723g:plain

まとめ

PCでは同じだけど、Mobileだと異なるっていうのがいやらしいですね。
ウチのアプリの場合、PC版を作って後からMobileに対応ってパターンがあるので、ハマりがちです。
全部見直さないと。。。。。

ソース

MainPage.xaml.cs

using Windows.System.Profile;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;

namespace WindowSizeTest
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void grdMain_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            //Page_SizeChangeはなぜかMobileのFullスクリーンモードの切り替えだと動いてくれないため、
            //GridのSizeChangeでTextの再設定を行う
            setText();
        }

        private void ToggleButton_Checked(object sender, RoutedEventArgs e)
        {
            changeViewMode(true);
        }

        private void ToggleButton_Unchecked(object sender, RoutedEventArgs e)
        {
            changeViewMode(false);
        }

        private void btnShowPopupWindowBounds_Click(object sender, RoutedEventArgs e)
        {
            grdPop.Height = Window.Current.Bounds.Height;
            grdPop.Width = Window.Current.Bounds.Width;

            popTest.IsOpen = true;
        }
        private void btnShowPopupVisibleBounds_Click(object sender, RoutedEventArgs e)
        {
            var view = ApplicationView.GetForCurrentView();
            grdPop.Height = view.VisibleBounds.Height;
            grdPop.Width = view.VisibleBounds.Width;

            popTest.IsOpen = true;
        }

        private void grdPop_Tapped(object sender, TappedRoutedEventArgs e)
        {
            popTest.IsOpen = false;
        }

        private void changeViewMode(bool isFull)
        {
            var view = ApplicationView.GetForCurrentView();

            if (isFull)
            {
                view.TryEnterFullScreenMode();
            }
            else
            {
                view.ExitFullScreenMode();
            }
        }

        private void setText()
        {
            txtDevice.Text = AnalyticsInfo.VersionInfo.DeviceFamily;
            txtWindowHeight.Text = Window.Current.Bounds.Height.ToString();
            txtWindowWidth.Text = Window.Current.Bounds.Width.ToString();

            var view = ApplicationView.GetForCurrentView();

            txtVisibleBoundsHeight.Text = view.VisibleBounds.Height.ToString();
            txtVisibleBoundsWidth.Text = view.VisibleBounds.Width.ToString();
        }
    }
}


MainPage.xaml

<Page x:Class="WindowSizeTest.MainPage"
      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:local="using:WindowSize"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">

    <Page.Resources>
        <Style TargetType="TextBlock">
            <Setter Property="FontSize" Value="28" />
        </Style>
        <Style x:Key="txtValueStyle" TargetType="TextBlock">
            <Setter Property="FontSize" Value="28" />
            <Setter Property="Foreground" Value="Red" />
        </Style>
        <Style TargetType="Button">
            <Setter Property="Margin" Value="10" />
            <Setter Property="FontSize" Value="28" />
        </Style>
        <Style TargetType="ToggleButton">
            <Setter Property="FontSize" Value="28" />
        </Style>
    </Page.Resources>
    <Grid x:Name="grdMain"
          Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
          SizeChanged="grdMain_SizeChanged">
        <Viewbox VerticalAlignment="Top">
            <Grid x:Name="grdContent">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <StackPanel Margin="10,0">
                    <TextBlock Text="AnalyticsInfo.VersionInfo.DeviceFamily" />
                    <TextBlock Text="Window.Current.Bounds.Height" />
                    <TextBlock Text="Window.Current.Bounds.Width" />
                    <TextBlock Text="GetForCurrentView().VisibleBounds.Height" />
                    <TextBlock Text="GetForCurrentView().VisibleBounds.Width" />
                    <ToggleButton Margin="10"
                                  Checked="ToggleButton_Checked"
                                  Content="FullScreen"
                                  Unchecked="ToggleButton_Unchecked" />
                    <Button x:Name="btnShowPopupWindowBounds"
                            Click="btnShowPopupWindowBounds_Click"
                            Content="ShowPopupWindowBounds" />
                    <Button x:Name="btnShowPopupVisibleBounds"
                            Click="btnShowPopupVisibleBounds_Click"
                            Content="ShowPopupVisibleBounds" />
                </StackPanel>
                <StackPanel Grid.Column="1">
                    <TextBlock x:Name="txtDevice" Style="{StaticResource txtValueStyle}" />
                    <TextBlock x:Name="txtWindowHeight" Style="{StaticResource txtValueStyle}" />
                    <TextBlock x:Name="txtWindowWidth" Style="{StaticResource txtValueStyle}" />
                    <TextBlock x:Name="txtVisibleBoundsHeight" Style="{StaticResource txtValueStyle}" />
                    <TextBlock x:Name="txtVisibleBoundsWidth" Style="{StaticResource txtValueStyle}" />
                </StackPanel>
            </Grid>
        </Viewbox>
        <Popup x:Name="popTest">
            <Grid x:Name="grdPop"
                  Background="AliceBlue"
                  Tapped="grdPop_Tapped">
                <ScrollViewer>
                    <StackPanel>
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="1" />
                        <TextBlock Text="2" />
                    </StackPanel>
                </ScrollViewer>
            </Grid>
        </Popup>
    </Grid>
</Page>