%3CLINGO-SUB%20id%3D%22lingo-sub-1407784%22%20slang%3D%22en-US%22%3EWinUI%203.0%20Preview1%20%E3%82%92%E8%A7%A6%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1407784%22%20slang%3D%22en-US%22%3E%3CP%3EBuild%202020%20%E3%81%AE%E3%82%BF%E3%82%A4%E3%83%9F%E3%83%B3%E3%82%B0%E3%81%A7%20Windows%20UI%20Library%203.0%20Preview%201%20%E3%81%8C%E5%87%BA%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82%3C%2FP%3E%0A%3CP%3E%E3%81%BE%E3%81%A0%E3%81%BE%E3%81%A0%E5%88%B6%E9%99%90%E4%BA%8B%E9%A0%85%E3%81%8C%E3%81%9F%E3%81%8F%E3%81%95%E3%82%93%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%81%8C%E3%80%81Win32%20%E3%82%A2%E3%83%97%E3%83%AA%E3%82%82%E3%82%B5%E3%83%9D%E3%83%BC%E3%83%88%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E7%82%B9%E3%81%8C%E3%81%A8%E3%81%A3%E3%81%A6%E3%82%82%E8%88%88%E5%91%B3%E6%B7%B1%E3%81%84%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fja-jp%2Fwindows%2Fapps%2Fwinui%2Fwinui3%2F%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3EWindows%20UI%20%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%203.0%20Preview%201%20(2020%20%E5%B9%B4%205%20%E6%9C%88)%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%E4%B8%8A%E8%A8%98%E3%81%AE%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9%20%E3%83%8E%E3%83%BC%E3%83%88%E3%81%AB%E3%82%82%E3%81%82%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E7%8F%BE%E6%AE%B5%E9%9A%8E%E3%81%A7%E3%81%AF%E5%AE%9F%E7%A8%BC%E5%83%8D%E3%81%AE%E3%82%A2%E3%83%97%E3%83%AA%E3%81%A7%E3%81%AE%E5%88%A9%E7%94%A8%E3%81%AF%E6%83%B3%E5%AE%9A%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%81%BE%E3%81%9B%E3%82%93%E3%81%8C%E3%80%81%E3%83%95%E3%82%A3%E3%83%BC%E3%83%89%E3%83%90%E3%83%83%E3%82%AF%E3%81%AE%E5%8F%8E%E9%9B%86%E3%81%8C%E7%9B%AE%E7%9A%84%E3%81%AE%E4%B8%80%E3%81%A4%E3%81%A7%E3%82%82%E3%81%82%E3%82%8B%E3%81%AE%E3%81%A7%E3%80%81%E6%98%AF%E9%9D%9E%E6%AD%A3%E5%BC%8F%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9%E3%81%95%E3%82%8C%E3%81%9F%E3%82%89%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86%E3%81%A8%E6%80%9D%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E6%96%B9%E3%82%82%E6%98%AF%E9%9D%9E%E8%A9%A6%E3%81%97%E3%81%A6%E3%81%BF%E3%81%A6%E3%83%95%E3%82%A3%E3%83%BC%E3%83%89%E3%83%90%E3%83%83%E3%82%AF%E3%82%92%E3%81%8A%E9%A1%98%E3%81%84%E3%81%97%E3%81%BE%E3%81%99%E3%80%82%EF%BC%88%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fmicrosoft%2Fmicrosoft-ui-xaml%2Fissues%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3EGitHub%20%E3%81%AE%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA%3C%2FA%3E%E3%81%A7%E3%83%95%E3%82%A3%E3%83%BC%E3%83%89%E3%83%90%E3%83%83%E3%82%AF%E5%8F%AF%E8%83%BD%E3%81%A7%E3%81%99%EF%BC%89%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%E8%89%B2%E3%80%85%E3%81%AA%E5%88%B6%E9%99%90%E4%BA%8B%E9%A0%85%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%81%8C%E3%80%81%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%81%A7%E3%81%AE%E5%88%A9%E7%94%A8%E6%99%82%E3%81%AB%E8%87%B4%E5%91%BD%E7%9A%84%E3%81%AA%E5%88%B6%E9%99%90%E4%BA%8B%E9%A0%85%E3%81%A8%E3%81%97%E3%81%A6%20IME%20%E3%81%8C%E6%A9%9F%E8%83%BD%E3%81%97%E3%81%AA%E3%81%84%E3%81%A8%E3%81%84%E3%81%86%E5%88%B6%E9%99%90%E4%BA%8B%E9%A0%85%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82%E3%81%9D%E3%81%AE%E7%82%B9%E3%81%A0%E3%81%91%E3%81%AF%E6%B3%A8%E6%84%8F%E3%81%97%E3%81%A6%E5%88%A9%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%E3%80%82%E5%AE%8C%E5%85%A8%E3%81%AA%E5%88%B6%E9%99%90%E4%BA%8B%E9%A0%85%E3%81%AE%E3%83%AA%E3%82%B9%E3%83%88%E3%81%AF%E3%80%81%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9%E3%83%8E%E3%83%BC%E3%83%88%E3%81%AB%E8%A8%98%E8%BC%89%E3%81%97%E3%81%A6%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH2%20id%3D%22toc-hId--1330339639%22%20id%3D%22toc-hId--1330339639%22%3E%E4%B8%8B%E6%BA%96%E5%82%99%3C%2FH2%3E%0A%3CP%3E%E3%81%A7%E3%81%AF%E3%80%81%E6%97%A9%E9%80%9F%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86%E3%81%A8%E6%80%9D%E3%81%84%E3%81%BE%E3%81%99%E3%80%82%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fja-jp%2Fwindows%2Fapps%2Fwinui%2Fwinui3%2Fget-started-winui3-for-desktop%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3EGet%20started%20with%20WinUI%203.0%20for%20desktop%20apps%3C%2FA%3E%20%E3%81%AB%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E6%96%B9%E6%B3%95%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82Windows%2010%20%E3%81%AE%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E4%BB%A5%E5%A4%96%E3%81%AB%E3%81%AF%20Visual%20Studio%202019%2016.7%20Preview%201%20%E3%81%A8%20.NET%205%20Preview%204%20%E3%81%A8%E3%80%81%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E7%94%A8%E3%81%AE%20Visual%20Studio%20%E3%81%AE%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%E3%81%8C%E5%BF%85%E8%A6%81%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%E4%B8%8B%E6%BA%96%E5%82%99%E3%81%8C%E5%AE%8C%E4%BA%86%E3%81%99%E3%82%8B%E3%81%A8%E3%80%81%E4%BB%A5%E4%B8%8B%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%20WinUI%20%E7%B3%BB%E3%81%AE%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%81%8C%E8%BF%BD%E5%8A%A0%E3%81%95%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22KazukiOta_0-1590051505677.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F193509iFC56644F92D4B1FD%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22KazukiOta_0-1590051505677.png%22%20alt%3D%22KazukiOta_0-1590051505677.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EBlank%20App%2C%20Packaged%20(WinUI%20in%20Desktop)%20%E3%82%92%E8%A9%A6%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86%E3%81%A8%E6%80%9D%E3%81%84%E3%81%BE%E3%81%99%E3%80%82%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22winui1.gif%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F193513iC4492C6CFEA9E377%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22winui1.gif%22%20alt%3D%22winui1.gif%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH2%20id%3D%22toc-hId-1157173194%22%20id%3D%22toc-hId-1157173194%22%3E%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90%E3%81%A8%E4%B8%AD%E8%BA%AB%E3%81%AE%E7%A2%BA%E8%AA%8D%3C%2FH2%3E%0A%3CP%3E%E3%81%93%E3%81%AE%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E6%96%B0%E8%A6%8F%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B%E3%81%A8%E4%B8%80%E8%A6%8B%20WPF%20%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AB%E8%A6%8B%E3%81%88%E3%82%8B%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%A8%E3%80%81MSIX%20%E3%81%AB%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%83%B3%E3%82%B0%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%20Windows%20%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%20%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%20%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%8C%E4%BD%9C%E6%88%90%E3%81%95%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22KazukiOta_0-1590052218556.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F193512i071B945049011175%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22KazukiOta_0-1590052218556.png%22%20alt%3D%22KazukiOta_0-1590052218556.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EApp%20%E3%82%AF%E3%83%A9%E3%82%B9%E3%82%84%20MainWindow%20%E3%82%AF%E3%83%A9%E3%82%B9%E3%81%AE%E3%83%99%E3%83%BC%E3%82%B9%E3%82%AF%E3%83%A9%E3%82%B9%E3%82%82%20Microsoft.UI.Xaml.Application%20%E3%82%AF%E3%83%A9%E3%82%B9%E3%82%84%20Microsoft.UI.Xaml.Window%20%E3%82%AF%E3%83%A9%E3%82%B9%E3%81%AA%E3%81%AE%E3%81%A7%20WPF%20%E3%81%A8%E3%81%AF%E5%85%A8%E3%81%8F%E5%88%A5%E7%89%A9%E3%81%A7%E3%81%82%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%82%8F%E3%81%8B%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82%3C%2FP%3E%0A%3CP%3E%E5%AE%9F%E8%A1%8C%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B%E3%81%A8%E3%80%81%E3%81%B2%E3%81%AA%E5%9E%8B%E3%81%A7%E3%81%AF%E4%BB%A5%E4%B8%8B%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%8C%E3%81%82%E3%82%8B%E3%81%A0%E3%81%91%E3%81%AE%E9%9D%9E%E5%B8%B8%E3%81%AB%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%AA%E7%94%BB%E9%9D%A2%E3%81%8C%E8%B5%B7%E5%8B%95%E3%81%97%E3%81%A6%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82%E7%A7%81%E3%81%AE%20Windows%2010%20%E3%81%AF%E3%80%81%E4%BB%8A%E3%83%80%E3%83%BC%E3%82%AF%E3%83%A2%E3%83%BC%E3%83%89%E3%81%AB%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%81%AE%E3%81%A7%E3%81%9D%E3%82%8C%E3%81%8C%E5%8F%8D%E6%98%A0%E3%81%95%E3%82%8C%E3%81%A6%E3%82%A6%E3%82%A3%E3%83%B3%E3%83%89%E3%82%A6%E3%81%AE%E8%83%8C%E6%99%AF%E3%81%A8%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%8C%E9%BB%92%E3%81%A3%E3%81%BD%E3%81%8F%E3%81%AA%E3%81%A3%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82%3C%2FP%3E%0A%3CP%3E%E3%81%93%E3%81%93%E3%82%89%E8%BE%BA%E3%81%8C%E3%80%81%E4%BD%95%E3%82%82%E8%80%83%E3%81%88%E3%81%AA%E3%81%8F%E3%81%A6%E3%82%82%E5%8F%8D%E6%98%A0%E3%81%95%E3%82%8C%E3%82%8B%E3%81%AE%E3%81%AF%E3%81%A8%E3%81%A6%E3%82%82%E3%81%82%E3%82%8A%E3%81%8C%E3%81%9F%E3%81%84%E3%81%A8%E6%80%9D%E3%81%84%E3%81%BE%E3%81%99%E3%80%82%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22winui1.gif%22%20style%3D%22width%3A%20781px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F193514i1B7949700A081B28%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22winui1.gif%22%20alt%3D%22winui1.gif%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B%E3%81%A8%E3%80%81.NET%205%20%E3%81%A7%E3%81%82%E3%82%8B%E3%81%93%E3%81%A8%E3%81%A8%20WinExe%20%E3%82%92%E5%87%BA%E5%8A%9B%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%80%81%E3%81%82%E3%81%A8%E3%81%AF%20Microsoft.WinUI%20%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%82%92%E5%8F%82%E7%85%A7%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E7%A2%BA%E8%AA%8D%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-html%22%3E%3CCODE%3E%3CPROJECT%20sdk%3D%22Microsoft.NET.Sdk%22%3E%0A%20%20%3CPROPERTYGROUP%3E%0A%20%20%20%20%3COUTPUTTYPE%3EWinExe%3C%2FOUTPUTTYPE%3E%0A%20%20%20%20%3CTARGETFRAMEWORK%3Enetcoreapp5.0%3C%2FTARGETFRAMEWORK%3E%0A%20%20%20%20%3CTARGETPLATFORMVERSION%3E10.0.18362.0%3C%2FTARGETPLATFORMVERSION%3E%0A%20%20%20%20%3CTARGETPLATFORMMINVERSION%3E10.0.17134.0%3C%2FTARGETPLATFORMMINVERSION%3E%0A%20%20%20%20%3CROOTNAMESPACE%3EHelloWorldApp%3C%2FROOTNAMESPACE%3E%0A%0A%20%20%20%20%3CAPPLICATIONMANIFEST%3Eapp.manifest%3C%2FAPPLICATIONMANIFEST%3E%0A%20%20%20%20%3CPLATFORMS%3EAnyCPU%3Bx86%3Bx64%3C%2FPLATFORMS%3E%0A%20%20%20%20%3CSELFCONTAINED%3Etrue%3C%2FSELFCONTAINED%3E%0A%20%20%20%20%3CRUNTIMEIDENTIFIERS%3Ewin-x86%3Bwin-x64%3C%2FRUNTIMEIDENTIFIERS%3E%0A%20%20%20%20%3CRUNTIMEIDENTIFIER%3Ewin-%24(Platform)%3C%2FRUNTIMEIDENTIFIER%3E%0A%20%20%3C%2FPROPERTYGROUP%3E%0A%20%20%3CITEMGROUP%3E%0A%20%20%20%20%3CPACKAGEREFERENCE%20include%3D%22Microsoft.VCRTForwarders.140%22%20version%3D%221.0.6%22%3E%3C%2FPACKAGEREFERENCE%3E%0A%20%20%20%20%3CPACKAGEREFERENCE%20include%3D%22Microsoft.WinUI%22%20version%3D%223.0.0-preview1.200515.3%22%3E%3C%2FPACKAGEREFERENCE%3E%0A%20%20%20%20%3CMANIFEST%20include%3D%22%24(ApplicationManifest)%22%3E%3C%2FMANIFEST%3E%0A%20%20%3C%2FITEMGROUP%3E%0A%20%20%3CITEMGROUP%3E%0A%20%20%20%20%3CNONE%20remove%3D%22App.xaml%22%3E%3C%2FNONE%3E%0A%20%20%20%20%3CNONE%20remove%3D%22MainWindow.xaml%22%3E%3C%2FNONE%3E%0A%20%20%3C%2FITEMGROUP%3E%0A%20%20%3CITEMGROUP%3E%0A%20%20%20%20%3CPAGE%20update%3D%22App.xaml%22%3E%0A%20%20%20%20%20%20%3CGENERATOR%3EMSBuild%3ACompile%3C%2FGENERATOR%3E%0A%20%20%20%20%3C%2FPAGE%3E%0A%20%20%20%20%3CPAGE%20update%3D%22MainWindow.xaml%22%3E%0A%20%20%20%20%20%20%3CGENERATOR%3EMSBuild%3ACompile%3C%2FGENERATOR%3E%0A%20%20%20%20%3C%2FPAGE%3E%0A%20%20%3C%2FITEMGROUP%3E%0A%3C%2FPROJECT%3E%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E6%96%B9%E3%82%92%E5%B0%91%E3%81%97%E3%81%84%E3%81%98%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86%E3%81%A8%E6%80%9D%E3%81%84%E3%81%BE%E3%81%99%E3%80%82%E6%89%8B%E5%89%8D%E5%91%B3%E5%99%8C%E3%81%A7%E3%81%AF%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%81%8C%E3%80%81ReactiveProperty%20%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%A6%E3%80%81ViewModel%20%E3%82%AF%E3%83%A9%E3%82%B9%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%20ReactiveProperty%20%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E5%85%A5%E5%8A%9B%E3%81%AB%E5%AF%BE%E3%81%97%E3%81%A6%E5%B0%91%E3%81%97%E9%81%85%E3%82%8C%E3%81%A6%E5%A4%A7%E6%96%87%E5%AD%97%E3%81%AB%E5%A4%89%E6%8F%9B%E3%81%97%E3%81%A6%E7%94%BB%E9%9D%A2%E3%81%AB%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E3%82%82%E3%81%AE%E3%82%92%E8%A9%A6%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F%E3%81%84%E3%81%A8%E6%80%9D%E3%81%84%E3%81%BE%E3%81%99%E3%80%82%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ENuGet%20%E3%81%8B%E3%82%89%20ReactiveProperty%20v7.0.1%20%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%A6%E3%80%81MainWindowViewModel%20%E3%82%AF%E3%83%A9%E3%82%B9%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%A6%E4%BB%A5%E4%B8%8B%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%E6%9B%B8%E3%81%84%E3%81%A6%E3%81%BF%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-csharp%22%3E%3CCODE%3Eusing%20Reactive.Bindings%3B%0Ausing%20System%3B%0Ausing%20System.ComponentModel.DataAnnotations%3B%0Ausing%20System.Linq%3B%0Ausing%20System.Reactive.Linq%3B%0A%0Anamespace%20HelloWorldApp%0A%7B%0A%20%20%20%20public%20class%20MainWindowViewModel%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%5BRequired(ErrorMessage%20%3D%20%22%7B0%7D%20is%20required.%22)%5D%0A%20%20%20%20%20%20%20%20public%20ReactiveProperty%3CSTRING%3E%20Input%20%7B%20get%3B%20%7D%0A%20%20%20%20%20%20%20%20public%20ReadOnlyReactiveProperty%3CSTRING%3E%20InputErrorMessage%20%7B%20get%3B%20%7D%0A%20%20%20%20%20%20%20%20public%20ReadOnlyReactiveProperty%3CSTRING%3E%20Output%20%7B%20get%3B%20%7D%0A%0A%20%20%20%20%20%20%20%20public%20ReactiveCommand%20ResetCommand%20%7B%20get%3B%20%7D%0A%0A%20%20%20%20%20%20%20%20public%20MainWindowViewModel()%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20Input%20%3D%20new%20ReactiveProperty%3CSTRING%3E(%22%22%2C%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ReactivePropertyMode.Default%20%7C%20ReactivePropertyMode.IgnoreInitialValidationError)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.SetValidateAttribute(()%20%3D%26gt%3B%20Input)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20InputErrorMessage%20%3D%20Input.ObserveValidationErrorMessage()%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.ToReadOnlyReactiveProperty()%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20Output%20%3D%20Input.Delay(TimeSpan.FromSeconds(2))%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.Select(x%20%3D%26gt%3B%20x.ToUpper())%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.ToReadOnlyReactiveProperty()%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20ResetCommand%20%3D%20Input.Select(x%20%3D%26gt%3B%20!string.IsNullOrEmpty(x))%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.ToReactiveCommand()%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.WithSubscribe(()%20%3D%26gt%3B%20Input.Value%20%3D%20%22%22)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D%0A%3C%2FSTRING%3E%3C%2FSTRING%3E%3C%2FSTRING%3E%3C%2FSTRING%3E%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%E3%81%9D%E3%81%97%E3%81%A6%E3%80%81MainWindow%20%E3%81%AB%E3%80%81%E3%81%93%E3%82%8C%E3%82%92%E3%83%90%E3%82%A4%E3%83%B3%E3%83%89%E3%81%97%E3%81%BE%E3%81%99%E3%80%82%E3%83%90%E3%82%A4%E3%83%B3%E3%83%89%E3%81%AF%E3%80%81Preview%201%20%E3%81%AE%E6%AE%B5%E9%9A%8E%E3%81%A7%E3%81%AF%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E6%99%82%E3%83%87%E3%83%BC%E3%82%BF%E3%83%90%E3%82%A4%E3%83%B3%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%AE%E3%81%BF%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%82%88%E3%81%86%E3%81%A7%E3%81%99%E3%80%82%E4%BB%8A%E5%BE%8C%E3%82%82%E3%81%9D%E3%81%86%E3%81%AA%E3%81%AE%E3%81%8B%E3%81%AF%E4%B8%8D%E6%98%8E%E3%81%A7%E3%81%99%E3%81%8C%E3%80%81DataContext%20%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%81%8C%20Window%20%E3%81%AB%E3%81%AA%E3%81%8F%E3%81%A6%E3%81%B3%E3%81%A3%E3%81%8F%E3%82%8A%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82%3C%2FP%3E%0A%3CP%3E%E3%81%A8%E3%81%84%E3%81%86%E3%81%8B%E6%96%B0%E8%A6%8F%E3%81%AB%E4%BD%9C%E3%82%8B%E3%81%AA%E3%82%89%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E6%99%82%E3%83%87%E3%83%BC%E3%82%BF%E3%83%90%E3%82%A4%E3%83%B3%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%A0%E3%81%91%E3%81%A7%E3%82%82%E5%9B%B0%E3%82%8B%E3%81%93%E3%81%A8%E3%81%AF%E3%80%81%E3%81%BB%E3%81%A8%E3%82%93%E3%81%A9%E3%81%AA%E3%81%84%E3%81%AE%E3%81%A7%E3%81%84%E3%81%84%E3%81%A7%E3%81%99%E3%82%88%E3%81%AD%E3%80%82%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%E3%81%A8%E3%81%84%E3%81%86%E3%81%93%E3%81%A8%E3%81%A7%20MainWindow.xaml%20%E3%82%92%E4%BB%A5%E4%B8%8B%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%E3%81%97%E3%81%BE%E3%81%99%E3%80%82%E3%81%82%E3%82%8F%E3%81%9B%E3%81%A6%20MainWindow.xaml.cs%20%E3%81%8B%E3%82%89%E3%80%81%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%E3%81%AE%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%83%8F%E3%83%B3%E3%83%89%E3%83%A9%E3%82%82%E6%B6%88%E3%81%97%E3%81%A6%20ViewModel%20%E3%81%AE%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%BE%E3%81%99%E3%80%82%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-html%22%3E%3CCODE%3E%3CWINDOW%20class%3D%22HelloWorldApp.MainWindow%22%20xmlns%3D%22http%3A%2F%2Fschemas.microsoft.com%2Fwinfx%2F2006%2Fxaml%2Fpresentation%22%20x%3D%22http%3A%2F%2Fschemas.microsoft.com%2Fwinfx%2F2006%2Fxaml%22%20local%3D%22using%3AHelloWorldApp%22%20d%3D%22http%3A%2F%2Fschemas.microsoft.com%2Fexpression%2Fblend%2F2008%22%20mc%3D%22http%3A%2F%2Fschemas.openxmlformats.org%2Fmarkup-compatibility%2F2006%22%20ignorable%3D%22d%22%3E%0A%20%20%20%20%3CSTACKPANEL%3E%0A%20%20%20%20%20%20%20%20%3CTEXTBOX%20text%3D%22%7Bx%3ABind%20ViewModel.Input.Value%2C%20Mode%3DTwoWay%2C%20UpdateSourceTrigger%3DPropertyChanged%7D%22%3E%3C%2FTEXTBOX%3E%0A%20%20%20%20%20%20%20%20%3CTEXTBLOCK%20text%3D%22%7Bx%3ABind%20ViewModel.InputErrorMessage.Value%2C%20Mode%3DOneWay%7D%22%20foreground%3D%22Red%22%3E%3C%2FTEXTBLOCK%3E%0A%20%20%20%20%20%20%20%20%3CBUTTON%20content%3D%22Reset%22%20command%3D%22%7Bx%3ABind%20ViewModel.ResetCommand%7D%22%3E%0A%20%20%20%20%20%20%20%20%3CTEXTBLOCK%20text%3D%22%7Bx%3ABind%20ViewModel.Output.Value%2C%20Mode%3DOneWay%7D%22%3E%3C%2FTEXTBLOCK%3E%0A%20%20%20%20%3C%2FBUTTON%3E%3C%2FSTACKPANEL%3E%0A%3C%2FWINDOW%3E%0A%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-csharp%22%3E%3CCODE%3Eusing%20Microsoft.UI.Xaml%3B%0A%0A%2F%2F%20The%20Blank%20Window%20item%20template%20is%20documented%20at%20https%3A%2F%2Fgo.microsoft.com%2Ffwlink%2F%3FLinkId%3D402352%26amp%3Bclcid%3D0x409%0A%0Anamespace%20HelloWorldApp%0A%7B%0A%20%20%20%20%2F%2F%2F%20%3CSUMMARY%3E%0A%20%20%20%20%2F%2F%2F%20An%20empty%20window%20that%20can%20be%20used%20on%20its%20own%20or%20navigated%20to%20within%20a%20Frame.%0A%20%20%20%20%2F%2F%2F%20%3C%2FSUMMARY%3E%0A%20%20%20%20public%20sealed%20partial%20class%20MainWindow%20%3A%20Window%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20private%20MainWindowViewModel%20ViewModel%20%7B%20get%3B%20%7D%20%3D%20new%20MainWindowViewModel()%3B%0A%20%20%20%20%20%20%20%20public%20MainWindow()%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20this.InitializeComponent()%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D%0A%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%E5%87%BA%E6%9D%A5%E3%81%9F%E3%81%AE%E3%81%A7%E5%AE%9F%E8%A1%8C%E3%81%97%E3%81%A6%E3%81%BF%E3%81%BE%E3%81%97%E3%82%87%E3%81%86%E3%80%82%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22winui2.gif%22%20style%3D%22width%3A%20687px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F193520i71DC05E371B82FBA%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22winui2.gif%22%20alt%3D%22winui2.gif%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%E3%81%A1%E3%82%83%E3%82%93%E3%81%A8%202%20%E7%A7%92%E9%81%85%E3%82%8C%E3%81%A6%E5%A4%A7%E6%96%87%E5%AD%97%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%A6%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%A6%E3%81%BE%E3%81%99%E3%81%AD%E3%80%82%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH2%20id%3D%22toc-hId--650281269%22%20id%3D%22toc-hId--650281269%22%3E%E3%81%BE%E3%81%A8%E3%82%81%3C%2FH2%3E%0A%3CP%3E%E3%81%A8%E3%81%84%E3%81%86%E3%81%93%E3%81%A8%E3%81%A7%E3%80%81Windows%20UI%20Library%203.0%20Preview%201%20%E3%81%8C%E5%87%BA%E3%81%9F%E3%81%AE%E3%81%A7%E3%80%81%E3%81%9D%E3%81%AE%E4%B8%AD%E3%81%AE%20Win%2032%20%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%92%E8%A9%A6%E3%81%97%E3%81%A6%E3%81%BF%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82%3C%2FP%3E%0A%3CP%3E%E3%81%8B%E3%81%AA%E3%82%8A%E3%82%B7%E3%83%BC%E3%83%A0%E3%83%AC%E3%82%B9%E3%81%AB%20Win%20UI%20Library%20%E3%81%8C%E3%82%A2%E3%83%97%E3%83%AA%E5%86%85%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%82%8F%E3%81%8B%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82%E4%BB%8A%E5%9B%9E%E3%81%AE%20Preview%201%20%E3%81%A7%E3%81%AF%E3%82%B5%E3%83%9D%E3%83%BC%E3%83%88%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%81%BE%E3%81%9B%E3%82%93%E3%81%8C%E3%80%81XAML%20Islands%20%E3%81%AE%E6%A9%9F%E8%83%BD%E3%81%8C%E8%BF%BD%E5%8A%A0%E3%81%95%E3%82%8C%E3%82%8B%E3%81%A8%20WPF%20%E3%81%AA%E3%81%A9%E3%81%AE%E5%BE%93%E6%9D%A5%E3%81%AE%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AB%E7%B5%84%E3%81%BF%E8%BE%BC%E3%82%80%E3%81%93%E3%81%A8%E3%82%82%E5%87%BA%E6%9D%A5%E3%82%8B%E3%81%A8%E6%80%9D%E3%81%84%E3%81%BE%E3%81%99%E3%80%82ViewModel%20%E3%82%92%E3%81%8D%E3%81%A1%E3%82%93%E3%81%A8%E4%BD%9C%E3%81%A3%E3%81%A6%E3%82%8B%E3%82%A2%E3%83%97%E3%83%AA%E3%81%A7%E3%81%82%E3%82%8C%E3%81%B0%20View%20%E3%81%A0%E3%81%91%E7%A7%BB%E6%A4%8D%E3%81%99%E3%82%8B%E3%81%AE%E3%82%82%E3%80%81%E3%81%9D%E3%81%93%E3%81%BE%E3%81%A7%E5%A4%A7%E5%A4%89%E3%81%98%E3%82%83%E3%81%AA%E3%81%84%E3%81%8B%E3%82%82%E3%81%97%E3%82%8C%E3%81%AA%E3%81%84%E3%81%A8%E3%81%84%E3%81%86%E6%B7%A1%E3%81%84%E6%9C%9F%E5%BE%85%E3%81%8C%E6%8C%81%E3%81%A6%E3%81%9D%E3%81%86%E3%81%A0%E3%81%A8%E6%80%9D%E3%81%84%E3%81%BE%E3%81%99%E3%80%82%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EReactiveProperty%20%E3%82%82%E6%99%AE%E9%80%9A%E3%81%AB%E5%8B%95%E3%81%84%E3%81%A6%E3%83%90%E3%83%AA%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%82%E3%81%A1%E3%82%83%E3%82%93%E3%81%A8%E5%8B%95%E3%81%84%E3%81%A6%E3%81%84%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%E6%98%AF%E9%9D%9E%E3%80%81%E7%9A%86%E3%81%95%E3%82%93%E3%82%82%E9%9D%A2%E7%99%BD%E3%81%9D%E3%81%86%E3%81%A0%E3%81%AA%E3%81%A8%E6%80%9D%E3%81%A3%E3%81%9F%E3%82%89%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%97%E3%81%A6%E8%A9%A6%E3%81%97%E3%81%A6%E3%81%BF%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%E3%80%82%3C%2FP%3E%3C%2FLINGO-BODY%3E
Microsoft

