COMMUNITY TOOLKIT Archives - 9 중 9 번째 페이지

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] Segmented 엘리먼트 : 세그먼트를 만들기

■ Segmented 엘리먼트를 사용해 세그먼트를 만드는 방법을 보여준다. • CommunityToolkit.WinUI.Controls.Segmented 누겟을 별도로 설치한다. • 세그먼트는 항목 2-5개일 경우 가장 적합하며 오버플로우를 지원하지

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] RichTextBlockFormatter 클래스 : FormatInlines 메소드를 사용해 C# 소스 코드를 RichTextBlock 객체에 표시하기 2

■ RichTextBlockFormatter 클래스의 FormatInlines 메소드를 사용해 C# 소스 코드를 RichTextBlock 객체에 표시하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] RichTextBlockFormatter 클래스 : FormatInlines 메소드를 사용해 C# 소스 코드를 RichTextBlock 객체에 표시하기 1

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] DockPanel 엘리먼트 : 도킹 패널 만들기

■ DockPanel 엘리먼트를 사용해 도킹 패널을 만드는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를 None으로

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] RangeSelector 엘리먼트 : 범위 선택기 만들기

■ RangeSelector 엘리먼트를 사용해 범위 선택기를 만드는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를 None으로

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] RadialGauge 엘리먼트 : 라디오 게이지 만들기 1

■ RadialGauge 엘리먼트를 사용해 라디오 게이지를 만드는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를 None으로

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] MarkdownTextBlock 클래스 : MarkdownRendered 이벤트를 사용해 Text 속성 변경시 문서 크기를 컨트롤 크기로 설정하기 1

■ MarkdownTextBlock 클래스의 MarkdownRendered 이벤트를 사용해 Text 속성 변경시 문서 크기를 컨트롤 크기로 설정하는 방법을 보여준다. ▶ 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"
    xmlns:control="using:CommunityToolkit.WinUI.UI.Controls"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid
        Margin="10"
        Background="DarkGray">
        <control:MarkdownTextBlock x:Name="markdownTextBlock"
            Background="White"
            Padding="10" />
        <Button Name="changeTextButton"
            HorizontalAlignment="Right"
            VerticalAlignment="Bottom"
            Margin="10"
            Width="100"
            Height="30"
            Content="텍스트 변경" />
    </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"

xmlns:control="using:CommunityToolkit.WinUI.UI.Controls"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid

Margin="10"

Background="DarkGray">

<control:MarkdownTextBlock x:Name="markdownTextBlock"

Background="White"

Padding="10" />

<Button Name="changeTextButton"

HorizontalAlignment="Right"

VerticalAlignment="Bottom"

Margin="10"

Width="100"

Height="30"

Content="텍스트 변경" />

</Grid>

</Page>

▶ MainPage.xaml.cs


using Windows.Foundation;

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;

using CommunityToolkit.WinUI.UI.Controls;

namespace TestProject;

/// <summary>
/// 메인 페이지
/// </summary>
public sealed partial class MainPage : Page
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Field
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region Field

    /// <summary>
    /// 마크다운 컨텐트 1
    /// </summary>
    private string markdownContent1 = @"
# 제목

이것은 **Markdown** 문서입니다.

- 목록 항목 1
- 목록 항목 2
- 목록 항목 3

```csharp
// 코드 블록 예제
Console.WriteLine(""Hello, World!"");
```
";

    /// <summary>
    /// 마크다운 컨텐트 2
    /// </summary>
    private string markdownContent2 = @"
