午後わてんのブログ

ベランダ菜園とWindows用アプリ作成(WPFとC#)

WPF、DataContextの指定はXAMLで書くと、Bindingの結果をデザイン画面で確認できる

Bindingの結果をデザイン画面で確認したい

デザイン画面とXAMLがこんな感じで

f:id:gogowaten:20210328154959p:plain
デザイン画面
StackPanelの中にTextBlockを3つ並べて、それぞれのTextプロパティにBindingしているけど
デザイン画面は真っ白
Bindingのところをよく見るとPathの値のところに…が表示されている、マウスカーソルを当ててみると

f:id:gogowaten:20210328155159p:plain
"~のバインドでDataContextが見つかりません"
って表示、見つからないから表示されなくて真っ白ってことみたい
エラーじゃないので起動してみる、C#のコードは

MainWindow.xaml.cs

using System.Windows;

namespace _20210328_のバインドでDataContextが見つかりません
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            MyData data = new()
            {
                TextAAA = "新・AAAAA",
                TextBBB = "神・BBBBB",
                TextCCC = "真・CCCCC"
            };
            this.DataContext = data;
        }
    }

    public class MyData
    {
        public string TextAAA { get; set; }
        public string TextBBB { get; set; }
        public string TextCCC { get; set; }        
    }
}


これを起動した結果は

f:id:gogowaten:20210328160155p:plain
期待通りに動くけど、デザイン画面でもどんな感じで表示されるのか確認したいのよねえ


デザイン画面で表示確認

WindowのDataContextプロパティにMyDataクラスを追加

f:id:gogowaten:20210328161722p:plain
f:id:gogowaten:20210328161738p:plain
f:id:gogowaten:20210328161741p:plain
9~11行目に追加された、これは手で書いたほうが早いかもしれんね
これで

f:id:gogowaten:20210328162812p:plain
"~のバインドでDataContextが見つかりません"
っていうのはなくなった
あとは表示したい文字列をそれぞれのプロパティの初期値に与えれば、それが表示される


初期値の設定

    public class MyData
    {
        public string TextAAA { get; set; }
        public string TextBBB { get; set; }
        public string TextCCC { get; set; }
    }

↑を↓に書き換える

    public class MyData
    {
        public string TextAAA { get; set; }
        public string TextBBB { get; set; } = "仮・BBBBB";
        public string TextCCC { get; set; }
        public MyData()
        {
            TextCCC = "仮・CCCCC";
        }
    }

初期値はプロパティに直接指定と、コンストラクタで指定する2種類試した
書き換えてからビルドすると

できた!

f:id:gogowaten:20210328163111p:plain
デザイン画面で表示された!
初期値を設定していないTextAAAは何も表示されていないけど、初期値を指定した2つは文字列が表示された

起動してみると
f:id:gogowaten:20210328160155p:plain
これは変わらない、期待通り

コード全部

書き換え後のMainWindow.xaml

<Window x:Class="_20210328_のバインドでDataContextが見つかりません.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:_20210328_のバインドでDataContextが見つかりません"
        mc:Ignorable="d"
        Title="MainWindow" Height="250" Width="400">
  <Window.DataContext>
    <local:MyData/>
  </Window.DataContext>
  <Grid>
    <StackPanel>
      <TextBlock Text="{Binding Path=TextAAA}" FontSize="50"/>
      <TextBlock Text="{Binding Path=TextBBB}" FontSize="50"/>      
      <TextBlock Text="{Binding Path=TextCCC}" FontSize="50"/>
    </StackPanel>
  </Grid>
</Window>

書き換え後のMainWindow.xaml.cs

using System.Windows;

namespace _20210328_のバインドでDataContextが見つかりません
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            MyData data = new()
            {
                TextAAA = "新・AAAAA",
                TextBBB = "神・BBBBB",
                TextCCC = "真・CCCCC"
            };
            this.DataContext = data;
        }
    }

    //public class MyData
    //{
    //    public string TextAAA { get; set; }
    //    public string TextBBB { get; set; }
    //    public string TextCCC { get; set; }
    //}
    public class MyData
    {
        public string TextAAA { get; set; }
        public string TextBBB { get; set; } = "仮・BBBBB";
        public string TextCCC { get; set; }
        public MyData()
        {
            TextCCC = "仮・CCCCC";
        }
    }

}




感想

XAMLよりC#で書くほうが好きだからDataContextの指定もC#で書いていたんだけど、これだとデザイン画面では反映されない?ようなのでXAMLのほうをいじっていたらなんかできたから書いた
たぶん今回のようなことはXAMLWPFの基本的なことなんだろうけどねえ




関連記事
前回のWPF記事は6日前
gogowaten.hatenablog.com