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

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

ただいまの
回答率

89.51%

Xamarin FormsでWindows用のMenuBarを表示したい+ソリューションエクスプローラーの関係性について

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 141

as00000

score 5

前提・実現したいこと

XamarinでWindows10用のデスクトップアプリを作成したいと思っています。

昔からあるWindowsソフトの様にMenuBarを
イメージ説明
配置したかったのですが、仕組みが分からず上手く行きません。

1・Menuはどの様にしたら表示方法出来ますか?
2・Xamarinを始めたばかりなので、基本から理解できていません
ソリューションエクスプローラーの各フォルダの関係性についても
説明や参考URLなどを頂けるとありがたいです。

試したこと

イメージ説明
自分なりに調べた所では、1の部分が全プラットフォーム共通の画面xamlで
2がUWP(私が作成したいWindowsアプリ)専用の画面xamlの様でした。

MenuBarは1の共通部分には存在しない様だったので
共通部分のレイアウトは1に記述し、プラットフォーム特有のレイアウトは
各プラットフォーム毎に記述する事で、デバッグ時の対象に合わせて
レイアウトが混合され、表示されるのでは?と考え
2にメニュー部分だけを記述してみましたが、上手く行きません

該当のソースコード

【1に記述した内容】

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="PlaceTheProcessingData.MainPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">


    <ContentPage.Resources>
        <ResourceDictionary Source="ResourceDictionary_Style.xaml" />
    </ContentPage.Resources>


    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="3*" />
            <RowDefinition Height="4*" />
            <RowDefinition Height="1*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>

        <Frame
            Grid.Row="1"
            BorderColor="White"
            CornerRadius="0"
            Style="{StaticResource mainpage-frame-style}">

            <Label
                x:Name="TextBlock_Project_Code"
                Grid.Row="1"
                HorizontalTextAlignment="Start"
                Text="コード"
                VerticalTextAlignment="Center" />
        </Frame>


        <Frame
            Grid.Row="1"
            Grid.Column="1"
            Grid.ColumnSpan="3"
            CornerRadius="0"
            Style="{StaticResource mainpage-frame-style}">
            <Entry
                x:Name="TextBox_Project_Code"
                HorizontalTextAlignment="Start"
                Placeholder="コード(数値)を入力"
                VerticalTextAlignment="Center" />
        </Frame>


        <Frame
            Grid.Row="2"
            Grid.Column="0"
            BorderColor="White"
            CornerRadius="0"
            Style="{StaticResource mainpage-frame-style}">
            <Label
                x:Name="TextBlock_Project_Name"
                HorizontalTextAlignment="Start"
                Text="名前"
                VerticalTextAlignment="Center" />
        </Frame>
        <Frame
            Grid.Row="2"
            Grid.Column="1"
            Grid.ColumnSpan="3"
            CornerRadius="0"
            Style="{StaticResource mainpage-frame-style}">
            <Entry
                x:Name="TextBox_Project_Name"
                HorizontalTextAlignment="Start"
                Placeholder="名前を入力"
                VerticalTextAlignment="Center" />

        </Frame>


        <CheckBox
            x:Name="CheckBox_Done"
            Grid.Row="3"
            Grid.Column="0" />

        <Button
            x:Name="Button_ClearProjectInfo"
            Grid.Row="3"
            Grid.Column="1"
            Text="情報クリア" />
        <Button
            x:Name="Button_RefreshDataGrid"
            Grid.Row="3"
            Grid.Column="2"
            Text="最新の情報に更新" />
        <Button
            x:Name="Button_ExecutePlace"
            Grid.Row="3"
            Grid.Column="4"
            Text="一括実行" />

    </Grid>

</ContentPage>

【2に記述した内容】←VisualStudioのデザイン画面ではメニューが表示されています

<forms:WindowsPage
    x:Class="PlaceTheProcessingData.UWP.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Custom="using:Microsoft.UI.Xaml.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:forms="using:Xamarin.Forms.Platform.UWP"
    xmlns:local="using:PlaceTheProcessingData.UWP"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <MenuBar
            Margin="0,0,0,0"
            HorizontalAlignment="Left"
            VerticalAlignment="Top">
            <MenuBarItem Title="menu1">
                <MenuFlyoutItem Text="menu1-1" />
                <MenuFlyoutItem Text="menu1-2" />
                <MenuFlyoutItem Text="menu1-3" />

            </MenuBarItem>

            <MenuBarItem Title="menu2">
                <MenuFlyoutSubItem Text="menu2-1">
                    <MenuFlyoutItem Text="menu2-1-1" />
                    <MenuFlyoutItem Text="menu2-1-2" />
                    <MenuFlyoutItem Text="menu2-1-3" />
                </MenuFlyoutSubItem>
            </MenuBarItem>

            <MenuBarItem Title="menu3">
                <MenuFlyoutItem Text="menu3-1" />
            </MenuBarItem>
        </MenuBar>

    </Grid>
</forms:WindowsPage>

結果

エラーは出ませんが、実行時に思い通りにメニューが表示されません
イメージ説明

補足情報(FW/ツールのバージョンなど)

Microsoft Visual Studio Community 2019
Version 16.4.5
VisualStudio.16.Release/16.4.5+29806.167
Microsoft .NET Framework
Version 4.8.03752

インストールされているバージョン:Community

Visual C++ 2019   00435-60000-00000-AA788
Microsoft Visual C++ 2019

ASP.NET and Web Tools 2019   16.4.460.23317
ASP.NET and Web Tools 2019

ASP.NET Web Frameworks and Tools 2019   16.4.460.23317
詳細については、https://www.asp.net/ をご覧ください

Azure App Service Tools v3.0.0   16.4.460.23317
Azure App Service Tools v3.0.0