Build 2020 のタイミングで Windows UI Library 3.0 Preview 1 が出ました。

まだまだ制限事項がたくさんありますが、Win32 アプリもサポートされている点がとっても興味深いリリースになります。

 

Windows UI ライブラリ 3.0 Preview 1 (2020 年 5 月)

 

上記のリリース ノートにもあるように現段階では実稼働のアプリでの利用は想定されていませんが、フィードバックの収集が目的の一つでもあるので、是非正式リリースされたら使ってみようと思っている方も是非試してみてフィードバックをお願いします。(GitHub のリポジトリでフィードバック可能です)

 

色々な制限事項がありますが、日本語での利用時に致命的な制限事項として IME が機能しないという制限事項があります。その点だけは注意して利用してください。完全な制限事項のリストは、リリースノートに記載してあります。

 

下準備

では、早速使ってみようと思います。Get started with WinUI 3.0 for desktop apps にセットアップ方法があります。Windows 10 のバージョン以外には Visual Studio 2019 16.7 Preview 1 と .NET 5 Preview 4 と、プロジェクトテンプレート用の Visual Studio の拡張機能が必要になります。

 

下準備が完了すると、以下のように WinUI 系のプロジェクトテンプレートが追加されます。

KazukiOta_0-1590051505677.png

Blank App, Packaged (WinUI in Desktop) を試してみようと思います。

