[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