[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

Post Views: 19

.NET6 2D C# CONTROL GRAPHICS MICROSOFT PACKAGED SHAPE WINUI3

icodebroker

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

분류

보관함