SHAPE Archives - icodebroker

[C#/WINUI3/.NET6] Path 엘리먼트 : Data 속성에서 GeometryGroup 객체 사용하기

■ Path 엘리먼트의 Data 속성에서 GeometryGroup 객체를 사용하는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"    />
            <ColumnDefinition Width="10"   />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Canvas Grid.Column="0"
            Width="100"
            Height="170">
            <StackPanel>
                <TextBlock>
                    Composite geometry objects can be created using a GeometryGroup.
                </TextBlock>
                <Path
                    Margin="0 15 0 0"
                    StrokeThickness="4"
                    Stroke="Black"
                    Fill="#ccccff">
                    <Path.Data>
                        <GeometryGroup FillRule="EvenOdd">
                            <LineGeometry
                                StartPoint="10 10"
                                EndPoint="50 30" />
                            <EllipseGeometry
                                Center="40 70"
                                RadiusX="{x:Bind slider1.Value, Mode=TwoWay}"
                                RadiusY="{x:Bind slider2.Value, Mode=TwoWay}" />
                            <RectangleGeometry Rect="30 55 100 30" />
                        </GeometryGroup>
                    </Path.Data>
                </Path>
            </StackPanel>
        </Canvas>
        <StackPanel Grid.Column="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="220">
            <Slider Name="slider1"
                Header="RadiusX"
                Minimum="30"
                Maximum="40"
                StepFrequency="0.5"
                SmallChange="1"
                IsFocusEngagementEnabled="False" />
            <Slider Name="slider2"
                Header="RadiusY"
                Minimum="30"
                Maximum="50"
                StepFrequency="0.5"
                SmallChange="1"
                IsFocusEngagementEnabled="False" />
        </StackPanel>
    </Grid>
</Page>

<?xml version="1.0" encoding="utf-8"?>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Canvas Grid.Column="0"

Width="100"

Height="170">

Composite geometry objects can be created using a GeometryGroup.

</TextBlock>

<Path

Margin="0 15 0 0"

StrokeThickness="4"

Stroke="Black"

Fill="#ccccff">

<Path.Data>

<LineGeometry

StartPoint="10 10"

EndPoint="50 30" />

<EllipseGeometry

Center="40 70"

RadiusX="{x:Bind slider1.Value, Mode=TwoWay}"

RadiusY="{x:Bind slider2.Value, Mode=TwoWay}" />

</GeometryGroup>

</Path.Data>

</Path>

</StackPanel>

</Canvas>

<StackPanel Grid.Column="2"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="220">

<Slider Name="slider1"

Header="RadiusX"

Minimum="30"

Maximum="40"

StepFrequency="0.5"

SmallChange="1"

IsFocusEngagementEnabled="False" />

<Slider Name="slider2"

Header="RadiusY"

Minimum="30"

Maximum="50"

StepFrequency="0.5"

SmallChange="1"

IsFocusEngagementEnabled="False" />

</StackPanel>

</Grid>

</Page>

TestProject.zip

[C#/WINUI3/.NET6] Path 엘리먼트 사용하기

■ Path 엘리먼트를 사용하는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"    />
            <ColumnDefinition Width="10"   />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Canvas Grid.Column="0"
            Width="320"
            Height="200">
            <StackPanel>
                <TextBlock>
                    Draws a series of connected lines and curves.
                </TextBlock>
                <Path
                    StrokeThickness="{x:Bind pathSlider.Value, Mode=TwoWay}"
                    Stroke="DarkGoldenRod"
                    Data="M 10 100 C 100 25 300 250 400 75 H 200" />
            </StackPanel>
            <TextBlock Canvas.Left="0" Canvas.Top="130" Canvas.ZIndex="1"
                Text="Point #1 : (10,100)"
                Visibility="{x:Bind toggleSwitch.IsOn,Mode=OneWay}" />
            <TextBlock Canvas.Left="40" Canvas.Top="75" Canvas.ZIndex="1"
                Text="Point #2 : (100,25)"
                Visibility="{x:Bind toggleSwitch.IsOn, Mode=OneWay}" />
            <TextBlock Canvas.Left="280" Canvas.Top="175" Canvas.ZIndex="1"
                Text="Point #3 : (300,250)"
                Visibility="{x:Bind toggleSwitch.IsOn, Mode=OneWay}" />
            <TextBlock Canvas.Left="360" Canvas.Top="60" Canvas.ZIndex="1"
                Text="Point #4 : (400,75)"
                Visibility="{x:Bind toggleSwitch.IsOn, Mode=OneWay}" />
            <TextBlock Canvas.Left="170" Canvas.Top="60" Canvas.ZIndex="1"
                Text="Point #5 : (200,75)"
                Visibility="{x:Bind toggleSwitch.IsOn, Mode=OneWay}" />
        </Canvas>
        <StackPanel Grid.Column="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="220">
            <ToggleSwitch Name="toggleSwitch"
                Header="Show points"
                IsOn="False" />
            <Slider Name="pathSlider"
                Header="Stroke Thickness"
                Minimum="2"
                Maximum="10"
                StepFrequency="0.5"
                SmallChange="1"
                IsFocusEngagementEnabled="False" />
        </StackPanel>
    </Grid>
</Page>

<?xml version="1.0" encoding="utf-8"?>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Canvas Grid.Column="0"

Width="320"

Height="200">

Draws a series of connected lines and curves.

</TextBlock>

<Path

StrokeThickness="{x:Bind pathSlider.Value, Mode=TwoWay}"

Stroke="DarkGoldenRod"

Data="M 10 100 C 100 25 300 250 400 75 H 200" />

</StackPanel>

<TextBlock Canvas.Left="0" Canvas.Top="130" Canvas.ZIndex="1"

Text="Point #1 : (10,100)"

Visibility="{x:Bind toggleSwitch.IsOn,Mode=OneWay}" />

<TextBlock Canvas.Left="40" Canvas.Top="75" Canvas.ZIndex="1"

Text="Point #2 : (100,25)"

Visibility="{x:Bind toggleSwitch.IsOn, Mode=OneWay}" />

<TextBlock Canvas.Left="280" Canvas.Top="175" Canvas.ZIndex="1"

Text="Point #3 : (300,250)"

Visibility="{x:Bind toggleSwitch.IsOn, Mode=OneWay}" />

<TextBlock Canvas.Left="360" Canvas.Top="60" Canvas.ZIndex="1"

Text="Point #4 : (400,75)"

Visibility="{x:Bind toggleSwitch.IsOn, Mode=OneWay}" />

<TextBlock Canvas.Left="170" Canvas.Top="60" Canvas.ZIndex="1"

Text="Point #5 : (200,75)"

Visibility="{x:Bind toggleSwitch.IsOn, Mode=OneWay}" />

</Canvas>

<StackPanel Grid.Column="2"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="220">

<ToggleSwitch Name="toggleSwitch"

Header="Show points"

IsOn="False" />

<Slider Name="pathSlider"

Header="Stroke Thickness"

Minimum="2"

Maximum="10"

StepFrequency="0.5"

SmallChange="1"

IsFocusEngagementEnabled="False" />

</StackPanel>

</Grid>

</Page>

TestProject.zip

[C#/WINUI3/.NET6] Polyline 엘리먼트 사용하기

■ Polyline 엘리먼트를 사용하는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"    />
            <ColumnDefinition Width="10"   />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Canvas Grid.Column="0"
            Width="320"
            Height="170">
            <StackPanel>
                <TextBlock Margin="0 0 0 10">
                    Draws a series of connected straight lines.
                </TextBlock>
                <Polyline  Canvas.ZIndex="0"
                    Stroke="Black"
                    StrokeThickness="{x:Bind polyLineSlider.Value, Mode=TwoWay}"
                    Points="10 100 60 40 200 40 250 100" />
            </StackPanel>
            <TextBlock Canvas.Left="0" Canvas.Top="140" Canvas.ZIndex="1"
                Text="Point #1 : (10,100)"
                Visibility="{x:Bind showPointsToggleSwitch.IsOn,Mode=OneWay}" />
            <TextBlock Canvas.Left="50" Canvas.Top="40" Canvas.ZIndex="1"
                Text="Point #2 : (60,40)"
                Visibility="{x:Bind showPointsToggleSwitch.IsOn, Mode=OneWay}" />
            <TextBlock Canvas.Left="200" Canvas.Top="40" Canvas.ZIndex="1"
                Text="Point #3 : (200,40)"
                Visibility="{x:Bind showPointsToggleSwitch.IsOn, Mode=OneWay}" />
            <TextBlock Canvas.Left="240" Canvas.Top="140" Canvas.ZIndex="1"
                Text="Point #4: (250,100)"
                Visibility="{x:Bind showPointsToggleSwitch.IsOn, Mode=OneWay}" />
        </Canvas>
        <StackPanel Grid.Column="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="220">
            <ToggleSwitch Name="showPointsToggleSwitch"
                Header="Show points"
                IsOn="False" />
            <Slider Name="polyLineSlider"
                Header="Stroke Thickness"
                Minimum="2"
                Maximum="10"
                StepFrequency="0.5"
                SmallChange="1"
                IsFocusEngagementEnabled="False" />
        </StackPanel>
    </Grid>
</Page>

<?xml version="1.0" encoding="utf-8"?>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Canvas Grid.Column="0"

Width="320"

Height="170">

Draws a series of connected straight lines.

</TextBlock>

<Polyline Canvas.ZIndex="0"

Stroke="Black"

StrokeThickness="{x:Bind polyLineSlider.Value, Mode=TwoWay}"

Points="10 100 60 40 200 40 250 100" />

</StackPanel>

<TextBlock Canvas.Left="0" Canvas.Top="140" Canvas.ZIndex="1"

Text="Point #1 : (10,100)"

Visibility="{x:Bind showPointsToggleSwitch.IsOn,Mode=OneWay}" />

<TextBlock Canvas.Left="50" Canvas.Top="40" Canvas.ZIndex="1"

Text="Point #2 : (60,40)"

Visibility="{x:Bind showPointsToggleSwitch.IsOn, Mode=OneWay}" />

<TextBlock Canvas.Left="200" Canvas.Top="40" Canvas.ZIndex="1"

Text="Point #3 : (200,40)"

Visibility="{x:Bind showPointsToggleSwitch.IsOn, Mode=OneWay}" />

<TextBlock Canvas.Left="240" Canvas.Top="140" Canvas.ZIndex="1"

Text="Point #4: (250,100)"

Visibility="{x:Bind showPointsToggleSwitch.IsOn, Mode=OneWay}" />

</Canvas>

<StackPanel Grid.Column="2"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="220">

<ToggleSwitch Name="showPointsToggleSwitch"

Header="Show points"

IsOn="False" />

<Slider Name="polyLineSlider"

Header="Stroke Thickness"

Minimum="2"

Maximum="10"

StepFrequency="0.5"

SmallChange="1"

IsFocusEngagementEnabled="False" />

</StackPanel>

</Grid>

</Page>

TestProject.zip

[C#/WINUI3/.NET6] Line 엘리먼트 사용하기

■ Line 엘리먼트를 사용하는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"    />
            <ColumnDefinition Width="10"   />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Canvas Grid.Column="0"
            Width="100"
            Height="200">
            <Line Canvas.Top="50"
                X1="{x:Bind lineSlider1.Value, Mode=TwoWay}"
                Y1="{x:Bind lineSlider2.Value, Mode=TwoWay}"
                X2="{x:Bind lineSlider3.Value, Mode=TwoWay}"
                Y2="{x:Bind lineSlider4.Value, Mode=TwoWay}"
                Stroke="SteelBlue"
                StrokeThickness="{x:Bind lineSlider5.Value, Mode=TwoWay}" />
        </Canvas>
        <StackPanel Grid.Column="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="220">
            <Slider Name="lineSlider1"
                Header="Start point X"
                Minimum="0"
                Maximum="100"
                StepFrequency="0.5"
                SmallChange="1"
                IsFocusEngagementEnabled="False" />
            <Slider Name="lineSlider2"
                Header="Start point Y"
                Minimum="0"
                Maximum="100"
                StepFrequency="0.5"
                SmallChange="1"
                IsFocusEngagementEnabled="False" />
            <Slider Name="lineSlider3"
                Header="End point X"
                Minimum="200"
                Maximum="300"
                StepFrequency="0.5"
                SmallChange="1"
                IsFocusEngagementEnabled="False" />
            <Slider Name="lineSlider4"
                Header="End point Y"
                Minimum="0"
                Maximum="100"
                StepFrequency="0.5"
                SmallChange="1"
                IsFocusEngagementEnabled="False" />
            <Slider Name="lineSlider5"
                Header="Stroke Thickness"
                Minimum="5"
                Maximum="10"
                StepFrequency="0.5"
                SmallChange="1"
                IsFocusEngagementEnabled="False" />
        </StackPanel>
    </Grid>
</Page>

<?xml version="1.0" encoding="utf-8"?>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Canvas Grid.Column="0"

Width="100"

Height="200">

<Line Canvas.Top="50"

X1="{x:Bind lineSlider1.Value, Mode=TwoWay}"

Y1="{x:Bind lineSlider2.Value, Mode=TwoWay}"

X2="{x:Bind lineSlider3.Value, Mode=TwoWay}"

Y2="{x:Bind lineSlider4.Value, Mode=TwoWay}"

Stroke="SteelBlue"

StrokeThickness="{x:Bind lineSlider5.Value, Mode=TwoWay}" />

</Canvas>

<StackPanel Grid.Column="2"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="220">

<Slider Name="lineSlider1"

Header="Start point X"

Minimum="0"

Maximum="100"

StepFrequency="0.5"

SmallChange="1"

IsFocusEngagementEnabled="False" />

<Slider Name="lineSlider2"

Header="Start point Y"

Minimum="0"

Maximum="100"

StepFrequency="0.5"

SmallChange="1"

IsFocusEngagementEnabled="False" />

<Slider Name="lineSlider3"

Header="End point X"

Minimum="200"

Maximum="300"

StepFrequency="0.5"

SmallChange="1"

IsFocusEngagementEnabled="False" />

<Slider Name="lineSlider4"

Header="End point Y"

Minimum="0"

Maximum="100"

StepFrequency="0.5"

SmallChange="1"

IsFocusEngagementEnabled="False" />

<Slider Name="lineSlider5"

Header="Stroke Thickness"

Minimum="5"

Maximum="10"

StepFrequency="0.5"

SmallChange="1"

IsFocusEngagementEnabled="False" />

</StackPanel>

</Grid>

</Page>

TestProject.zip

[C#/WINUI3/.NET6] Polygon 엘리먼트 사용하기

■ Polygon 엘리먼트를 사용하는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"    />
            <ColumnDefinition Width="10"   />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Canvas Grid.Column="0"
            Width="320"
            Height="200">
            <StackPanel>
                <TextBlock>
                    A polygon is a connected series of lines that form a closed shape.
                </TextBlock>
                <Polygon
                    Margin="0 15 0 0"
                    Fill="SteelBlue"
                    Points="10 100 60 40 200 40 250 100"
                    StrokeThickness="{x:Bind polySlider.Value, Mode=TwoWay}"
                    Stroke="Black" />
            </StackPanel>
            <TextBlock Canvas.Left="0" Canvas.Top="150" Canvas.ZIndex="1"
                Text="Point #1 : (10,100)"
                Visibility="{x:Bind showPointsToggleSwitch.IsOn,Mode=OneWay}" />
            <TextBlock Canvas.Left="50" Canvas.Top="40" Canvas.ZIndex="1"
                Text="Point #2 : (60,40)"
                Visibility="{x:Bind showPointsToggleSwitch.IsOn, Mode=OneWay}" />
            <TextBlock Canvas.Left="200" Canvas.Top="40" Canvas.ZIndex="1"
                Text="Point #3 : (200,40)"
                 Visibility="{x:Bind showPointsToggleSwitch.IsOn, Mode=OneWay}" />
            <TextBlock Canvas.Left="240" Canvas.Top="150" Canvas.ZIndex="1"
                Text="Point #4 : (250,100)"
                Visibility="{x:Bind showPointsToggleSwitch.IsOn, Mode=OneWay}" />
        </Canvas>
        <StackPanel Grid.Column="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="220">
            <ToggleSwitch Name="showPointsToggleSwitch"
                Header="Show points"
                IsOn="False" />
            <Slider Name="polySlider"
                Header="Stroke Thickness"
                Minimum="2"
                Maximum="10"
                StepFrequency="0.5"
                SmallChange="1"
                IsFocusEngagementEnabled="False" />
        </StackPanel>
    </Grid>
</Page>

<?xml version="1.0" encoding="utf-8"?>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Canvas Grid.Column="0"

Width="320"

Height="200">

A polygon is a connected series of lines that form a closed shape.

</TextBlock>

<Polygon

Margin="0 15 0 0"

Fill="SteelBlue"

Points="10 100 60 40 200 40 250 100"

StrokeThickness="{x:Bind polySlider.Value, Mode=TwoWay}"

Stroke="Black" />

</StackPanel>

<TextBlock Canvas.Left="0" Canvas.Top="150" Canvas.ZIndex="1"

Text="Point #1 : (10,100)"

Visibility="{x:Bind showPointsToggleSwitch.IsOn,Mode=OneWay}" />

<TextBlock Canvas.Left="50" Canvas.Top="40" Canvas.ZIndex="1"

Text="Point #2 : (60,40)"

Visibility="{x:Bind showPointsToggleSwitch.IsOn, Mode=OneWay}" />

<TextBlock Canvas.Left="200" Canvas.Top="40" Canvas.ZIndex="1"

Text="Point #3 : (200,40)"

Visibility="{x:Bind showPointsToggleSwitch.IsOn, Mode=OneWay}" />

<TextBlock Canvas.Left="240" Canvas.Top="150" Canvas.ZIndex="1"

Text="Point #4 : (250,100)"

Visibility="{x:Bind showPointsToggleSwitch.IsOn, Mode=OneWay}" />

</Canvas>

<StackPanel Grid.Column="2"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="220">

<ToggleSwitch Name="showPointsToggleSwitch"

Header="Show points"

IsOn="False" />

<Slider Name="polySlider"

Header="Stroke Thickness"

Minimum="2"

Maximum="10"

StepFrequency="0.5"

SmallChange="1"

IsFocusEngagementEnabled="False" />

</StackPanel>

</Grid>

</Page>

TestProject.zip

[C#/WINUI3/.NET6] Rectangle 엘리먼트 사용하기

■ Rectangle 엘리먼트를 사용하는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"    />
            <ColumnDefinition Width="10"   />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Rectangle Grid.Column="0"
            Fill="SteelBlue"
            Width="{x:Bind slider1.Value, Mode=TwoWay}"
            Height="{x:Bind slider2.Value, Mode=TwoWay}"
            StrokeThickness="{x:Bind slider3.Value, Mode=TwoWay}"
            Stroke="Black"
            RadiusX="{x:Bind slider4.Value, Mode=TwoWay}"
            RadiusY="{x:Bind slider5.Value, Mode=TwoWay}" />
        <StackPanel Grid.Column="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="220">
            <Slider Name="slider1"
                Header="Width"
                Minimum="100"
                Maximum="150"
                StepFrequency="0.5"
                SmallChange="1"
                IsFocusEngagementEnabled="False" />
            <Slider Name="slider2"
                Header="Height"
                Minimum="100"
                Maximum="150"
                StepFrequency="0.5"
                SmallChange="1"
                IsFocusEngagementEnabled="False" />
            <Slider Name="slider3"
                Header="Stroke Thickness"
                Minimum="2"
                Maximum="10"
                StepFrequency="0.5"
                SmallChange="1"
                IsFocusEngagementEnabled="False" />
            <Slider Name="slider4"
                Header="Radius X"
                Minimum="0"
                Maximum="100"
                StepFrequency="0.5"
                SmallChange="1"
                IsFocusEngagementEnabled="False" />
            <Slider Name="slider5"
                Header="Radius Y"
                Minimum="0"
                Maximum="100"
                StepFrequency="0.5"
                SmallChange="1"
                IsFocusEngagementEnabled="False" />
        </StackPanel>
    </Grid>
</Page>

<?xml version="1.0" encoding="utf-8"?>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Rectangle Grid.Column="0"

Fill="SteelBlue"

Width="{x:Bind slider1.Value, Mode=TwoWay}"

Height="{x:Bind slider2.Value, Mode=TwoWay}"

StrokeThickness="{x:Bind slider3.Value, Mode=TwoWay}"

Stroke="Black"

RadiusX="{x:Bind slider4.Value, Mode=TwoWay}"

RadiusY="{x:Bind slider5.Value, Mode=TwoWay}" />

<StackPanel Grid.Column="2"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="220">

<Slider Name="slider1"

Header="Width"

Minimum="100"

Maximum="150"

StepFrequency="0.5"

SmallChange="1"

IsFocusEngagementEnabled="False" />

<Slider Name="slider2"

Header="Height"

Minimum="100"

Maximum="150"

StepFrequency="0.5"

SmallChange="1"

IsFocusEngagementEnabled="False" />

<Slider Name="slider3"

Header="Stroke Thickness"

Minimum="2"

Maximum="10"

StepFrequency="0.5"

SmallChange="1"

IsFocusEngagementEnabled="False" />

<Slider Name="slider4"

Header="Radius X"

Minimum="0"

Maximum="100"

StepFrequency="0.5"

SmallChange="1"

IsFocusEngagementEnabled="False" />

<Slider Name="slider5"

Header="Radius Y"

Minimum="0"

Maximum="100"

StepFrequency="0.5"

SmallChange="1"

IsFocusEngagementEnabled="False" />

</StackPanel>

</Grid>

</Page>

TestProject.zip

[C#/WINUI3/.NET6] Ellipse 엘리먼트 사용하기

■ Ellipse 엘리먼트를 사용하는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"    />
            <ColumnDefinition Width="10"   />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Ellipse Grid.Column="0"
            Width="{x:Bind slider2.Value, Mode=TwoWay}"
            Height="{x:Bind slider1.Value, Mode=TwoWay}"
            StrokeThickness="{x:Bind slider3.Value, Mode=TwoWay}"
            Stroke="Black"
            Fill="SteelBlue" />
        <StackPanel Grid.Column="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="220">
            <Slider Name="slider1"
                Header="Height"
                Minimum="100"
                Maximum="150"
                StepFrequency="0.5"
                SmallChange="1"
                IsFocusEngagementEnabled="False" />
            <Slider Name="slider2"
                Header="Width"
                Minimum="100"
                Maximum="150"
                StepFrequency="0.5"
                SmallChange="1"
                IsFocusEngagementEnabled="False" />
            <Slider Name="slider3"
                Header="Stroke Thickness"
                Minimum="2"
                Maximum="10"
                StepFrequency="0.5"
                SmallChange="1"
                IsFocusEngagementEnabled="False" />
        </StackPanel>
    </Grid>
</Page>

<?xml version="1.0" encoding="utf-8"?>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Ellipse Grid.Column="0"

Width="{x:Bind slider2.Value, Mode=TwoWay}"

Height="{x:Bind slider1.Value, Mode=TwoWay}"

StrokeThickness="{x:Bind slider3.Value, Mode=TwoWay}"

Stroke="Black"

Fill="SteelBlue" />

<StackPanel Grid.Column="2"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="220">

<Slider Name="slider1"

Header="Height"

Minimum="100"

Maximum="150"

StepFrequency="0.5"

SmallChange="1"

IsFocusEngagementEnabled="False" />

<Slider Name="slider2"

Header="Width"

Minimum="100"

Maximum="150"

StepFrequency="0.5"

SmallChange="1"

IsFocusEngagementEnabled="False" />

<Slider Name="slider3"

Header="Stroke Thickness"

Minimum="2"

Maximum="10"

StepFrequency="0.5"

SmallChange="1"

IsFocusEngagementEnabled="False" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using Microsoft.UI.Xaml.Controls;

namespace TestProject
{
    /// <summary>
    /// 메인 페이지
    /// </summary>
    public sealed partial class MainPage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainPage()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainPage()
        {
            InitializeComponent();
        }

        #endregion
    }
}

using Microsoft.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

}

#endregion

}

TestProject.zip

[C#/WPF] Polygon 엘리먼트 : Points 속성을 사용해 닫힌 도형 그리기

■ Polygon 엘리먼트의 Points 속성을 사용해 닫힌 도형을 그리는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:TestProject"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Polygon Grid.Row="0" Grid.Column="0"
            Fill="Blue"
            Points="10 110 60 10 110 110" />
        <Polygon Grid.Row="1" Grid.Column="0"
            StrokeThickness="4"
            Stroke="Black"
            Fill="Blue"
            Points="10 110 60 10 110 110" />
        <Polygon Grid.Row="0" Grid.Column="1"
            Fill="Blue"
            Points="10 110 110 110 110 10" />
        <Polygon Grid.Row="10" Grid.Column="1"
            StrokeThickness="4"
            Stroke="Black"
            Points="10 110 110 110 110 10" />
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="clr-namespace:TestProject"

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Polygon Grid.Row="0" Grid.Column="0"

Fill="Blue"

Points="10 110 60 10 110 110" />

<Polygon Grid.Row="1" Grid.Column="0"

StrokeThickness="4"

Stroke="Black"

Fill="Blue"

Points="10 110 60 10 110 110" />

<Polygon Grid.Row="0" Grid.Column="1"

Fill="Blue"

Points="10 110 110 110 110 10" />

<Polygon Grid.Row="10" Grid.Column="1"

StrokeThickness="4"

Stroke="Black"

Points="10 110 110 110 110 10" />

</Grid>

</Window>

TestProject.zip

[C#/WPF] Path 엘리먼트 : Data 속성에서 패스 미니 언어 사용하기

■ Path 엘리먼트의 Data 속성에서 패스 미니 언어를 사용하는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:TestProject"
    xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Style x:Key="CodeTextBlockStyleKey" TargetType="{x:Type TextBlock}">
            <Setter Property="HorizontalAlignment" Value="Left"        />
            <Setter Property="Padding"             Value="10"          />
            <Setter Property="Background"          Value="#33cccccc"   />
            <Setter Property="FontFamily"          Value="Courier New" />
            <Setter Property="TextWrapping"        Value="Wrap"        />
        </Style>
        <DrawingBrush x:Key="GridDrawingBrushKey"
            ViewportUnits="Absolute"
            Viewport="0 0 10 10"
            TileMode="Tile"
            options:Freeze="True">
            <DrawingBrush.Drawing>
                <DrawingGroup>
                    <DrawingGroup.Children>
                        <GeometryDrawing Brush="White">
                            <GeometryDrawing.Geometry>
                                <RectangleGeometry Rect="0 0 1 1" />
                            </GeometryDrawing.Geometry>
                        </GeometryDrawing>
                        <GeometryDrawing
                            Brush="#ccccff"
                            Geometry="M 0 0 L 1 0 1 0.1 0 0.1 Z" />
                        <GeometryDrawing
                            Brush="#ccccff"
                            Geometry="M 0 0 L 0 1 0.1 1 0.1 0 Z" />
                    </DrawingGroup.Children>
                </DrawingGroup>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </Window.Resources>
    <ScrollViewer>
        <StackPanel Margin="10">
            <TextBlock
                FontWeight="Bold">
                Line
            </TextBlock>
            <TextBlock Style="{StaticResource CodeTextBlockStyleKey}">M 10 50 L 200 70</TextBlock>
            <Border
                Margin="0 10 0 0"
                Width="250"
                Height="100"
                BorderThickness="3"
                BorderBrush="Black"
                Background="{StaticResource GridDrawingBrushKey}">
                <Path
                    StrokeThickness="3"
                    Stroke="Black"
                    Data="M 10 50 L 200 70" />
            </Border>
            <TextBlock
                Margin="0 10 0 0"
                FontWeight="Bold">
                Horizontal Line
            </TextBlock>
            <TextBlock Style="{StaticResource CodeTextBlockStyleKey}">M 10 50 H 200</TextBlock>
            <Border
                Margin="0 10 0 0"
                Width="250"
                Height="100"
                BorderThickness="3"
                BorderBrush="Black"
                Background="{StaticResource GridDrawingBrushKey}">
                <Path
                    StrokeThickness="3"
                    Stroke="Black"
                    Data="M 10 50 H 200" />
            </Border>
            <TextBlock
                Margin="0 10 0 0"
                FontWeight="Bold">
                Vertical Line
            </TextBlock>
            <TextBlock Style="{StaticResource CodeTextBlockStyleKey}">M 10 50 V 200</TextBlock>
            <Border
                Margin="0 10 0 0"
                Width="250"
                Height="210"
                BorderThickness="3"
                BorderBrush="Black"
                Background="{StaticResource GridDrawingBrushKey}">
                <Path
                    StrokeThickness="3"
                    Stroke="Black"
                    Data="M 10 50 V 200" />
            </Border>
            <TextBlock
                Margin="0 10 0 0"
                FontWeight="Bold">
                Cubic Bezier Curve
            </TextBlock>
            <TextBlock Style="{StaticResource CodeTextBlockStyleKey}">M 10 100 C 100 0 200 200 300 100</TextBlock>
            <Border
                Margin="0 10 0 0"
                Width="310"
                Height="200"
                BorderThickness="3"
                BorderBrush="Black"
                Background="{StaticResource GridDrawingBrushKey}">
                <Path
                    StrokeThickness="3"
                    Stroke="Black"
                    Data="M 10 100 C 100 0 200 200 300 100" />
            </Border>
            <TextBlock
                Margin="0 10 0 0"
                FontWeight="Bold">
                Quadratic Bezier Curve
            </TextBlock>
            <TextBlock Style="{StaticResource CodeTextBlockStyleKey}">M 10 100 Q 200 200 300 100</TextBlock>
            <Border
                Margin="0 10 0 0"
                Width="310"
                Height="200"
                BorderThickness="3"
                BorderBrush="Black"
                Background="{StaticResource GridDrawingBrushKey}">
                <Path
                    StrokeThickness="3"
                    Stroke="Black"
                    Data="M 10 100 Q 200 200 300 100" />
            </Border>
            <TextBlock
                Margin="0 10 0 0"
                FontWeight="Bold">
                Smooth Bezier Curve
            </TextBlock>
            <TextBlock Style="{StaticResource CodeTextBlockStyleKey}">M 10 100 C 35 0 135 0 160 100 S 285 200 310 100</TextBlock>
            <Border
                Margin="0 10 0 0"
                Width="320"
                Height="200"
                BorderThickness="3"
                BorderBrush="Black"
                Background="{StaticResource GridDrawingBrushKey}">
                <Path
                    StrokeThickness="3"
                    Stroke="Black"
                    Data="M 10 100 C 35 0 135 0 160 100 S 285 200 310 100" />
            </Border>
            <TextBlock
                Margin="0 10 0 0"
                FontWeight="Bold">
                Elliptical Arc
            </TextBlock>
            <TextBlock Style="{StaticResource CodeTextBlockStyleKey}">M 10 100 A 100 50 45 1 0 200 100</TextBlock>
            <Border
                Margin="0 10 0 0"
                Width="310"
                Height="300"
                BorderThickness="3"
                BorderBrush="Black"
                Background="{StaticResource GridDrawingBrushKey}">
                <Path
                    StrokeThickness="3"
                    Stroke="Black"
                    Data="M 10 100 A 100 50 45 1 0 200 100" />
            </Border>
            <TextBlock
                Margin="0 10 0 0"
                FontWeight="Bold">
                Close Path Command
            </TextBlock>
            <TextBlock Style="{StaticResource CodeTextBlockStyleKey}">M 10 100 L 100 100 100 50 Z</TextBlock>
            <Border
                Margin="0 10 0 0"
                Width="250"
                Height="200"
                BorderThickness="3"
                BorderBrush="Black"
                Background="{StaticResource GridDrawingBrushKey}">
                <Path
                    StrokeThickness="3"
                    Stroke="Black"
                    Data="M 10 100 L 100 100 100 50 Z" />
            </Border>
            <TextBlock
                Margin="0 10 0 0"
                FontWeight="Bold">
                Multiple Subpaths
            </TextBlock>
            <TextBlock Style="{StaticResource CodeTextBlockStyleKey}">M 10 100 L 100 100 100 50 Z M 10 10 100 10 100 40 Z</TextBlock>
            <Border
                Margin="0 10 0 0"
                Width="250"
                Height="200"
                BorderThickness="3"
                BorderBrush="Black"
                Background="{StaticResource GridDrawingBrushKey}">
                <Path
                    Stroke="Black"
                    StrokeThickness="3"
                    Data="M 10 100 L 100 100 100 50 Z M 10 10 100 10 100 40 Z" />
            </Border>
        </StackPanel>
    </ScrollViewer>
</Window>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="clr-namespace:TestProject"

xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

</Style>

<DrawingBrush x:Key="GridDrawingBrushKey"

ViewportUnits="Absolute"

Viewport="0 0 10 10"

TileMode="Tile"

options:Freeze="True">

<DrawingBrush.Drawing>

<DrawingGroup.Children>

<GeometryDrawing.Geometry>

</GeometryDrawing.Geometry>

</GeometryDrawing>

<GeometryDrawing

Brush="#ccccff"

Geometry="M 0 0 L 1 0 1 0.1 0 0.1 Z" />

<GeometryDrawing

Brush="#ccccff"

Geometry="M 0 0 L 0 1 0.1 1 0.1 0 Z" />

</DrawingGroup.Children>

</DrawingGroup>

</DrawingBrush.Drawing>

</DrawingBrush>

</Window.Resources>

<TextBlock

FontWeight="Bold">

Line

</TextBlock>

<Border

Margin="0 10 0 0"

Width="250"

Height="100"

BorderThickness="3"

BorderBrush="Black"

Background="{StaticResource GridDrawingBrushKey}">

<Path

StrokeThickness="3"

Stroke="Black"

Data="M 10 50 L 200 70" />

</Border>

<TextBlock

Margin="0 10 0 0"

FontWeight="Bold">

Horizontal Line

</TextBlock>

<Border

Margin="0 10 0 0"

Width="250"

Height="100"

BorderThickness="3"

BorderBrush="Black"

Background="{StaticResource GridDrawingBrushKey}">

<Path

StrokeThickness="3"

Stroke="Black"

Data="M 10 50 H 200" />

</Border>

<TextBlock

Margin="0 10 0 0"

FontWeight="Bold">

Vertical Line

</TextBlock>

<Border

Margin="0 10 0 0"

Width="250"

Height="210"

BorderThickness="3"

BorderBrush="Black"

Background="{StaticResource GridDrawingBrushKey}">

<Path

StrokeThickness="3"

Stroke="Black"

Data="M 10 50 V 200" />

</Border>

<TextBlock

Margin="0 10 0 0"

FontWeight="Bold">

Cubic Bezier Curve

</TextBlock>

<Border

Margin="0 10 0 0"

Width="310"

Height="200"

BorderThickness="3"

BorderBrush="Black"

Background="{StaticResource GridDrawingBrushKey}">

<Path

StrokeThickness="3"

Stroke="Black"

Data="M 10 100 C 100 0 200 200 300 100" />

</Border>

<TextBlock

Margin="0 10 0 0"

FontWeight="Bold">

Quadratic Bezier Curve

</TextBlock>

<Border

Margin="0 10 0 0"

Width="310"

Height="200"

BorderThickness="3"

BorderBrush="Black"

Background="{StaticResource GridDrawingBrushKey}">

<Path

StrokeThickness="3"

Stroke="Black"

Data="M 10 100 Q 200 200 300 100" />

</Border>

<TextBlock

Margin="0 10 0 0"

FontWeight="Bold">

Smooth Bezier Curve

</TextBlock>

<Border

Margin="0 10 0 0"

Width="320"

Height="200"

BorderThickness="3"

BorderBrush="Black"

Background="{StaticResource GridDrawingBrushKey}">

<Path

StrokeThickness="3"

Stroke="Black"

Data="M 10 100 C 35 0 135 0 160 100 S 285 200 310 100" />

</Border>

<TextBlock

Margin="0 10 0 0"

FontWeight="Bold">

Elliptical Arc

</TextBlock>

<Border

Margin="0 10 0 0"

Width="310"

Height="300"

BorderThickness="3"

BorderBrush="Black"

Background="{StaticResource GridDrawingBrushKey}">

<Path

StrokeThickness="3"

Stroke="Black"

Data="M 10 100 A 100 50 45 1 0 200 100" />

</Border>

<TextBlock

Margin="0 10 0 0"

FontWeight="Bold">

Close Path Command

</TextBlock>

<Border

Margin="0 10 0 0"

Width="250"

Height="200"

BorderThickness="3"

BorderBrush="Black"

Background="{StaticResource GridDrawingBrushKey}">

<Path

StrokeThickness="3"

Stroke="Black"

Data="M 10 100 L 100 100 100 50 Z" />

</Border>

<TextBlock

Margin="0 10 0 0"

FontWeight="Bold">

Multiple Subpaths

</TextBlock>

<Border

Margin="0 10 0 0"

Width="250"

Height="200"

BorderThickness="3"

BorderBrush="Black"

Background="{StaticResource GridDrawingBrushKey}">

<Path

Stroke="Black"

StrokeThickness="3"

Data="M 10 100 L 100 100 100 50 Z M 10 10 100 10 100 40 Z" />

</Border>

</StackPanel>

</ScrollViewer>

</Window>

TestProject.zip

[C#/WPF] Shape 클래스 : StrokeDashArray/StrokeDashOffset 속성 사용하기

■ Shape 클래스의 StrokeDashArray/StrokeDashOffset 속성을 사용하는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="20"   />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" Grid.Column="0"
            Margin="10">
            <Bold>StrokeDashArray</Bold> : 4,2<LineBreak />
            <Bold>StrokeDashOffset</Bold> : 0
        </TextBlock>
        <Rectangle Grid.Row="1" Grid.Column="0"
            Width="150"
            Height="150"
            StrokeThickness="3"
            Stroke="Black"
            StrokeDashArray="4 2"
            StrokeDashOffset="0"
            Fill="RoyalBlue" />
        <TextBlock Grid.Row="0" Grid.Column="1"
            Margin="10">
            <Bold>StrokeDashArray</Bold> : 4,2<LineBreak />
            <Bold>StrokeDashOffset</Bold> : 1
        </TextBlock>
        <Rectangle Grid.Row="1" Grid.Column="1"
            Width="150"
            Height="150"
            StrokeThickness="3"
            Stroke="Black"
            StrokeDashArray="4 2"
            StrokeDashOffset="1"
            Fill="RoyalBlue" />
        <TextBlock Grid.Row="0" Grid.Column="2"
            Margin="10">
            <Bold>StrokeDashArray</Bold> : 4,2<LineBreak />
            <Bold>StrokeDashOffset</Bold> : 2
        </TextBlock>
        <Rectangle Grid.Row="1" Grid.Column="2"
            Width="150"
            Height="150"
            StrokeThickness="3"
            Stroke="Black"
            StrokeDashArray="4 2"
            StrokeDashOffset="2"
            Fill="RoyalBlue" />
        <TextBlock Grid.Row="3" Grid.Column="0"
            Margin="10">
            <Bold>StrokeDashArray</Bold> : 4,1,4,3<LineBreak />
            <Bold>StrokeDashOffset</Bold> : 1
        </TextBlock>
        <Ellipse Grid.Row="4" Grid.Column="0"
            Width="150"
            Height="150"
            StrokeThickness="3"
            Stroke="Black"
            StrokeDashArray="4 1 4 3"
            StrokeDashOffset="1"
            Fill="RoyalBlue" />
        <TextBlock Grid.Row="3" Grid.Column="1"
            Margin="10">
            <Bold>StrokeDashArray</Bold> : 1,4,1,2<LineBreak />
            <Bold>StrokeDashOffset</Bold> : 1
        </TextBlock>
        <Ellipse Grid.Row="4" Grid.Column="1"
            Width="150"
            Height="150"
            StrokeThickness="3"
            Stroke="Black"
            StrokeDashArray="1 4 1 2"
            StrokeDashOffset="1"
            Fill="RoyalBlue" />
        <TextBlock Grid.Row="3" Grid.Column="2"
            Margin="10">
            <Bold>StrokeDashArray</Bold> : 1<LineBreak />
            <Bold>StrokeDashOffset</Bold> : 1
        </TextBlock>
        <Ellipse Grid.Row="4" Grid.Column="2"
            Width="150"
            Height="150"
            StrokeThickness="3"
            Stroke="Black"
            StrokeDashArray="1"
            StrokeDashOffset="1"
            Fill="RoyalBlue" />
    </Grid>
</Window>

100

101

102

103

104

105

106

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBlock Grid.Row="0" Grid.Column="0"

Margin="10">

<Bold>StrokeDashArray</Bold> : 4,2<LineBreak />

<Bold>StrokeDashOffset</Bold> : 0

</TextBlock>

<Rectangle Grid.Row="1" Grid.Column="0"

Width="150"

Height="150"

StrokeThickness="3"

Stroke="Black"

StrokeDashArray="4 2"

StrokeDashOffset="0"

Fill="RoyalBlue" />

<TextBlock Grid.Row="0" Grid.Column="1"

Margin="10">

<Bold>StrokeDashArray</Bold> : 4,2<LineBreak />

<Bold>StrokeDashOffset</Bold> : 1

</TextBlock>

<Rectangle Grid.Row="1" Grid.Column="1"

Width="150"

Height="150"

StrokeThickness="3"

Stroke="Black"

StrokeDashArray="4 2"

StrokeDashOffset="1"

Fill="RoyalBlue" />

<TextBlock Grid.Row="0" Grid.Column="2"

Margin="10">

<Bold>StrokeDashArray</Bold> : 4,2<LineBreak />

<Bold>StrokeDashOffset</Bold> : 2

</TextBlock>

<Rectangle Grid.Row="1" Grid.Column="2"

Width="150"

Height="150"

StrokeThickness="3"

Stroke="Black"

StrokeDashArray="4 2"

StrokeDashOffset="2"

Fill="RoyalBlue" />

<TextBlock Grid.Row="3" Grid.Column="0"

Margin="10">

<Bold>StrokeDashArray</Bold> : 4,1,4,3<LineBreak />

<Bold>StrokeDashOffset</Bold> : 1

</TextBlock>

<Ellipse Grid.Row="4" Grid.Column="0"

Width="150"

Height="150"

StrokeThickness="3"

Stroke="Black"

StrokeDashArray="4 1 4 3"

StrokeDashOffset="1"

Fill="RoyalBlue" />

<TextBlock Grid.Row="3" Grid.Column="1"

Margin="10">

<Bold>StrokeDashArray</Bold> : 1,4,1,2<LineBreak />

<Bold>StrokeDashOffset</Bold> : 1

</TextBlock>

<Ellipse Grid.Row="4" Grid.Column="1"

Width="150"

Height="150"

StrokeThickness="3"

Stroke="Black"

StrokeDashArray="1 4 1 2"

StrokeDashOffset="1"

Fill="RoyalBlue" />

<TextBlock Grid.Row="3" Grid.Column="2"

Margin="10">

<Bold>StrokeDashArray</Bold> : 1<LineBreak />

<Bold>StrokeDashOffset</Bold> : 1

</TextBlock>

<Ellipse Grid.Row="4" Grid.Column="2"

Width="150"

Height="150"

StrokeThickness="3"

Stroke="Black"

StrokeDashArray="1"

StrokeDashOffset="1"

Fill="RoyalBlue" />

</Grid>

</Window>

TestProject.zip

[C#/WPF] Path 엘리먼트 : FlowDirection 속성 사용하기

■ Path 엘리먼트의 FlowDirection 속성을 설정하는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <StackPanel
        VerticalAlignment="Center"
        FlowDirection="RightToLeft">
        <Path
            Margin="20"
            StrokeThickness="4"
            Stroke="Blue">
            <Path.Data>
                <GeometryGroup>
                    <LineGeometry StartPoint="300 10" EndPoint="350 30" />
                    <LineGeometry StartPoint=" 10 30" EndPoint="352 30" />
                    <LineGeometry StartPoint="300 50" EndPoint="350 30" />
                </GeometryGroup>
            </Path.Data>
        </Path>
        <Path
            Margin="20"
            StrokeThickness="4"
            Stroke="Red"
            FlowDirection="RightToLeft">
            <Path.Data>
                <GeometryGroup>
                    <LineGeometry StartPoint="300 10" EndPoint="350 30" />
                    <LineGeometry StartPoint=" 10 30" EndPoint="352 30" />
                    <LineGeometry StartPoint="300 50" EndPoint="350 30" />
                </GeometryGroup>
            </Path.Data>
        </Path>
        <Path
            Margin="20"
            StrokeThickness="4"
            Stroke="Green"
            FlowDirection="LeftToRight">
            <Path.Data>
                <GeometryGroup >
                    <LineGeometry StartPoint="300 10" EndPoint="350 30" />
                    <LineGeometry StartPoint=" 10 30" EndPoint="352 30" />
                    <LineGeometry StartPoint="300 50" EndPoint="350 30" />
                </GeometryGroup>
            </Path.Data>
        </Path>
    </StackPanel>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<StackPanel

VerticalAlignment="Center"

FlowDirection="RightToLeft">

<Path

Margin="20"

StrokeThickness="4"

Stroke="Blue">

<Path.Data>

</GeometryGroup>

</Path.Data>

</Path>

<Path

Margin="20"

StrokeThickness="4"

Stroke="Red"

FlowDirection="RightToLeft">

<Path.Data>

</GeometryGroup>

</Path.Data>

</Path>

<Path

Margin="20"

StrokeThickness="4"

Stroke="Green"

FlowDirection="LeftToRight">

<Path.Data>

</GeometryGroup>

</Path.Data>

</Path>

</StackPanel>

</Window>

TestProject.zip

[C#/WPF/.NET6] Line 엘리먼트 : StrokeDashArray 속성을 사용해 점선 만들기

■ Line 엘리먼트의 StrokeDashArray 속성을 사용해 다양한 모양의 점선을 만드는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Style TargetType="Line" >
            <Setter Property="X1"              Value="0"    />
            <Setter Property="X2"              Value="600"  />
            <Setter Property="Stroke"          Value="Blue" />
            <Setter Property="StrokeThickness" Value="3"    />
            <Setter Property="Margin"          Value="10"   />
        </Style>
    </Window.Resources>
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <Line StrokeDashArray="1"           />
        <Line StrokeDashArray="1 1"         />
        <Line StrokeDashArray="1 6"         />
        <Line StrokeDashArray="6 1"         />
        <Line StrokeDashArray="0.25 1"      />
        <Line StrokeDashArray="4 1 1 1 1 1" />
        <Line StrokeDashArray="1 2 4"       />
        <Line StrokeDashArray="4 2 1"       />
    </StackPanel>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

</Style>

</Window.Resources>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

</StackPanel>

</Window>

TestProject.zip

[C#/MAUI/.NET6] RoundRectangle 엘리먼트 : CornerRadius 속성 사용하기

■ RoundRectangle 엘리먼트의 CornerRadius 속성을 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<RoundRectangle
    WidthRequest="200"
    HeightRequest="200"
    CornerRadius="50"
    StrokeThickness="3"
    Stroke="Black"
    Fill="Blue" />

<RoundRectangle

WidthRequest="200"

HeightRequest="200"

CornerRadius="50"

StrokeThickness="3"

Stroke="Black"

Fill="Blue" />

[C#/MAUI/.NET6] Polyline 엘리먼트 : FillRule 속성 사용하기

■ Polyline 엘리먼트의 FillRule 속성을 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Polyline
    StrokeThickness="3"
    Stroke="Yellow"
    Fill="Black"
    FillRule="Nonzero"
    Points="0 48 0 144 96 150 100 0 192 0 192 96 50 96 48 192 150 200 144 48" />

<Polyline

StrokeThickness="3"

Stroke="Yellow"

Fill="Black"

FillRule="Nonzero"

Points="0 48 0 144 96 150 100 0 192 0 192 96 50 96 48 192 150 200 144 48" />

[C#/MAUI/.NET6] Rectangle 엘리먼트 : RadiusX/RadiusY 속성 사용하기

■ Rectangle 엘리먼트의 RadiusX/RadiusY 속성을 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Rectangle
    WidthRequest="200"
    HeightRequest="200"
    RadiusX="50"
    RadiusY="50"
    StrokeThickness="3"
    Stroke="Black"
    Fill="Blue" />

<Rectangle

WidthRequest="200"

HeightRequest="200"

RadiusX="50"

RadiusY="50"

StrokeThickness="3"

Stroke="Black"

Fill="Blue" />

[C#/MAUI/.NET6] Polyline 엘리먼트 : StrokeThickness/StrokeDashArray/StrokeDashOffset 속성 사용하기

■ Polyline 엘리먼트의 StrokeThickness/StrokeDashArray/StrokeDashOffset 속성을 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Polyline
    StrokeThickness="2"
    StrokeDashArray="1 1"
    StrokeDashOffset="6"
    Stroke="Red"
    Points="0 0 10 30 15 0 18 60 23 30 35 30 40 0 43 60 48 30 100 30" />

<Polyline

StrokeThickness="2"

StrokeDashArray="1 1"

StrokeDashOffset="6"

Stroke="Red"

Points="0 0 10 30 15 0 18 60 23 30 35 30 40 0 43 60 48 30 100 30" />

[C#/MAUI/.NET6] Polygon 엘리먼트 : FillRule 속성 사용하기

■ Polygon 엘리먼트의 FillRule 속성을 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Polygon
    StrokeThickness="3"
    Stroke="Yellow"
    Fill="Black"
    FillRule="Nonzero"
    Points="0 48 0 144 96 150 100 0 192 0 192 96 50 96 48 192 150 200 144 48" />

<Polygon

StrokeThickness="3"

Stroke="Yellow"

Fill="Black"

FillRule="Nonzero"

Points="0 48 0 144 96 150 100 0 192 0 192 96 50 96 48 192 150 200 144 48" />

[C#/MAUI/.NET6] Path 엘리먼트 : RenderTransform 속성에서 MatrixTransform 객체 단순 설정하기

■ Path 엘리먼트의 RenderTransform 속성에서 MatrixTransform 객체를 단순 설정하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Path
    HorizontalOptions="Center"
    VerticalOptions="Center"
    WidthRequest="100"
    HeightRequest="100"
    Stroke="Black"
    Aspect="Uniform"
    RenderTransform="1.5 1 0 1 10 100"
    Data="M 13.908992,16.207977 L 32.000049 16.207977 32.000049 31.999985 13.908992 30.109983 Z" />

<Path

HorizontalOptions="Center"

VerticalOptions="Center"

WidthRequest="100"

HeightRequest="100"

Stroke="Black"

Aspect="Uniform"

RenderTransform="1.5 1 0 1 10 100"

Data="M 13.908992,16.207977 L 32.000049 16.207977 32.000049 31.999985 13.908992 30.109983 Z" />

[C#/MAUI/.NET6] Polygon 엘리먼트 : StrokeThickness/StrokeDashArray/StrokeDashOffset 속성 사용하기

■ Polygon 엘리먼트의 StrokeThickness/StrokeDashArray/StrokeDashOffset 속성을 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Polygon
    StrokeThickness="5"
    StrokeDashArray="1 1"
    StrokeDashOffset="6"
    Stroke="Green"
    Fill="AliceBlue"
    Points="40 10 70 80 10 50" />

<Polygon

StrokeThickness="5"

StrokeDashArray="1 1"

StrokeDashOffset="6"

Stroke="Green"

Fill="AliceBlue"

Points="40 10 70 80 10 50" />

[C#/MAUI/.NET8] PathGeometry 엘리먼트 사용하기

■ PathGeometry 엘리먼트를 사용하는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Path
        HorizontalOptions="Center"
        VerticalOptions="Center"
        WidthRequest="300"
        HeightRequest="300"
        StrokeThickness="10"
        Stroke="Black"
        Fill="Orange"
        BackgroundColor="Yellow"
        Aspect="Fill">
        <Path.Data>
            <PathGeometry>
                <PathGeometry.Figures>
                    <PathFigureCollection>
                        <PathFigure
                            StartPoint="10,100"
                            IsClosed="True">
                            <PathFigure.Segments>
                                <PathSegmentCollection>
                                    <LineSegment Point="100,100" />
                                    <LineSegment Point="100,50"  />
                                </PathSegmentCollection>
                            </PathFigure.Segments>
                        </PathFigure>
                    </PathFigureCollection>
                </PathGeometry.Figures>
            </PathGeometry>
        </Path.Data>
    </Path>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

<Path

HorizontalOptions="Center"

VerticalOptions="Center"

WidthRequest="300"

HeightRequest="300"

StrokeThickness="10"

Stroke="Black"

Fill="Orange"

BackgroundColor="Yellow"

Aspect="Fill">

<Path.Data>

<PathGeometry.Figures>

<PathFigure

StartPoint="10,100"

IsClosed="True">

<PathFigure.Segments>

</PathSegmentCollection>

</PathFigure.Segments>

</PathFigure>

</PathFigureCollection>

</PathGeometry.Figures>

</PathGeometry>

</Path.Data>

</Path>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] Line 엘리먼트 : StrokeDashOffset/StrokeDashArray 속성 사용하기

■ Line 엘리먼트의 StrokeDashOffset/StrokeDashArray 속성을 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Line
    X1="40"
    Y1="0"
    X2="0"
    Y2="120"
    StrokeDashOffset="6"
    StrokeDashArray="1,1"
    Stroke="DarkBlue" />

<Line

X1="40"

Y1="0"

X2="0"

Y2="120"

StrokeDashOffset="6"

StrokeDashArray="1,1"

Stroke="DarkBlue" />

[C#/MAUI/.NET6] Path 엘리먼트 : Data 속성에서 패스 미니 언어 사용하기

■ Path 엘리먼트의 Data 속성에서 패스 미니 언어를 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Path
    HorizontalOptions="Start"
    Stroke="Black"
    Aspect="Uniform"
    Data="M 10 100 L 100 100 100 50 Z" />

<Path

HorizontalOptions="Start"

Stroke="Black"

Aspect="Uniform"

Data="M 10 100 L 100 100 100 50 Z" />

[C#/MAUI/.NET6] Line 엘리먼트 : Stroke 속성 사용하기

■ Line 엘리먼트의 Stroke 속성을 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Line
    X1="40"
    Y1="0"
    X2="0"
    Y2="120"
    Stroke="Red" />

<Line

X1="40"

Y1="0"

X2="0"

Y2="120"

Stroke="Red" />

[C#/MAUI/.NET6] Polyline 엘리먼트 : StrokeLineJoin 속성 사용하기

■ Polyline 엘리먼트의 StrokeLineJoin 속성을 사용하는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Grid
        Margin="10"
        ColumnDefinitions="*,Auto,*"
        RowDefinitions="*,Auto,*,Auto,*,Auto,*">
        <Polyline Grid.Row="1" Grid.Column="1"
            StrokeThickness="20"
            Stroke="DarkBlue"
            StrokeLineJoin="Miter"
            Points="20 20 250 50 20 120" />
        <Polyline Grid.Row="3" Grid.Column="1"
            StrokeThickness="20"
            Stroke="DarkBlue"
            StrokeLineJoin="Bevel"
            Points="20 20 250 50 20 120" />
        <Polyline Grid.Row="5" Grid.Column="1"
            StrokeThickness="20"
            Stroke="DarkBlue"
            StrokeLineJoin="Round"
            Points="20 20 250 50 20 120" />
    </Grid>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

<Grid

Margin="10"

ColumnDefinitions="*,Auto,*"

RowDefinitions="*,Auto,*,Auto,*,Auto,*">

<Polyline Grid.Row="1" Grid.Column="1"

StrokeThickness="20"

Stroke="DarkBlue"

StrokeLineJoin="Miter"

Points="20 20 250 50 20 120" />

<Polyline Grid.Row="3" Grid.Column="1"

StrokeThickness="20"

Stroke="DarkBlue"

StrokeLineJoin="Bevel"

Points="20 20 250 50 20 120" />

<Polyline Grid.Row="5" Grid.Column="1"

StrokeThickness="20"

Stroke="DarkBlue"

StrokeLineJoin="Round"

Points="20 20 250 50 20 120" />

</Grid>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] Line 엘리먼트 : StrokeLineCap 속성 사용하기

■ Line 엘리먼트의 StrokeLineCap 속성을 사용하는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Grid
        Margin="10"
        ColumnDefinitions="*,Auto,*"
        RowDefinitions="*,Auto,*,Auto,*,Auto,*">
        <Line Grid.Row="1" Grid.Column="1"
            HorizontalOptions="Center"
            X1="0"
            Y1="0"
            X2="300"
            Y2="0"
            StrokeThickness="12"
            StrokeLineCap="Flat"
            Stroke="Red" />
        <Line Grid.Row="3" Grid.Column="1"
            HorizontalOptions="Center"
            X1="0"
            Y1="0"
            X2="300"
            Y2="0"
            StrokeThickness="12"
            StrokeLineCap="Square"
            Stroke="Green" />
        <Line Grid.Row="5" Grid.Column="1"
            HorizontalOptions="Center"
            X1="0"
            Y1="0"
            X2="300"
            Y2="0"
            StrokeThickness="12"
            StrokeLineCap="Round"
            Stroke="Blue" />
    </Grid>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

<Grid

Margin="10"

ColumnDefinitions="*,Auto,*"

RowDefinitions="*,Auto,*,Auto,*,Auto,*">

<Line Grid.Row="1" Grid.Column="1"

HorizontalOptions="Center"

X1="0"

Y1="0"

X2="300"

Y2="0"

StrokeThickness="12"

StrokeLineCap="Flat"

Stroke="Red" />

<Line Grid.Row="3" Grid.Column="1"

HorizontalOptions="Center"

X1="0"

Y1="0"

X2="300"

Y2="0"

StrokeThickness="12"

StrokeLineCap="Square"

Stroke="Green" />

<Line Grid.Row="5" Grid.Column="1"

HorizontalOptions="Center"

X1="0"

Y1="0"

X2="300"

Y2="0"

StrokeThickness="12"

StrokeLineCap="Round"

Stroke="Blue" />

</Grid>

</ContentPage>

TestProject.zip