winui1.gif

 

プロジェクトの作成と中身の確認

このプロジェクトを新規作成すると一見 WPF アプリのプロジェクトに見えるプロジェクトと、MSIX にパッケージングするための Windows アプリケーション パッケージ プロジェクトが作成されます。

KazukiOta_0-1590052218556.png

App クラスや MainWindow クラスのベースクラスも Microsoft.UI.Xaml.Application クラスや Microsoft.UI.Xaml.Window クラスなので WPF とは全く別物であることがわかります。

実行してみると、ひな型では以下のようにボタンがあるだけの非常にシンプルな画面が起動してきます。私の Windows 10 は、今ダークモードにしているのでそれが反映されてウィンドウの背景とボタンが黒っぽくなっています。

ここら辺が、何も考えなくても反映されるのはとてもありがたいと思います。

 

winui1.gif

プロジェクトファイルを確認すると、.NET 5 であることと WinExe を出力すること、あとは Microsoft.WinUI パッケージを参照していることが確認できました。

 

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>netcoreapp5.0</TargetFramework>
    <TargetPlatformVersion>10.0.18362.0</TargetPlatformVersion>
    <TargetPlatformMinVersion>10.0.17134.0</TargetPlatformMinVersion>
    <RootNamespace>HelloWorldApp</RootNamespace>

    <ApplicationManifest>app.manifest</ApplicationManifest>
    <Platforms>AnyCPU;x86;x64</Platforms>
    <SelfContained>true</SelfContained>
    <RuntimeIdentifiers>win-x86;win-x64</RuntimeIdentifiers>
    <RuntimeIdentifier>win-$(Platform)</RuntimeIdentifier>
  </PropertyGroup>
  <ItemGroup>
    <PackageReference Include="Microsoft.VCRTForwarders.140" Version="1.0.6" />
    <PackageReference Include="Microsoft.WinUI" Version="3.0.0-preview1.200515.3" />
    <Manifest Include="$(ApplicationManifest)" />
  </ItemGroup>
  <ItemGroup>
    <None Remove="App.xaml" />
    <None Remove="MainWindow.xaml" />
  </ItemGroup>
  <ItemGroup>
    <Page Update="App.xaml">
      <Generator>MSBuild:Compile</Generator>
    </Page>
    <Page Update="MainWindow.xaml">
      <Generator>MSBuild:Compile</Generator>
    </Page>
  </ItemGroup>
