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

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

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

Windows Presentation Foundation (WPF) は、魅力的な外観のユーザー エクスペリエンスを持つ Windows クライアント アプリケーションを作成するための次世代プレゼンテーション システムです

Q&A

2回答

4978閲覧

JSONをBindingしたい

cancat

総合スコア313

WPF

Windows Presentation Foundation (WPF) は、魅力的な外観のユーザー エクスペリエンスを持つ Windows クライアント アプリケーションを作成するための次世代プレゼンテーション システムです

0グッド

0クリップ

投稿2017/02/21 07:47

こんにちは。
Windows10でWPFのアプリケーションを開発しています。
Visual Studio 2015 Communityを使っています。

###前提・実現したいこと
JSONをUserControlにBindingで表示したいです。
表示した後に、GUIで編集して、保存もしたいです。

###試したこと
従来は、ふつうにファイルを読んで、値をひとつづつ入れていました。
これだと、読み込んだjsonをいちいち展開し、保存時にはひとつづつ値を取得しなければなりません。
これをBindingで解決する方法はありませんか?

###発生している問題
foreachで手間がかかる。

###該当のソースコード

xaml

1<Window x:Class="Json2UserControl.MainWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 6 xmlns:local="clr-namespace:Json2UserControl" 7 mc:Ignorable="d" 8 Title="MainWindow" Height="350" Width="525"> 9 <Grid > 10 <Grid.RowDefinitions> 11 <RowDefinition Height="280*"/> 12 <RowDefinition Height="40*"/> 13 </Grid.RowDefinitions> 14 <StackPanel x:Name="CardHolder" Grid.Row="0"> 15 16 </StackPanel> 17 <StackPanel x:Name="Control" Grid.Row="1" Orientation="Horizontal"> 18 <Button Content="ReadJSON" Click="OnReadButtonClick"/> 19 <Button Content="SaveJSON" Click="OnSaveButtonClick" /> 20 </StackPanel> 21 </Grid> 22</Window>

C#

1using System.IO; 2using System.Text; 3using System.Windows; 4using Newtonsoft.Json; 5 6namespace Json2UserControl { 7 public partial class MainWindow : Window { 8 public MainWindow() { 9 InitializeComponent(); 10 } 11 12 private void OnReadButtonClick(object sender, RoutedEventArgs e) { 13 string file = @"people.json"; 14 string jsonstring = File.ReadAllText(file, Encoding.UTF8); 15 var people = JsonConvert.DeserializeObject<People>(jsonstring); 16 foreach(var person in people.people) { 17 var card = new CardUserControl(); 18 card.Name.Text = person.Name; 19 card.ID.Text = person.ID; 20 //imageは略。 21 CardHolder.Children.Add(card); 22 } 23 } 24 25 private void OnSaveButtonClick(object sender, RoutedEventArgs e) { 26 var people = new People(); 27 int i = 0; 28 foreach(var child in CardHolder.Children) { 29 var card = child as CardUserControl; 30 people.people = new Person[CardHolder.Children.Count]; 31 people.people[i] = new Person(); 32 people.people[i].ID = card.ID.Text; 33 people.people[i].Name = card.Name.Text; 34 //imageは略。 35 i++; 36 } 37 string jsonstring = JsonConvert.SerializeObject(people); 38 string file = @"people.json"; 39 File.AppendAllText(file, jsonstring, Encoding.UTF8); 40 } 41 } 42}

xaml

1<UserControl x:Class="Json2UserControl.CardUserControl" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 5 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 6 xmlns:local="clr-namespace:Json2UserControl" 7 mc:Ignorable="d" 8 d:DesignHeight="200" d:DesignWidth="300"> 9 <Grid> 10 <Grid.RowDefinitions> 11 <RowDefinition Height="25*"/> 12 <RowDefinition Height="25*"/> 13 <RowDefinition Height="100*"/> 14 </Grid.RowDefinitions> 15 <Grid.ColumnDefinitions> 16 <ColumnDefinition Width="13*"/> 17 <ColumnDefinition Width="62*"/> 18 </Grid.ColumnDefinitions> 19 <Label Grid.Column="0" Grid.Row="0">Name</Label> 20 <TextBox x:Name="Name" Grid.Column="1" Grid.Row ="0"></TextBox> 21 <Label Grid.Column="0" Grid.Row="1">ID</Label> 22 <TextBox x:Name="ID" Grid.Column="1" Grid.Row="1"></TextBox> 23 <Label Grid.Column="0" Grid.Row="2">Face</Label> 24 <Image x:Name="FaceImage" Grid.Column="1" Grid.Row="2"></Image> 25 </Grid> 26</UserControl>

C#

1using System.Windows.Controls; 2 3namespace Json2UserControl { 4 public partial class CardUserControl : UserControl { 5 public CardUserControl() { 6 InitializeComponent(); 7 } 8 } 9} 10 11public class People { 12 public Person[] people { get; set; } 13} 14 15public class Person { 16 public string Name { get; set; } 17 public string ID { get; set; } 18 public string Face { get; set; } 19} 20

json

1{ 2 "People": [ 3 { 4 "Name": "五代雄介", 5 "ID": "01", 6 "Face": "五代雄介.jpg" 7 }, 8 { 9 "Name": "津上翔一", 10 "ID": "02", 11 "Face": "津上翔一.jpg" 12 } 13 ] 14}

###補足情報(言語/FW/ツール等のバージョンなど)
Microsoft Visual Studio Community 2015
Version 14.0.25424.00 Update 3
Microsoft .NET Framework
Version 4.6.01038

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

Visual C# 2015 00322-20000-00000-AA575
Microsoft Visual C# 2015

です。
よろしくお願いします。

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

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

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

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

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

guest

回答2

0

https://teratail.com/questions/63899
前にこれだけの話と書いたことでできるはずです。

やりたいと書いていることは、MVVMパターンの基本なので、ドキュメントはたくさんありますよ。

投稿2017/02/21 08:17

kiichi54321

総合スコア1984

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

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

cancat

2017/02/23 02:03

ドキュメント多すぎてわからないです。混乱中。
cancat

2017/03/15 05:42

前に書いたコード、動きませんね。
kiichi54321

2017/03/15 06:15

今、手元にWindows環境がないですし、エラーが何なのかわからないとなにもわかりませんね。
guest

0

こんにちは。

可能だと思いますよ。

People相当のViewModelを作成し、UIとバインディングさせれば表示できます。
保存時には同期させたModelをそのままシリアライズで良さそうな。

投稿2017/02/21 07:51

Tak1wa

総合スコア4791

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

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

cancat

2017/02/23 02:02

People相当のViewModelの作成方法をご教示いただけると嬉しく。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問