";
    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - MainPage()

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

        this.markdownTextBlock.MarkdownRendered += markdownTextBlock_MarkdownRendered;
        this.changeTextButton.Click             += changeTextButton_Click;

        this.markdownTextBlock.Text = markdownContent1;
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Private
    //////////////////////////////////////////////////////////////////////////////// Event

    #region 마크다운 텍스트 블럭 마크다운 렌더링시 처리하기 - markdownTextBlock_MarkdownRendered(sender, e)

    /// <summary>
    /// 마크다운 텍스트 블럭 마크다운 렌더링시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void markdownTextBlock_MarkdownRendered(object sender, MarkdownRenderedEventArgs e)
    {
        SetMarkdownTextBlockSize();
    }

    #endregion
    #region 텍스트 변경 버튼 클릭시 처리하기 - changeTextButton_Click(sender, e)

    /// <summary>
    /// 텍스트 변경 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void changeTextButton_Click(object sender, RoutedEventArgs e)
    {
        if(this.markdownTextBlock.Text == this.markdownContent1)
        {
            this.markdownTextBlock.Text = this.markdownContent2;
        }
        else
        {
            this.markdownTextBlock.Text = this.markdownContent1;
        }
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////// Function

    #region 마크다운 텍스브 블럭 크기 설정하기 - SetMarkdownTextBlockSize()

    /// <summary>
    /// 마크다운 텍스브 블럭 크기 설정하기
    /// </summary>
    private void SetMarkdownTextBlockSize()
    {
        if(string.IsNullOrWhiteSpace(this.markdownTextBlock.Text))
        {
            this.markdownTextBlock.Width  = 200;
            this.markdownTextBlock.Height = 50;
        }
        else
        {
            this.markdownTextBlock.Width  = double.NaN;
            this.markdownTextBlock.Height = double.NaN;

            this.markdownTextBlock.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));

            this.markdownTextBlock.Width  = this.markdownTextBlock.DesiredSize.Width + 20;
            this.markdownTextBlock.Height = this.markdownTextBlock.DesiredSize.Height;
        }
    }

    #endregion
}

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

using Windows.Foundation;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

using CommunityToolkit.WinUI.UI.Controls;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// 마크다운 컨텐트 1

/// </summary>

private string markdownContent1 = @"

# 제목

이것은 **Markdown** 문서입니다.

- 목록 항목 1

- 목록 항목 2

- 목록 항목 3

```csharp

// 코드 블록 예제

Console.WriteLine(""Hello, World!"");

```

/// <summary>

/// 마크다운 컨텐트 2

/// </summary>

private string markdownContent2 = @"

#endregion

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.markdownTextBlock.MarkdownRendered += markdownTextBlock_MarkdownRendered;

this.changeTextButton.Click += changeTextButton_Click;

this.markdownTextBlock.Text = markdownContent1;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

//////////////////////////////////////////////////////////////////////////////// Event

#region 마크다운 텍스트 블럭 마크다운 렌더링시 처리하기 - markdownTextBlock_MarkdownRendered(sender, e)

/// <summary>

/// 마크다운 텍스트 블럭 마크다운 렌더링시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void markdownTextBlock_MarkdownRendered(object sender, MarkdownRenderedEventArgs e)

{

SetMarkdownTextBlockSize();

}

#endregion

#region 텍스트 변경 버튼 클릭시 처리하기 - changeTextButton_Click(sender, e)

/// <summary>

/// 텍스트 변경 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void changeTextButton_Click(object sender, RoutedEventArgs e)

{

if(this.markdownTextBlock.Text == this.markdownContent1)

{

this.markdownTextBlock.Text = this.markdownContent2;

}

else

{

this.markdownTextBlock.Text = this.markdownContent1;

}

#endregion

//////////////////////////////////////////////////////////////////////////////// Function

#region 마크다운 텍스브 블럭 크기 설정하기 - SetMarkdownTextBlockSize()

/// <summary>

/// 마크다운 텍스브 블럭 크기 설정하기

/// </summary>

private void SetMarkdownTextBlockSize()

{

if(string.IsNullOrWhiteSpace(this.markdownTextBlock.Text))

{

this.markdownTextBlock.Width = 200;

this.markdownTextBlock.Height = 50;

}

else

{

this.markdownTextBlock.Width = double.NaN;

this.markdownTextBlock.Height = double.NaN;

this.markdownTextBlock.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));

this.markdownTextBlock.Width = this.markdownTextBlock.DesiredSize.Width + 20;

this.markdownTextBlock.Height = this.markdownTextBlock.DesiredSize.Height;

}

#endregion

}

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] CommunityToolkit.WinUI.UI.Controls.Markdown 누겟 설치하기

