List SDK

SDK のサンプルに合わせて List&Frame で Navigate します。

前田稔(Maeda Minoru)の超初心者のプログラム入門

プログラムの説明

  1. Windows10 & VS-2017 で開発、VS-2019 で実行を確認しました。
    Visual Studio を起動して [FILE][New Project] から [空白アプリ(ユニバーサル Windows)] を選びプロジェクトを構築します。
    Microsoft のサンプルに合わせて、プロジェクト名を SDKTemplate とします。
    MainPage.xaml のレイアウトから ListView と Frame を貼り付けて下さい。
    Frame はナビゲーションをサポートするコンテンツコントロールで、ナビゲートするページがこの中に表示されます。
        <Grid>
            <ListView x:Name="listView" HorizontalAlignment="Left" Height="156" Margin="10,10,0,0"
                VerticalAlignment="Top" Width="280" SelectionChanged="ScenarioChanged"/>
            <Frame x:Name="frame" Content="Frame" HorizontalAlignment="Left" Margin="0,171,0,0"
                VerticalAlignment="Top" Height="436" Width="579"/>
        </Grid>
    
  2. プロジェクトに [Add][New Item] から [Blank Page] でシナリオ(Scenario1~Scenario3)を追加します。
    名前空間(namespace) は、プロジェクト名に合わせて SDKTemplate になります。
    Scenario に TextBlock を貼り付けて、カラーでメッセージを印字して下さい。
    プロジェクトの作成とツールの貼り付けは C# Store Application を参照して下さい。
  3. Scenario1.xaml.cs~Scenario3.xaml.cs は、メニューの[プロジェクト][新しい項目の追加]から[XAML][空白のページ]で追加したままです。
    Scenario1.xaml~Scenario3.xaml に TextBlock の定義を追加します。
        <Grid>
            <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="50,39,0,0" Text="Scenaro-1 Red Page"
                TextWrapping="Wrap" VerticalAlignment="Top" Height="36" Width="160" Foreground="#FFF30909"/>
        </Grid>
    
        <Grid>
            <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="50,39,0,0" Text="Scenaro-2 Green Page"
                TextWrapping="Wrap" VerticalAlignment="Top" Height="36" Width="160" Foreground="#FF25A816"/>
        </Grid>
    
        <Grid>
            <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="50,39,0,0" Text="Scenaro-3 Blue Page"
                TextWrapping="Wrap" VerticalAlignment="Top" Height="36" Width="160" Foreground="#FF2616C0"/>
        </Grid>
    
  4. MainPage.xaml.cs の Constructor から ListItemAdd() を呼び出します。
        public MainPage()
        {   this.InitializeComponent();
            ListItemAdd();
        }
    
  5. ListView の稲妻アイコンからイベントハンドラを追加します。
    SelectionChanged に ScenarioChanged とタイプして MainPage.xaml.cs に関数を定義します。
    frame.Navigate で Frame に選択された Scenario を表示します。
        private void ScenarioChanged(object sender, SelectionChangedEventArgs e)
        {
            int Scenario_No = listView.SelectedIndex;
            frame.Navigate(scenarios[Scenario_No].ClassType, "AllGroups");
        }
    
  6. SampleConfiguration.cs を作成してプロジェクトに追加して下さい。
    Scenario を定義して ListItemAdd() 関数で ListView に登録します。
    using System;
    using System.Collections.Generic;
    using Windows.UI.Xaml.Controls;
    
    namespace SDKTemplate
    {
        public class Scenario
        {
            public string Title { get; set; }
            public Type ClassType { get; set; }
            public override string ToString()
            {   return Title;  }
        }
        public partial class MainPage : Page
        {
            List<Scenario> scenarios = new List<Scenario>
            {
                new Scenario() { Title="1. Scenario1", ClassType=typeof(Scenario1) },
                new Scenario() { Title="2. Scenario2", ClassType=typeof(Scenario2) },
                new Scenario() { Title="3. Scenario3", ClassType=typeof(Scenario3) }
            };
            private void ListItemAdd()
            {
                foreach (Scenario s in scenarios)
                {
                    listView.Items.Add(s.Title);
                }
            }
        }
    }
    
  7. ListView の Scenario1~Scenario3 をクリックすると Frame の中に表示されます。
    WPF の Frame サンプルは Wpf Frame Navigate を参照して下さい。

Windows8 & VS-2012 で開発したプロジェクトは SDKTemplate が継承されていました。
新しいバージョンで SDKTemplate.Common.LayoutAwarePage を継承するとエラーになります。
    public sealed partial class MainPage : SDKTemplate.Common.LayoutAwarePage

Windows10 & VS-2017 で開発したプロジェクトは Page が継承されています。
新しいバージョンは、従来の SDKTemplate では無く namespace が SDKTemplate になっているだけのようです。
2019/06 Visual Studio 2019 で VS-2017 のプロジェクトの実行を確認しました。
namespace SDKTemplate
{
    public sealed partial class MainPage : Page

超初心者のプログラム入門(C# Frame Work)