Memorandum: xaml にC#のコードから線を引いたり、円を描いたりする。

C#コード側からXAML側図形の位置や形をコントロールする。

Canvas、Line、EllipseなどをC#コードから定義するときは、
Canvas canvas = new Canvas();
とインスタンス化して使う。

UWPは色の指定方法が変わったそうだ。
WPFの

hoge.Stroke = System.Windows.Media.Brushes.Silver;
として指定する方法から

SolidColorBrush greenBrush = new SolidColorBrush(Colors.Green);
line1.Stroke = greenBrush;

と、インスタンス化してから使うやり方に変わっている。

//Canvasの中の描写されたものをすべて消す。
canvasName.Children.Clear();

//次のif文は一つ前に描写されたものが消される。
if (canvasGakufu.Children.Count > 0)
{
canvasGakufu.Children.RemoveAt(canvasGakufu.Children.Count - 1);
}

XAML側
コード側から名前を指定して何かさせたい場合には、XAML側のGridやCanvasなどのパネルに名前を付ける。

<Page
x:Class="UWP_動的に線を描く20180113_1958.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP_動的に線を描く20180113_1958"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid x:Name="yy" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

</Grid>
</Page>

C#コード側
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;
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;
using Windows.UI.Xaml.Shapes;

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

namespace UWP_動的に線を描く20180113_1958
{
/// <summary>
/// それ自体で使用できる空白ページまたはフレーム内に移動できる空白ページ。
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();

//線を引く。UWPは色を指定するのにSolidColorBrushを使う。
var line1 = new Line();
SolidColorBrush greenBrush = new SolidColorBrush(Colors.Green);
line1.Stroke = greenBrush;
line1.X1 = 302;
line1.X2 = 302;
line1.Y1 = 220;
line1.Y2 = 283;
line1.StrokeThickness = 3;
canvasName.Children.Add(line1); //yyはXAML側のGRIDにつけた名前。

//円を描く
var ellipse1 = new Ellipse();
ellipse1.Fill = new SolidColorBrush(Windows.UI.Colors.SteelBlue);
ellipse1.Width = 200;
ellipse1.Height = 200;
canvasName.Children.Add(ellipse1);
}
}
}

--------------------------------------------------------------------------------
//円を描く。で位置を指定。と、回転。
var ellipse1 = new Ellipse();
ellipse1.Fill = new SolidColorBrush(Windows.UI.Colors.Black);
ellipse1.Width = 10;
ellipse1.Height = 25;
RotateTransform rotateTransform45 = new RotateTransform { Angle = 45, CenterX = 0, CenterY = 0 };
ellipse1.RenderTransform = rotateTransform45;
Canvas.SetLeft(ellipse1, 300);
Canvas.SetTop(ellipse1, 278);

canvasName.Children.Add(ellipse1);

-----------------------------------------------------------------------------------
例えば、XAMLコードだけで図形を描く場合は、

<Page
x:Class="UWP_楽譜描写20180111_2020.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP_楽譜描写20180111_2020"
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}">
<Canvas
Height
="600"
Width
="600">



<Line
X1="302" Y1="220"
X2="302" Y2="283"
Stroke="Black"
StrokeThickness="3"/>


<Ellipse
Canvas.Top="278"
Canvas.Left="300"
Fill="#FFFFFF00"
Height="25"
Width="10"
StrokeThickness="5"
Stroke="#FF0000FF">
<Ellipse.RenderTransform>
<RotateTransform Angle="45" />
</Ellipse.RenderTransform>
</Ellipse>


<Line
X1="50" Y1="100"
X2="550" Y2="100"
Stroke="Black"
StrokeThickness="3"/>

<Line
X1="50" Y1="120"
X2="550" Y2="120"
Stroke="Black"
StrokeThickness="3"/>

<Line
X1="50" Y1="140"
X2="550" Y2="140"
Stroke="Black"
StrokeThickness="3"/>

<Line
X1="50" Y1="160"
X2="550" Y2="160"
Stroke="Black"
StrokeThickness="3"/>

<Line
X1="50" Y1="180"
X2="550" Y2="180"
Stroke="Black"
StrokeThickness="3"/>


<Line
X1="50" Y1="240"
X2="550" Y2="240"
Stroke="Black"
StrokeThickness="3"/>

<Line
X1="50" Y1="260"
X2="550" Y2="260"
Stroke="Black"
StrokeThickness="3"/>

<Line
X1="50" Y1="280"
X2="550" Y2="280"
Stroke="Black"
StrokeThickness="3"/>

<Line
X1="50" Y1="300"
X2="550" Y2="300"
Stroke="Black"
StrokeThickness="3"/>

<Line
X1="50" Y1="320"
X2="550" Y2="320"
Stroke="Black"
StrokeThickness="3"/>

</Canvas>
</Grid>
</Page>

---------------------------------------------------------------------------------
C#コード側からxamlにキャンバスを追加する
Canvas myCanvas = new Canvas();
myCanvas.Height = 810;
myCanvas.Width = 610;
myCanvas.Background = new SolidColorBrush(Windows.UI.Colors.LightSteelBlue); //Brushes.LightSteelBlue;
root_Grid.Children.Add(myCanvas);

-------------------
背景がSolidColorBrush色の100個のCanvasを追加したい時
List<Canvas> myCanvas = new List<Canvas>();
for (int i = 0; i < 100; i++)
{
myCanvas.Add(new Canvas { Height = 800, Width = 800, Background = new SolidColorBrush(Windows.UI.Colors.LightSteelBlue) });
gridName.Children.Add(myCanvas[i]);
}

------------------------------------------------------------------------------------
下の2行は少し試したけどうまくいかなかった。また後でもう一度見直してみる。
nameやaccesskeyを使って、名前やkeyを設定できるかも(後で確認しとく)。
ClearValue、UpdateLayoutも使えるか？
----------------------------------------------------------------------------------
レイヤー。
Framework layer ----Windows.UI.XAML
Visual layer ---------------Windows.UI.Composition
Graphics layer------------ DirectX Family
となっていて、
msによると、
ビジュアルレイヤー
1.コンテンツ: カスタム描画コンテンツの軽量合成
2.効果: 効果をアニメーション化、チェーン化、カスタマイズできる、リアルタイム UI 効果システム
3.アニメーション: UI スレッドから独立して実行される、表現力豊かな、フレームワークに依存しないアニメーション

XAML とビジュアルレイヤーの相互運用機能を使用すると、XAML API 単独では実現できない、高度なアニメーションや効果を作成できます。
だそうだ。

Memorandum

2018年1月13日土曜日

xaml にC#のコードから線を引いたり、円を描いたりする。

0 件のコメント:

コメントを投稿