</Project>

 

コードの方を少しいじってみようと思います。手前味噌ではありますが、ReactiveProperty を追加して、ViewModel クラスを使って ReactiveProperty を使った入力に対して少し遅れて大文字に変換して画面に表示するものを試してみたいと思います。

 

NuGet から ReactiveProperty v7.0.1 を追加して、MainWindowViewModel クラスを追加して以下のように書いてみました。

 

using Reactive.Bindings;
using System;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Reactive.Linq;

namespace HelloWorldApp
{
    public class MainWindowViewModel
    {
        [Required(ErrorMessage = "{0} is required.")]
        public ReactiveProperty<string> Input { get; }
        public ReadOnlyReactiveProperty<string> InputErrorMessage { get; }
        public ReadOnlyReactiveProperty<string> Output { get; }

        public ReactiveCommand ResetCommand { get; }

        public MainWindowViewModel()
        {
            Input = new ReactiveProperty<string>("", 
                ReactivePropertyMode.Default | ReactivePropertyMode.IgnoreInitialValidationError)
                .SetValidateAttribute(() => Input);
            InputErrorMessage = Input.ObserveValidationErrorMessage()
                .ToReadOnlyReactiveProperty();

            Output = Input.Delay(TimeSpan.FromSeconds(2))
                .Select(x => x.ToUpper())
                .ToReadOnlyReactiveProperty();

            ResetCommand = Input.Select(x => !string.IsNullOrEmpty(x))
                .ToReactiveCommand()
                .WithSubscribe(() => Input.Value = "");
        }
    }
}

 

