WinUI3の図形の描画について学んだ事をアウトプットしていきたいと思います。
何か追加情報があれば都度記事を更新していこうと思います。
直線
直線にはLineコントロールを使用します。
Stroke属性に線の色、StrokeThicknewssには線の太さを設定します。
X1、X2に横方向の始点・終点を、Y1、Y2に縦方向の始点・終点を設定します。
<StackPanel Orientation="Vertical" Margin="30">
<StackPanel Orientation="Horizontal" Height="50" Margin="0, 0, 0, 10">
<Line Stroke="Orange" StrokeThickness="3"
X1="0" X2="50" Y1="0" Y2="0" Margin="0, 0, 10, 0" />
<Line Stroke="Violet" StrokeThickness="3"
X1="0" X2="50" Y1="50" Y2="50" Margin="0, 0, 10, 0" />
<Line Stroke="Green" StrokeThickness="3"
X1="0" X2="50" Y1="50" Y2="0" Margin="0, 0, 10, 0" />
<Line Stroke="Salmon" StrokeThickness="3"
X1="0" X2="50" Y1="0" Y2="50" Margin="0, 0, 10, 0" />
</StackPanel>
</StackPanel>
ドット線
線は直線に限らずですが、ドットの線にすることも可能です。
StrokeDashArray属性にドットパターンを設定することでドット線にできます。
属性の内容はドットの長さとドットとドットの間の空白の長さをカンマ、若しくはスペースを区切り文字として交互に設定します。
また、ドットの長さと空白の長さが1であった場合は空白の長さを省略可能です。
今回は直線のパターンを実装例にします。
<StackPanel Orientation="Vertical" Margin="30">
<StackPanel Orientation="Vertical" Margin="0, 0, 0, 30">
<Line Stroke="Salmon" StrokeThickness="3"
StrokeDashArray="1"
X1="0" X2="500" Y1="30" Y2="30"/>
<Line Stroke="DeepPink" StrokeThickness="3"
StrokeDashArray="1,1"
X1="0" X2="500" Y1="30" Y2="30" />
<Line Stroke="RoyalBlue" StrokeThickness="3"
StrokeDashArray="1 1"
X1="0" X2="500" Y1="30" Y2="30" />
<Line Stroke="BurlyWood" StrokeThickness="3"
StrokeDashArray="3 2 1"
X1="0" X2="500" Y1="30" Y2="30" />
<Line Stroke="Aqua" StrokeThickness="3"
StrokeDashArray="4,1,2,2,5,3"
X1="0" X2="500" Y1="30" Y2="30" />
</StackPanel>
</StackPanel>
円
円はEllipseコントロールを使用します。
輪郭線の色や太さはLineと同じくStrokeとStrokThicknessを使用します。
円には面がありますので、この面の塗りつぶしとしてFill属性を使用します。
<StackPanel Orientation="Vertical" Margin="30">
<StackPanel Orientation="Horizontal" Margin="0, 0, 0, 10">
<Ellipse Stroke="Orange" StrokeThickness="3"
Width="50" Height="50" Margin="0, 0, 10, 0" />
<Ellipse Fill="Violet"
Width="50" Height="50" Margin="0, 0, 10, 0" />
<Ellipse Fill="LightYellow" Stroke="Brown"
Width="50" Height="50" />
</StackPanel>
</StackPanel>
長方形
長方形はRectangleコントロールを使用します。
基本的に設定する属性は円と同様ですが、ここに横線・縦線の歪曲具合を設定できます。
RadiusXで横方向の歪曲具合を、RadiusYで縦方向の歪曲具合を設定できます。
<StackPanel Orientation="Vertical" Margin="30">
<StackPanel Orientation="Horizontal" Margin="0, 0, 0, 20">
<Rectangle Stroke="Orange" StrokeThickness="3"
Width="50" Height="50" Margin="0, 0, 10, 0" />
<Rectangle Fill="LightBlue" Width="50" Height="50" Margin="0, 0, 10, 0" />
<Rectangle Fill="LightYellow" Stroke="Brown"
Width="50" Height="50" Margin="0, 0, 10, 0" />
<Rectangle Fill="Violet" RadiusX="50" RadiusY="10"
Width="50" Height="50" Margin="0, 0, 10, 0" />
<Rectangle Fill="Violet" RadiusX="10" RadiusY="50"
Width="50" Height="50" Margin="0, 0, 10, 0" />
<Rectangle Fill="Violet" RadiusX="30" RadiusY="30"
Width="50" Height="50" Margin="0, 0, 10, 0" />
<Rectangle Fill="Violet" Width="50" Height="50" Margin="0, 0, 10, 0" />
</StackPanel>
</StackPanel>
長方形の回転
長方形はRotation属性とCenterPoint、RotationAxis属性を組み合わせる事で回転することが可能です。
これによりダイヤのような形を表現することができます。
Rotationは回転する量で、CenterPoint、RotationAxisはどこを軸に回転するかを設定します。
CenterPoint属性はどこを中心点とするかを設定します。
RotationAxis属性はまだどういった設定が行われるのか理解できていません。
要勉強ですね。
いずれもVector3型を設定します。
例では中心点を中央にするようにVector3を定義しています。
public sealed partial class MainWindow : Window
{
private Vector3 CenterPoint { get; } = new(25);
public MainWindow()
{
// 省略
}
}
<StackPanel Orientation="Vertical" Margin="30">
<StackPanel Orientation="Horizontal" Margin="0, 0, 0, 20">
<Rectangle Fill="Violet" Rotation="45"
CenterPoint="{x:Bind CenterPoint}"
Width="50" Height="50" Margin="0, 0, 30, 0" />
<Rectangle Fill="Firebrick" Rotation="45"
RotationAxis="{x:Bind CenterPoint}" Width="50" Height="50" />
</StackPanel>
</StackPanel>
多角形
多角形にはPolygonコントロールを使用します。
Points属性に座標を指定することで多角形を表現します。
内容はx,y, x,y x,y ... , x,yとなるように設定します。
最初のx,yが始点で、最後のx,yが終点となります。
多角形では最後に終点より始点の位置まで線が引かれます。
<StackPanel Orientation="Vertical" Margin="30">
<StackPanel Orientation="Horizontal" Margin="0, 0, 0, 20">
<Polygon Stroke="Violet" Points="0,0, 30,30, 60,0, 80,50, 0,50"
Margin="0, 0, 10, 0" />
<Polygon Fill="Orange" Points="10,20, 20,00, 30,20, 40,0,
50,20, 60,0, 70,20, 70,50, 10,50"/>
</StackPanel>
</StackPanel>
終点が交差しない多角形
終点が交差しない多角形にはPolylineコントロールを使用します。
終点が交差しない多角形はジグザクな直線のイメージです。
基本的な設定は多角形と同様に座標をPoints属性に設定します。
この際、終点が交差しない多角形では、最後に終点より始点の位置まで線が引かれません。
<StackPanel Orientation="Vertical" Margin="30">
<StackPanel Orientation="Horizontal" Margin="0, 0, 0, 10">
<Polyline Stroke="Orange" StrokeThickness="3"
Points="0,30, 10,0, 60,0, 80,30, 60,60" Margin="0, 0, 10, 0" />
<Polyline Stroke="Violet" StrokeThickness="3"
Points="20,0, 0,0, 0,60, 70,60, 70,0, 50,0" />
</StackPanel>
</StackPanel>
パス
パスにはPathコントロールを使用します。
パスは設定の仕方に癖がありますのであまり理解に及んでおりません。
Data属性にパスの設定をします。
例ではM 0,0を始点とし、C 0,0 100,150 200,0でベジエ曲線を描き、H 250で直線を描いています。
<StackPanel Orientation="Vertical" Margin="30">
<StackPanel Orientation="Horizontal" Margin="0, 0, 0, 10">
<Path Stroke="Violet" StrokeThickness="3"
Data="M 0,0 C 0,0 100,150 200,0 H 250" />
</StackPanel>
</StackPanel>
おわりに
まだ他にも属性はありますが、今回学んだものついてはアウトプットできました。
仕様がよくわかっていないものもありますので、少しずつでも学んでいきたいですね。