-->

UWP

Twitterのタイムラインみたいなリストを作ってみる。バインディングのあたりはは、[UWP] Hello World的なものに詳しく書いてあるのでこちらも参考にしてくれ。

001

・空白のUWPを新規作成する
・プロジェクトにImagesフォルダを作ってアカウントのアイコンの代わりになるimage.pngを追加する。
・データのクラスを作る。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.UI.Xaml.Media.Imaging;

namespace TestCustomList2
{
    class Article
    {
        public String User { get; set; }
        public String Comment { get; set; }
        public BitmapImage Image { get; set; }

        public Article(BitmapImage image, String user, String comment)
        {
            User = user;
            Comment = comment;
            Image = image;
        }
    }
}

・MVVMのViewModelにあたるクラス(MainPageViewModel)を作る。

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
using Windows.UI.Xaml.Media.Imaging;

namespace TestCustomList2
{
    class MainPageViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public MainPageViewModel()
        {
            list = new ObservableCollection<Article>();

            BitmapImage img = new BitmapImage(new Uri("ms-appx:///Images/image.png"));
            list.Add(new Article(img, "user1", "あいうえお"));
            list.Add(new Article(img, "user1", "あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお"));
        }

        private void NotifyPropertyChanged([CallerMemberName]string propertyName = null)
        {
            var handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        public ObservableCollection<Article> list { get; set; }
    }
}

・画面をデザインする。MainView.xamlを開いてListViewを貼る。
・貼ったListViewを右クリックして、追加テンプレートの編集 - 生成されたアイテムの編集(ItemTemplate) - 空アイテムの作成を選ぶ。

002

・定義先でlistViewを選ぶ。

004

・DataTemplateのGridを2×2にする。
・グリッドの0カラムの0〜1行にImageを追加してとりあえずSourceプロパティでImages/image.pngを選ぶ。ImageのWidthを64にする。Marginを10にする。
・Gridの0カラムのWidthをAuto、0、1ローのHeightをAutoにする。
・ユーザー名を表示するTextBlockを1カラム0ローに追加する。Marginを10にする。フォントサイズを20px、太字にする。
・コメントを表示するTextBlockを1カラム1ローに追加する。Marginを10にする。

005

・一度ビルドしておく。
・View Modelと接続していく。デザイナーでPageを選択して、メニューから書式 - デザイン時のDataContextの設定を選ぶ。表示されるダイアログでDataContextの種類でDesignInstance、TypeでMainPageViewModelを選ぶ。IsDesignTimeCreatableをチェックする。
・ListViewのItemsSourceのデータバインディング作成でlistプロパティと接続する。
・デザイナーで貼り付けているListViewで右クリックして、追加テンプレートの編集 - 生成されたアイテムの編集 - 現在の編集を選ぶ。

006

・貼ってあるImageのSourceをImageと接続する。
・貼ってあるユーザー名のTextBlockのTextをUserと接続する。
・貼ってあるコメントのTextBlockのTextをCommentと接続する。
・MainPageクラスでMainPageViewModelのインスタンスを作成してDataContextに設定する。

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// 空白ページのアイテム テンプレートについては、http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409 を参照してください

namespace TestCustomList2
{
    /// <summary>
    /// それ自体で使用できる空白ページまたはフレーム内に移動できる空白ページ。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        private MainPageViewModel viewModel = new MainPageViewModel();

        public MainPage()
        {
            this.InitializeComponent();

            DataContext = viewModel;
        }
    }
}


このエントリーをはてなブックマークに追加

グリッドは、コントロールを格子状に配置するコントロールだ。

空のUWPプロジェクトを作成する。
こんなMainPage.xamlが作られる。

<Page
    x:Class="TestGrid.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestGrid"
    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>
</Page>

まず、行列を追加する。GridのプロパティでColumnDefinitions、RowDefinitionsで追加する。

001
001

1行目全体にボタン、1列2行〜3行にボタン、2列2行と2列3行にそれぞれボタンをドラッグ&ドロップでおく。

002

xamlのGrid部分はこんなになる。

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Button x:Name="button" Content="Button" HorizontalAlignment="Stretch" Margin="10,10,10,10.333" VerticalAlignment="Stretch" RenderTransformOrigin="0.231,0.451" Grid.ColumnSpan="2"/>
        <Button x:Name="button1" Content="Button" HorizontalAlignment="Stretch" Margin="10,9.667,10,10" Grid.Row="1" VerticalAlignment="Stretch" Grid.RowSpan="2"/>
        <Button x:Name="button2" Content="Button" Grid.Column="1" HorizontalAlignment="Stretch" Margin="10,9.667" Grid.Row="1" VerticalAlignment="Stretch"/>
        <Button x:Name="button3" Content="Button" Grid.Column="1" HorizontalAlignment="Stretch" Margin="10,10.333,10,10" Grid.Row="2" VerticalAlignment="Stretch"/>
    </Grid>


このエントリーをはてなブックマークに追加

イメージを表示する部分は、[UWP] イメージ表示と同じ。ファイルを選択するところはFileOpenPickerを使う。

        private async void button1_Click(object sender, RoutedEventArgs e)
        {
            var picker = new FileOpenPicker();
            picker.FileTypeFilter.Add(".png");
            picker.FileTypeFilter.Add(".jpg");
            var file = await picker.PickSingleFileAsync();
            if(file == null)
            {
                return;
            }
            var bitmap = new BitmapImage();
            using (var stream = await file.OpenReadAsync())
            {
                await bitmap.SetSourceAsync(stream);
            }
            image.Source = bitmap;
        }
    }


このエントリーをはてなブックマークに追加

画像ファイルをプロジェクトに追加して、画面にイメージコントロールをはっ付けて、Sourceプロパティで追加した画像ファイルを指定する。と表示できる。
まー、あえて書くほどでもないな。
それよりも、どっかから取ってきた画像データを表示してみたい。

ここでは、アプリのインストールしたところのImages/image.pngを読み込んで表示する。

        private async void button_Click(object sender, RoutedEventArgs e)
        {
            // アプリケーションのインストールフォルダからImages/image.pngを読み込む。
            var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Images/image.png"));
            var bitmap = new BitmapImage();
            using (var stream = await file.OpenReadAsync())
            {
                await bitmap.SetSourceAsync(stream);
            }
            image.Source = bitmap;
        }


このエントリーをはてなブックマークに追加

まず、アプリケーションをインストールしたフォルダを取得する。

        private async void button_Click(object sender, RoutedEventArgs e)
        {
            // アプリケーションのインストールフォルダを取得
            StorageFolder storage = Windows.ApplicationModel.Package.Current.InstalledLocation;

            Debug.WriteLine(storage.Path);

            // ファイル一覧を表示
            var list = await storage.GetItemsAsync();
            foreach(var item in list)
            {
                Debug.WriteLine(item.Name);
            }
        }

アプリケーションのデータフォルダを取得する。ApplicationData.Currentのプロパティで取得できる。

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            ApplicationData appData = ApplicationData.Current;

            // ローカルフォルダ
            Debug.WriteLine(appData.LocalFolder.Path);
            // ローミングフォルダ、同じアプリをインストールした他のデバイスに同期される。
            Debug.WriteLine(appData.RoamingFolder.Path);
            // テンポラリフォルダ
            Debug.WriteLine(appData.TemporaryFolder.Path);
        }

ローミングフォルダはサイズが決まっていてRomingStorageQuotaプロパティでわかる。ちょっと見てみたら100KBってなっていた。ほんとにちょっとしたデータしか同期できないな。



このエントリーをはてなブックマークに追加

↑このページのトップヘ