| ページ一覧 | ブログ | twitter |　 書式 | 書式(表) |

MyMemoWiki

UWP テンプレート

提供: MyMemoWiki
ナビゲーションに移動 検索に移動

UWP テンプレート

Universal Windows Platform | Visual Studio | C Sharp | WPF |

  • 以下のKindle本を参考に自分なりにメモ
  • 非常にわかりやすい上に安い

B015V7Q4WO.09.MZZZZZZZ.jpg link

MVVM プロジェクトの構成

エントリーポイント(App.xaml,App.xaml.cs)

  • App.xaml.cs が重要な起動処理となる

OnLaunchメソッド

protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    Frame rootFrame = Window.Current.Content as Frame;
    // ウィンドウに既にコンテンツが表示されている場合は、アプリケーションの初期化を繰り返さずに、
    // ウィンドウがアクティブであることだけを確認してください
    if (rootFrame == null)
    {
        // ナビゲーション コンテキストとして動作するフレームを作成し、最初のページに移動します
        rootFrame = new Frame();
        rootFrame.NavigationFailed += OnNavigationFailed;
        if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
        {
            //TODO: 以前中断したアプリケーションから状態を読み込みます
        }
        // フレームを現在のウィンドウに配置します
        Window.Current.Content = rootFrame;
    }
    if (rootFrame.Content == null)
    {
        // ナビゲーション スタックが復元されない場合は、最初のページに移動します。
        // このとき、必要な情報をナビゲーション パラメーターとして渡して、新しいページを
        //構成します
        rootFrame.Navigate(typeof(MainPage), e.Arguments);
    }
    // 現在のウィンドウがアクティブであることを確認します
    Window.Current.Activate();
}
  • アプリケーション通常起動時のエントリーポイント
Window.Current.Content
  • メインウィンドウに表示されるコンテンツ
  • Window.Current.Content に Frameが設定されているか確認。されていなければ、Frameを生成し設定する。
Frame.Content
  • Frame.Content をチェックして何もなければ、MainPageに画面遷移


フォルダ構成

  • 以下のフォルダを作成
  1. Commons
  2. Models
  3. ViewModels
  4. Views

MainPage.xaml

  • デフォルトで作成されている MainPage.xaml を削除
  • Views フォルダに、MainPage.xamlを作成(空白のページを追加)

INotifyPropertyChanged

  • MVVMアプリを作成するためには、INotifyPropertyChanged の実装が必須となる。
  • 一般的には、以下のような基本クラスを作成し、実装負荷を下げる。
public class BindableBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual bool SetProperty<T>(ref T field, T value, [CallerMemberName] string propertyName = null)
    {
        if (Equals(field, value))
        {
            return false;
        }
        field = value;
        this.RaisePropertyChanged(propertyName);
        return true;
    }

    protected virtual void RaisePropertyChanged([CallerMemberName] string propertyName = null)
    {
        this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

ICommand

public class RelayCommand : ICommand
{
    private readonly Action _execute;
    private readonly Func<bool> _canexecute;

    public event EventHandler CanExecuteChanged;

    public RelayCommand(Action execute) : this(execute, null)
    {
    }
    
    public RelayCommand(Action execute, Func<bool> canExecute)
    {
        if (execute == null)
        {
            throw new ArgumentNullException("execute");
        }
        _execute = execute;
        _canexecute = canExecute;
    }

    public bool CanExecute(object parameter)
    {
        return (_canexecute == null) ? true : _canexecute();
    }

    public void Execute(object parameter)
    {
        _execute();
    }

    public void RaiseCanExecuteChanged()
    {
        CanExecuteChanged?.Invoke(this, EventArgs.Empty);
    }
}

public class RelayCommand<T> : ICommand
{
    private readonly Action<T> _execute;
    private readonly Func<T, bool> _canExecute;

    public event EventHandler CanExecuteChanged;

    public RelayCommand(Action<T> execute) : this(execute,null)
    {
    }

    public RelayCommand(Action<T> execute, Func<T,bool> canExecute)
    {
        if (execute == null)
        {
            throw new ArgumentNullException("execute");
        }
        _execute = execute;
        _canExecute = canExecute;
    }
    
    public bool CanExecute(object parameter)
    {
        return (_canExecute == null) ? true : _canExecute((T)parameter);
    }

    public void Execute(object parameter)
    {
        _execute((T)parameter);
    }

    public void RaiseCanExecuteChanged()
    {
        CanExecuteChanged?.Invoke(this, EventArgs.Empty);
    }
}

アプリケーション構成

レイアウト

ナビゲーション
レイアウト
既定のコントロール スタイルとテンプレート

SplitView

  • SplitViewコントロールのPaneにメニューを配置し、Content部分にFrameを配置し画面遷移を行う形が一般的

/Views/MainPage.xaml

  • MainPage内のFrameにアクセスする必要があるため、Frameをpublicで公開
<Page
    x:Class="WakeUpOnLan.Views.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WakeUpOnLan.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <SplitView>
            <SplitView.Pane>
                <!-- Menu -->
                <ListView></ListView>
            </SplitView.Pane>
            <!-- Contents -->
            <Frame x:Name="RootRrame" x:FieldModifier="public" />
        </SplitView>
    </Grid>
</Page>

/App.xaml.cs

  • App.OnLaunched()
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
   var mainPage = Window.Current.Content as MainPage;
   
   // ウィンドウに既にコンテンツが表示されている場合は、アプリケーションの初期化を繰り返さずに、
   // ウィンドウがアクティブであることだけを確認してください
   if (mainPage == null)
   {
       // ナビゲーション コンテキストとして動作するフレームを作成し、最初のページに移動します
       mainPage = new MainPage();

       mainPage.RootRrame.NavigationFailed += OnNavigationFailed;

       if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
       {
           //TODO: 以前中断したアプリケーションから状態を読み込みます
       }

       // フレームを現在のウィンドウに配置します
       Window.Current.Content = mainPage;
   }

   if (mainPage.RootRrame.Content == null)
   {
       // TODO:初期画面に遷移
   }
   // 現在のウィンドウがアクティブであることを確認します
   Window.Current.Activate();

}

真っ白い画面が表示されることを確認

1270 uwp mvvm mainpage.jpg


ハンバーガーボタン(/Views/MainPage.xaml)

  • StaticResource から取得できる、SymbolThemeFontFamily の E700に定義されている。
<Page
    x:Class="WakeUpOnLan.Views.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WakeUpOnLan.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal">
            <ToggleButton Content="" 
                          FontFamily="{StaticResource SymbolThemeFontFamily}"
                          IsChecked="{Binding IsPaneOpen,ElementName=SplitView, Mode=TwoWay}"
                          Width="48"
                          Height="40"/>
        </StackPanel>
        <SplitView x:Name="SplitView" Grid.Row="1">
            <SplitView.Pane>
                <!-- Menu -->
                <ListView ItemsSource="{x:Bind ViewModel.HostProfiles}">
                </ListView>
            </SplitView.Pane>
            <!-- Contents -->
            <Frame x:Name="RootRrame" x:FieldModifier="public" />
        </SplitView>
    </Grid>
</Page>

1269 uwp mvvm hambager menu.jpg

{x:Bind} マークアップ拡張
「https://www.typea.info/tips_/index.php?title=UWP_テンプレート&oldid=6724」から取得

© 2006 矢木浩人