ブログ

デザイナーの方は，例えば，以下のようになる。Windowタグにxmlns:cefwpf="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"追加するとコンテンツとしてコントロールを記述できる。（何も言わなくてもわかると思いますが）

<Window x:Class="WPFwebui.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:WPFwebui"
        xmlns:cefwpf="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" Background="White">
    <Grid>
        <cefwpf:ChromiumWebBrowser x:Name="browser" Address="http://www.google.com" Loaded="BrowserLoaded"></cefwpf:ChromiumWebBrowser>
    </Grid>
</Window>

なお前の記事の時はコードビハインドにbrowserを記述していたが，差分となる部分だけをのせると以下のようになるだろう。

　　　　// CefSharp.Wpf.ChromiumWebBrowser browser;

        public MainWindow()
        {
            InitializeComponent();

            //browser = new CefSharp.Wpf.ChromiumWebBrowser();
            // アドレスの取得
            String page = string.Format(@"{0}\html-resources\html\index.html", StartupPath);
            BrowserSettings browserSettings = new BrowserSettings();
            browserSettings.FileAccessFromFileUrls = CefState.Enabled;
            browserSettings.UniversalAccessFromFileUrls = CefState.Enabled;
            browser.BrowserSettings = browserSettings;
            // アドレス設定
            browser.Address = page;
            //Content = browser;
            //browser.Loaded += BrowserLoaded;

以上のようにするとCefSharp.Wpfでデザイナーが使用できる。browserは複数挿入することができる。
タスクマネージャーを見るとCefSharp.BrowserSubprocessが増える。

まずio.BytesIOは何かというと，C#でいうMemoryStreamのような扱いができるもの。
扱う内容が文字列に限定される場合にはio.StringIOというものも用意されている。
例えば，item = io.BytesIO()で用意しておいて，plt.savefig(item, format='***')でバイト列に書き出す。
さらに，下の例ではImage.openでまるでファイルのようにitemを引数と渡せるようになる。

from matplotlib import pyplot as plt
import numpy as np
from PIL import Image, ImageDraw
import io

fig = plt.figure()

plt.plot(np.sin(np.linspace(0, 10, num=250)), 'r')
plt.xlim(0, 250)
plt.ylim(-1, 1) 
plt.title('Sinusoidal wave')
item = io.BytesIO()
plt.savefig(item, format='png') #ここで書き出し
item.seek(0)
im = Image.open(item)#さらにメモリ上のファイルのように扱う
im = im.resize((200, 200))
item.close()
im.show()

ファイルを開いてファイルに書き出すように設計されているプログラムで応用ができそう。上の例ではいったん書き出してリサイズしてから表示している。
ファイルへの書き出しは，item.read()をファイルに書き出せばよい。

from matplotlib import pyplot as plt
import numpy as np
from PIL import Image, ImageDraw
import io

fig = plt.figure()

plt.plot(np.sin(np.linspace(0, 10, num=250)), 'r')
plt.xlim(0, 250)
plt.ylim(-1, 1) 
plt.title('Sinusoidal wave')
item = io.BytesIO()
plt.savefig(item, format='svg') #ここで書き出し
item.seek(0)
with open('test.svg','wb') as out: # Open file as bytes
    out.write(item.read())