質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Visual Studio

Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Xamarin

Xamarin(ザマリン)は、iPhoneなどのiOSやAndroidで動作し、C# 言語を用いてアプリを開発できるクロスプラットフォーム開発環境です。Xamarin Studioと C# 言語を用いて、 iOS と Android の両方の開発を行うことができます。

Q&A

解決済

2回答

1328閲覧

Xamarin.Forms(Prism) でタブページ内での画面遷移

kmz_kappa

総合スコア35

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Visual Studio

Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Xamarin

Xamarin(ザマリン)は、iPhoneなどのiOSやAndroidで動作し、C# 言語を用いてアプリを開発できるクロスプラットフォーム開発環境です。Xamarin Studioと C# 言語を用いて、 iOS と Android の両方の開発を行うことができます。

0グッド

0クリップ

投稿2017/07/29 04:06

困っていること

Xamarin.Forms(Prism使用)のプロジェクトにて、 TabbedPage の中で画面遷移をする方法がわからず困っています。

構成

以下のようなページ構成になっています。

  • タブページ(TabPage0)には Tab1, Tab2 の2つのタブがあり、選択するとそれぞれ TabPage1, TabPage2が表示される。
  • TabPage1 の中にボタンがあり、これを押すと Tab1 が選択された状態のまま TabPage1 → TabPage1-1 に遷移する

分かりづらいですが、要するにタブを表示したままタブ内で画面遷移をしたい、という要件です。

現状

以下のように書くと、遷移時にタブが消えてしまいます。

cs

1// TabPage1 で遷移ボタンを押した際の処理 2_navigationService.NavigateAsync("NavigationPage/TabPage1-1")

以下のようにしてもタブが表示されなくなってしまいます。

cs

1_navigationService.NavigateAsync("NavigationPage/TabPage0/TabPage1-1")

どのようにしてタブを表示したまま、タブ内での画面遷移を実現することができるのでしょうか。

その他

以下の質問が答えになっているのだと思いますが、各タブに異なるNavigationPageを作成しろ、ということの意味がわかっていません。

c# - Prism Xamarin Forms Tabbed Page Navigation - Stack Overflow

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

TabbedPage(今回の場合、TabPage0ですかね)の中のTabに直接実際のページを埋め込まず、NavigationPageを埋め込んであげたら正しく動作すると思います。(未確認ですが)
まずTabPage0を次のように実装します。

cs

1<?xml version="1.0" encoding="utf-8" ?> 2<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" ...ここは省略> 3 <NavigationPage> 4 <x:Arguments> 5 <views:TabPage1/> 6 </x:Arguments> 7 </NavigationPage> 8 <NavigationPage> 9 <x:Arguments> 10 <views:TabPage2/> 11 </x:Arguments> 12 </NavigationPage> 13</TabbedPage>

このままだと、タブの中にNavigationPageのヘッダーが表示されますが、不要な場合はタブの中身のページ側でNavigationPage.HasNavigationBar="False"を指定することで非表示にできます。
その上で、TapPage1ViewModelなどで

cs

1_navigationService. NavigateAsync("TabPage1-1");

とすれば、目的の動作をするとおもます。
ちょっと今手元で確認できる環境がないので、動かなければ返事ください。
検証できる環境で試してから再回答します。

投稿2017/07/29 04:44

nuits.jp

総合スコア346

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kmz_kappa

2017/07/29 05:10

ありがとうございます。この方法でタブ内の遷移ができるようになりました。 ただ、この場合では画面遷移後の「戻る」の挙動が方法によって異なってしまいます。 OSの「戻るボタン」を押すとTabPage1に戻るのですが、ツールバーの「←」ボタンを押すとTabPage0よりさらに前の画面に戻ってしまいます。 (TabPage0の「←」ボタンなので、そうなる理屈はわかりますが…) ツールバーの「←」ボタンでTabPage1-1からTabPage1に戻りたい場合はどうしたら良いのでしょうか。
kmz_kappa

2017/07/29 18:11

本件、自己解決しました。(課題は残りましたが) TabPage0はツールバーを非表示、それ以外のタブ内のページはツールバーを表示とすることで、 バックキーでもツールバーの「←」ボタンでも画面を1つずつ戻ることができるようになりました。 (課題は、具体的には以下サイトの方法でタブをカスタマイズすると何故かツールバーが表示されなくなってしまうという問題ですが、CustomRendererの問題で元の質問とは関係が無くなってしまうので一旦クローズとします。) http://santea.hateblo.jp/entry/2017/02/21/Xamarin.Forms_%E3%81%AE_%E3%82%BF%E3%83%96%E3%82%92%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F ご回答ありがとうございます。
nuits.jp

2017/07/30 09:10

画像貼り付けたいので別のレスをつけますね
guest

0

こちらで確認したところ、ツールバーと戻るボタン自体は正しく動作しました。
確認したコードは次のリポジトリの
TabbedPageNavigation.sln
にあるので、よかったら参照してみてください。

https://github.com/nuitsjp/PrimerOfPrismForms/tree/master/03.NavigationService

ただし、Androidの場合、タブの上にツールバーが出てしまうので、正直ツールバーは非表示にして、自前で戻る処理を実装したほうがよさそうです。
もっとも、タブを下に表示しようとされている?のであれば、出てもよいのでしょうけれど。
とりあえず上のコードが何かのヒントになるとよいのですが。

イメージ説明

投稿2017/07/30 09:13

nuits.jp

総合スコア346

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kmz_kappa

2017/07/30 21:11

確認しました。ありがとうございます。 やはりタブ内へのNavigationPageの埋め込みとツールバーの表示・非表示の設定がポイントのようですね。 特にこの場合の DEEP LINK の書き方が分からなかったので参考になりました。 やはりタブとツールバーが両方表示されることに違和感がありますよね。タブ内で遷移しているのに、ツールバーがタブの外にある、というところが…逆にしても違和感はあるのでしょうが。 UIについてはともかく、非常に助かりました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問