そして、MainWindow に、これをバインドします。バインドは、Preview 1 の段階ではコンパイル時データバインディングのみになっているようです。今後もそうなのかは不明ですが、DataContext プロパティが Window になくてびっくりしました。

というか新規に作るならコンパイル時データバインディングだけでも困ることは、ほとんどないのでいいですよね。

 

ということで MainWindow.xaml を以下のようにします。あわせて MainWindow.xaml.cs から、デフォルトのボタンクリックイベントハンドラも消して ViewModel のプロパティを追加します。

 

<Window
  x:Class="HelloWorldApp.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:HelloWorldApp"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d">
    <StackPanel>
        <TextBox Text="{x:Bind ViewModel.Input.Value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
        <TextBlock Text="{x:Bind ViewModel.InputErrorMessage.Value, Mode=OneWay}" Foreground="Red" />
        <Button Content="Reset" Command="{x:Bind ViewModel.ResetCommand}" />
        <TextBlock Text="{x:Bind ViewModel.Output.Value, Mode=OneWay}" />
    </StackPanel>
</Window>

 

 

 

using Microsoft.UI.Xaml;

// The Blank Window item template is documented at https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409

namespace HelloWorldApp
{
    /// <summary>
    /// An empty window that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        private MainWindowViewModel ViewModel { get; } = new MainWindowViewModel();
        public MainWindow()
        {
            this.InitializeComponent();
        }
    }
}

 

 出来たので実行してみましょう。

winui2.gif

ちゃんと 2 秒遅れて大文字になって表示されてますね。

 

まとめ

ということで、Windows UI Library 3.0 Preview 1 が出たので、その中の Win 32 アプリのプロジェクトテンプレートを試してみました。

かなりシームレスに Win UI Library がアプリ内で使えることがわかりました。今回の Preview 1 ではサポートされていませんが、XAML Islands の機能が追加されると WPF などの従来のアプリに組み込むことも出来ると思います。ViewModel をきちんと作ってるアプリであれば View だけ移植するのも、そこまで大変じゃないかもしれないという淡い期待が持てそうだと思います。

 

ReactiveProperty も普通に動いてバリデーションもちゃんと動いていました。

 

是非、皆さんも面白そうだなと思ったらインストールして試してみてください。