■ CommunityToolkit.WinUI.UI.Controls.Markdown 누겟을 설치하는 방법을 보여준다. 1. Visual Studio를 실행한다. 2. [도구] / [NuGet 패키지 관리자] / [패키지 관리자 콘솔] 메뉴를 실행한다.

[C#/WINUI3/COMMUNITY TOOLKIT/.NET6] MarkdownTextBlock 클래스 : Measure 메소드를 사용해 문서 크기를 컨트롤 크기로 설정하기

■ MarkdownTextBlock 클래스의 Measure 메소드를 사용해 문서 크기를 컨트롤 크기로 설정하는 방법을 보여준다. ▶ 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"
    xmlns:control="using:CommunityToolkit.WinUI.UI.Controls"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid
        Margin="10"
        Background="DarkGray">
        <control:MarkdownTextBlock x:Name="markdownTextBlock"
            Background="White"
            Padding="10" />
    </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"

xmlns:control="using:CommunityToolkit.WinUI.UI.Controls"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid

Margin="10"

Background="DarkGray">

<control:MarkdownTextBlock x:Name="markdownTextBlock"

Background="White"

Padding="10" />

</Grid>

</Page>

▶ MainPage.xaml.cs


using Windows.Foundation;

using Microsoft.UI.Xaml.Controls;

namespace TestProject;

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

    #region 생성자 - MainPage()

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

        string markdownContent = @"
# 제목

이것은 **Markdown** 문서입니다.

- 목록 항목 1
- 목록 항목 2
- 목록 항목 3

```csharp
// 코드 블록 예제
Console.WriteLine(""Hello, World!"");
```
";

        this.markdownTextBlock.Text = markdownContent;

        this.markdownTextBlock.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));

        this.markdownTextBlock.Width  = markdownTextBlock.DesiredSize.Width + 20;
        this.markdownTextBlock.Height = markdownTextBlock.DesiredSize.Height;
    }

    #endregion
}

using Windows.Foundation;

using Microsoft.UI.Xaml.Controls;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

string markdownContent = @"

# 제목

이것은 **Markdown** 문서입니다.

- 목록 항목 1

- 목록 항목 2

- 목록 항목 3

```csharp

// 코드 블록 예제

Console.WriteLine(""Hello, World!"");

```

this.markdownTextBlock.Text = markdownContent;

this.markdownTextBlock.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));

this.markdownTextBlock.Width = markdownTextBlock.DesiredSize.Width + 20;

this.markdownTextBlock.Height = markdownTextBlock.DesiredSize.Height;

}

#endregion

}

TestProject.zip

[C#/WINUI3/COMMUNITY TOOLKIT/.NET6] MarkdownTextBlock 클래스 : 마크다운 표시하기

■ MarkdownTextBlock 클래스를 사용해 마크다운을 표시하는 방법을 보여준다. ▶ 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"
    xmlns:control="using:CommunityToolkit.WinUI.UI.Controls"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid
        Margin="10"
        Background="DarkGray">
        <control:MarkdownTextBlock x:Name="markdownTextBlock"
            Background="White"
            Padding="10" />
    </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"

xmlns:control="using:CommunityToolkit.WinUI.UI.Controls"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid

Margin="10"

Background="DarkGray">

<control:MarkdownTextBlock x:Name="markdownTextBlock"

Background="White"

Padding="10" />

</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();

        string markdownContent = @"
# 제목

이것은 **Markdown** 문서입니다.

- 목록 항목 1
- 목록 항목 2
- 목록 항목 3

```csharp
// 코드 블록 예제
Console.WriteLine(""Hello, World!"");
```
";

        this.markdownTextBlock.Text = markdownContent;
    }

    #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();

string markdownContent = @"

# 제목

이것은 **Markdown** 문서입니다.

- 목록 항목 1

- 목록 항목 2

- 목록 항목 3

```csharp

// 코드 블록 예제

Console.WriteLine(""Hello, World!"");

```

this.markdownTextBlock.Text = markdownContent;

}

#endregion

}

TestProject.zip