Azure Functions and Web Jobs Tools   16.4.460.23317
Azure Functions and Web Jobs Tools

C# ツール   3.4.1-beta4-19614-01+165046097562cfe65b09c2e9a9d8f7cd88526f2c
IDE で使用する C# コンポーネント。プロジェクトの種類や設定に応じて、異なるバージョンのコンパイラを使用できます。

Common Azure Tools   1.10
Azure Mobile Services および Microsoft Azure Tools で使用する共通サービスを提供します。

Extensibility Message Bus   1.2.0 (d16-2@8b56e20)
Provides common messaging-based MEF services for loosely coupled Visual Studio extension components communication and integration.

F# 4.6 用 Visual F# Tools 10.4   16.4.0-beta.19556.5+e7597deb7042710a7142bdccabd6f92b0840d354
F# 4.6 用 Microsoft Visual F# Tools 10.4

IntelliCode 拡張機能   1.0
IntelliCode Visual Studio 拡張機能の詳細情報

Microsoft Azure Tools   2.9
Microsoft Azure Tools for Microsoft Visual Studio 2019 - v2.9.21016.1

Microsoft Continuous Delivery Tools for Visual Studio   0.4
Visual Studio IDE 内からの Azure DevOps パイプラインの構成を簡略化しています。

Microsoft JVM Debugger   1.0
Provides support for connecting the Visual Studio debugger to JDWP compatible Java Virtual Machines

Microsoft MI-Based Debugger   1.0
Provides support for connecting Visual Studio to MI compatible debuggers

Microsoft Visual C++ ウィザード   1.0
Microsoft Visual C++ ウィザード

Microsoft Visual Studio Tools for Containers   1.1
ターゲット環境で ASP.NET Core アプリケーションを開発、実行、検証します。F5 キーを押してコンテナーで直接アプリケーションをデバッグ実行するか、Ctrl + F5 キーを押してコンテナーをリビルドせずにアプリを編集して更新します。

Microsoft Visual Studio VC パッケージ   1.0
Microsoft Visual Studio VC パッケージ

Mono Debugging for Visual Studio   16.5.24 (1fafd7e)
Support for debugging Mono processes with Visual Studio.

NuGet パッケージ マネージャー   5.4.0
Visual Studio 内の NuGet パッケージ マネージャー。NuGet の詳細については、https://docs.nuget.org/ にアクセスしてください

PHP Tools for Visual Studio   1.32.11706.2019
PHP Tools extend Visual Studio with a set of features to build PHP applications more efficiently. It makes code more readable, easier to navigate, and clean.

ProjectServicesPackage Extension   1.0
ProjectServicesPackage Visual Studio Extension Detailed Info

SQL Server Data Tools   16.0.62002.03150
Microsoft SQL Server Data Tools

StylerPackage Extension   1.0
StylerPackage Visual Stuido Extension Detailed Info

VisualStudio.DeviceLog   1.0
パッケージに関する情報

VisualStudio.Foo   1.0
Information about my package

VisualStudio.Mac   1.0
Mac Extension for Visual Studio

Xamarin   16.4.000.311 (d16-4@ddfd842)
Xamarin.iOS と Xamarin.Android の開発を有効にする Visual Studio 拡張機能

Xamarin Designer   16.4.0.475 (remotes/origin/d16-4@ac250f5aa)
Visual Studio で Xamarin Designer ツールを有効にするための Visual Studio 拡張機能。

Xamarin Templates   16.4.25 (579ee62)
Templates for building iOS, Android, and Windows apps with Xamarin and Xamarin.Forms.

Xamarin.Android SDK   10.1.4.0 (d16-4/e44d1ae)
Xamarin.Android Reference Assemblies and MSBuild support.
Mono: fd9f379
Java.Interop: xamarin/java.interop/d16-4@c4e569f
ProGuard: xamarin/proguard/master@905836d
SQLite: xamarin/sqlite/3.28.0@46204c4
Xamarin.Android Tools: xamarin/xamarin-android-tools/d16-5@9f4ed4b

Xamarin.iOS and Xamarin.Mac SDK   13.10.0.17 (5f802ef)
Xamarin.iOS and Xamarin.Mac Reference Assemblies and MSBuild support.

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

UWP 側に記述するには、これがまっとうなやり方かどうか分かりませんが、TopAppBar の中に入れれば表示されるようです。

<forms:WindowsPage
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    ...>
    <forms:WindowsPage.TopAppBar>
        <AppBar>
            <muxc:MenuBar>
                <muxc:MenuBarItem Title="menu1">
                    <MenuFlyoutItem Text="menu1-1" />
                    <MenuFlyoutItem Text="menu1-2" />
                    <MenuFlyoutItem Text="menu1-3" />
                </muxc:MenuBarItem>
            </muxc:MenuBar>
        </AppBar>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/10 15:40

    ご回答ありがとうございます。
    提示頂いた記述で、思い通りの表示が出来ました。
    但し、「まっとうなやり方かどうか分かりませんが」と言う事なので
    上の回答で提示して頂いた「ToolbarItem」の使用も含め
    もっとUWPらしい表示方法が無いか?などを、もう少し調べてみたいと思います。
    とりあえず、「共通部分のレイアウト と プラットフォーム特有のレイアウト」の
    関係性については、思っていた通りだった様なので一つ謎が解けてとても助かりました。
    ありがとうございました。

    キャンセル

0

Xamarin.Forms で用意されている UI の中では ToolbarItem が近いと思います。ドキュメント や サンプル を参考にしてみてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 89.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • C#に関する質問
  • Xamarin FormsでWindows用のMenuBarを表示したい+ソリューションエクスプローラーの関係性について