List TitleBar

Title Bar の設定と MessageDialog の表示。

前田稔の超初心者のプログラム入門

プログラムの説明

  1. Frame を設定して Title Bar のアプリケーションを作成します。
    1. Scenario1 では MyTitleBar を設定してテキストを表示します。
    2. Scenario2 では MessageDialog に続いて現在時刻を TitleBar に表示します。
    3. Scenario3 では MessageDialog に続いて OutputDebugString() で時間を置いて現在時刻を印字します。
      MessageDialog が終了する前に OutputDebugString() が実行されることを確認して下さい。
    4. Scenario4 では MessageDialog の終了を待って OutputDebugString() で現在時刻を印字します。
      MessageDialog の時刻と OutputDebugString() の時刻を比べてみて下さい。
  2. Visual Studio で UWP(Universal Windows Platform) のプロジェクトを作成します。
    プロジェクトの作成は XAML で図形を描画 を参照して下さい。
    class MainPage の設定(修正)です。
    1. MainPage.xaml を編集して ListView と Frame を貼り付けます。
          <Grid>
              <ListView x:Name="listView" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10,0,0"
                  Height="240" Width="200" SelectionChanged="PageChange" IsItemClickEnabled="True"/>
              <Frame x:Name="frame" Content="Frame" HorizontalAlignment="Left" Margin="0,200,0,0"
                  VerticalAlignment="Top" Height="420" Width="600"/>
          </Grid>
      
    2. MainPage.xaml.h を編集して PageChange() 関数を定義します。
          private:
              void PageChange(Platform::Object^ sender, Windows::UI::Xaml::Controls::SelectionChangedEventArgs^ e);
      
    3. MainPage.xaml.cpp の Constructor で ListView と naviname[] 配列に Scenario を登録します。
      Platform::Array<Windows::UI::Xaml::Interop::TypeName>^ naviname = ref new Array<Windows::UI::Xaml::Interop::TypeName>(4);
      
      MainPage::MainPage()
      {
          InitializeComponent();
          listView->Items->Append("(1) Scenario1");
          listView->Items->Append("(2) Scenario2");
          listView->Items->Append("(3) Scenario3");
          listView->Items->Append("(4) Scenario4");
          naviname[0].Name = ref new String(L"App1.Scenario1");
          naviname[0].Kind = Windows::UI::Xaml::Interop::TypeKind::Custom;
          naviname[1].Name = ref new String(L"App1.Scenario2");
          naviname[1].Kind = Windows::UI::Xaml::Interop::TypeKind::Custom;
          naviname[2].Name = ref new String(L"App1.Scenario3");
          naviname[2].Kind = Windows::UI::Xaml::Interop::TypeKind::Custom;
          naviname[3].Name = ref new String(L"App1.Scenario4");
          naviname[3].Kind = Windows::UI::Xaml::Interop::TypeKind::Custom;
      }
      
    4. MainPage.xaml.cpp に PageChange() をコーディングします。
      Scenario_No は ListView のアイテムを示す Index(0~3)です。
      frame は MainPage.xaml に張り付けた Frame の名前(x:Name="frame")です。
      void App1::MainPage::PageChange(Platform::Object^ sender, Windows::UI::Xaml::Controls::SelectionChangedEventArgs^ e)
      {
          int Scenario_No = listView->SelectedIndex;
          frame->Navigate(naviname[Scenario_No], this);
      }
      
  3. 現在時刻を取得する Class TimeClass のソースコードです。
    Scenario2 ~ Scenario4 で TimeClass を使用します。
    1. TimeClass.h で GetTime() を定義します。
      // TimeClass  Header File
      #pragma once
      namespace App1
      {   ref class TimeClass
          {
            public:
              Platform::String^ GetTime();
          };
      }
      
    2. TimeClass.cpp で GetTime() をコーディングします。
      // TimeClass  Program File
      #include "pch.h"
      #include "TimeClass.h"
      
      namespace App1
      {   Platform::String^ App1::TimeClass::GetTime()
          {
              Windows::Globalization::Calendar^ cal = ref new Windows::Globalization::Calendar();
              auto longTime = ref new Windows::Globalization::DateTimeFormatting::DateTimeFormatter("longtime");
              Windows::Foundation::DateTime time = cal->GetDateTime();
              Platform::String^ result = longTime->Format(time);
              return result;
          }
      }
      
  4. class Scenario1 のソースコードです。
    Scenario2, Scenario3, Scenario4 も同じ要領なので、これを基準にして下さい。
    1. Scenario1.xaml を編集して MyTitleBar を設定します。
      MyTitleBar の BorderBrush を "Black" に、Background を "DarkBlue" に設定します。
      <Page
          x:Class="App1.Scenario1"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:local="using:App1"
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
          mc:Ignorable="d"
          Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
          <Grid>
              <Grid.RowDefinitions>
                  <RowDefinition Height="30"/>
                  <RowDefinition/>
              </Grid.RowDefinitions>
              <Border x:Name="TitleBar" BorderBrush="Black" Background="DarkBlue" BorderThickness="1">
                  <TextBlock x:Name="TitleName" Foreground="White" />
              </Border>
          </Grid>
      </Page>
      
    2. Scenario1.xaml.h のソースコードですが、基本的に修正は不要です。
      #pragma once
      #include "Scenario1.g.h"
      
      namespace App1
      {
          [Windows::Foundation::Metadata::WebHostHidden]
          public ref class Scenario1 sealed
          {
          public:
              Scenario1();
          };
      }
      
    3. Scenario1.xaml.cpp のソースコードです。
      Constructor で MyTitleBar に "MyTitle Bar" を表示しています。
      TitleName は Frame に張り付けた TextBlock の名前です。
      #include "pch.h"
      #include "Scenario1.xaml.h"
      
      using namespace App1;
      
      using namespace Platform;
      using namespace Windows::Foundation;
      using namespace Windows::Foundation::Collections;
      using namespace Windows::UI::Xaml;
      using namespace Windows::UI::Xaml::Controls;
      using namespace Windows::UI::Xaml::Controls::Primitives;
      using namespace Windows::UI::Xaml::Data;
      using namespace Windows::UI::Xaml::Input;
      using namespace Windows::UI::Xaml::Media;
      using namespace Windows::UI::Xaml::Navigation;
      
      Scenario1::Scenario1()
      {
          InitializeComponent();
          TitleName->Text = "MyTitle Bar";
      }
      
  5. class Scenario2 のソースコードです。
    Scenario2.xaml と Scenario2.h は Scenario1 に準じます。
    1. Scenario2.xaml.cpp のソースコードです。
      MessageDialog に続いて MyTitleBar に現在時刻を表示します。
      実行順では MessageDialog の次に MyTitleBar に表示しているのですが、どちらも同じ時刻が表示されていることに注目して下さい。
      つまり MessageDialog の終了を待たずに MyTitleBar に時刻が設定されます。
      #include "pch.h"
      #include "Scenario2.xaml.h"
      #include "TimeClass.h"
      
      using namespace App1;
      
      using namespace Platform;
      using namespace Windows::Foundation;
      using namespace Windows::Foundation::Collections;
      using namespace Windows::UI::Xaml;
      using namespace Windows::UI::Xaml::Controls;
      using namespace Windows::UI::Xaml::Controls::Primitives;
      using namespace Windows::UI::Xaml::Data;
      using namespace Windows::UI::Xaml::Input;
      using namespace Windows::UI::Xaml::Media;
      using namespace Windows::UI::Xaml::Navigation;
      
      Scenario2::Scenario2()
      {
          InitializeComponent();
          TimeClass^ cls = ref new TimeClass;
          auto dlg = ref new Windows::UI::Popups::MessageDialog(cls->GetTime(), "Now Time");
          dlg->ShowAsync();
          TitleName->Text = cls->GetTime();
      }
      
  6. class Scenario3 のソースコードです。
    Scenario3.xaml と Scenario3.h は Scenario1 に準じます。
    1. Scenario3.xaml.cpp のソースコードです。
      MessageDialog に続いて MyTitleBar と OutputDebugString で現在時刻を表示します。
      MessageDialog の終了を待たずに MyTitleBar と OutputDebugString が実行されていることを確かめて下さい。
      念のために2秒後に二度目の OutputDebugString を実行してみました。
      #include "pch.h"
      #include "Scenario3.xaml.h"
      #include "TimeClass.h"
      
      using namespace App1;
      
      using namespace Platform;
      using namespace Windows::Foundation;
      using namespace Windows::Foundation::Collections;
      using namespace Windows::UI::Xaml;
      using namespace Windows::UI::Xaml::Controls;
      using namespace Windows::UI::Xaml::Controls::Primitives;
      using namespace Windows::UI::Xaml::Data;
      using namespace Windows::UI::Xaml::Input;
      using namespace Windows::UI::Xaml::Media;
      using namespace Windows::UI::Xaml::Navigation;
      
      Scenario3::Scenario3()
      {
          InitializeComponent();
          TimeClass^ cls = ref new TimeClass;
          auto dlg = ref new Windows::UI::Popups::MessageDialog(cls->GetTime());
          dlg->ShowAsync();
          TitleName->Text = cls->GetTime();
          Platform::String^ str = L"\n★Now Time-1 : " + cls->GetTime();
          OutputDebugString(str->Data());
          Sleep(2000);
          str = L"\n★Now Time-2 : " + cls->GetTime();
          OutputDebugString(str->Data());
      }
      
  7. class Scenario4 のソースコードです。
    Scenario4.h は Scenario1 に準じます。
    1. Scenario4.xaml の MyTitleBar の設定です。
      TitleBar の色を規定値に設定します。
          <Grid>
              <Grid.RowDefinitions>
                  <RowDefinition Height="30"/>
              </Grid.RowDefinitions>
              <Border x:Name="TitleBar" BorderThickness="1">
                  <TextBlock x:Name="TitleName" />
              </Border>
          </Grid>
      
    2. Scenario4.xaml.cpp のソースコードです。
      create_task で MessageDialog を実行して、終了を待って OutputDebugString で現在時刻を表示します。
      MessageDialog と MyTitleBar と OutputDebugString の時刻を確かめて下さい。
      #include "pch.h"
      #include "Scenario4.xaml.h"
      #include "TimeClass.h"
      
      using namespace App1;
      
      using namespace Platform;
      using namespace Windows::Foundation;
      using namespace Windows::Foundation::Collections;
      using namespace Windows::UI::Xaml;
      using namespace Windows::UI::Xaml::Controls;
      using namespace Windows::UI::Xaml::Controls::Primitives;
      using namespace Windows::UI::Xaml::Data;
      using namespace Windows::UI::Xaml::Input;
      using namespace Windows::UI::Xaml::Media;
      using namespace Windows::UI::Xaml::Navigation;
      using namespace concurrency;
      using namespace std;
      
      Scenario4::Scenario4()
      {
          InitializeComponent();
          TimeClass^ cls = ref new TimeClass;
          auto dlg = ref new Windows::UI::Popups::MessageDialog(cls->GetTime());
          //dlg->ShowAsync();
          create_task(dlg->ShowAsync()).then([this](Windows::UI::Popups::IUICommand^ command)
          {
              TimeClass^ cls2 = ref new TimeClass;
              auto dlg = ref new Windows::UI::Popups::MessageDialog(cls2->GetTime());
              OutputDebugString(L"★The dialog has now been closed\n");
              Platform::String^ str = L"\n★Now Time : " + cls2->GetTime();
              OutputDebugString(str->Data());
          });
          TitleName->Text = cls->GetTime();
      }
      

超初心者のプログラム入門(C/C++)