uwp 텍스트박스 ( TextBox ) 텍스트블록 ( TextBlcok ) 사용하기

글자를 표현하고 문자를 입력하는 방법으로 uwp 에서는 텍스트박스와 텍스트블록을 사용할 수 있다. 비슷한 단어이지만 기능적으로 다르다. TextBox 는 문자열을 입력하고 수정할 수 있고 삭제할 수 있지만, TextBlock은 라벨과 같이 문자열을 표시만 할 수 있다.

TextBox, TextBlock

uwp 텍스트박스 ( TextBox ) 텍스트블록 ( TextBlcok ) 사용하기

프로그램이나 앱을 사용하여 뭔가 작업을 할 때 문자열을 입력하고 싶을 때가 있으며, 문자열을 입력하는 곳의 명칭이나 구역을 표시하고 싶을 때가 있다.

앞서 말한 것 처럼 TextBox 와 TextBlock 을 사용하면 된다.

• TextBox : 문자열을 화면에 표시, 입력, 수정, 삭제
• TextBlock : 문자열을 화면에 표시

사용방법

TextBox에 문자열을 넣고 버튼을 클릭하면 메세지창이 나타나도록 해 본다.

StackPanel 컨테이너를 하나 두고 내부에 TextBlock, TextBox, Button 을 넣는다.

StackPanel 은 속성을 지정하지 않으면 기본값으로 Orientation 값이 Vertical 수직이다.

>>> uwp 화면 레이아웃 StackPanel 사용하기 <<<

<!-- XAML -->
<StackPanel>
	<TextBlock Name="txtblk" Text="텍스트블록"></TextBlock>
	<TextBox Name="txtbx" Text="텍스트박스"></TextBox>
	<Button Margin="20,20,0,0" VerticalAlignment="Top" Content="버튼 1" Click="Button_Click"/>
</StackPanel>

uwp C# 코드에는 버튼을 클릭했을 때 TextBlock , TextBox 의 값을 가져오도록 하였다.

Button 을 클릭하면 문자열을 가져온 후 메세지창을 띄우게 하였다.

/*
 * uwp C# 비하인드 코드 
 */
 
private void Button_Click(object sender, RoutedEventArgs e)
{
	StringBuilder vStringbuilder = new StringBuilder();
	vStringbuilder.Append("텍스트 블록 : " + this.txtblk.Text);
	vStringbuilder.Append("\n");
	vStringbuilder.Append("텍스트 박스 : " + this.txtbx.Text);

	ShowAsyncMessageDialog(vStringbuilder.ToString(), "");
}

private async void ShowAsyncMessageDialog(String pContent, String pTitle)
{
	/** 윈도우 크기 알림창 표시 */
	var vMessageDialog = new MessageDialog(pContent, pTitle);
	await vMessageDialog.ShowAsync();
}

전체코드와 결과화면

전체적으로 살펴보면 아래와 같다.

화면에 TextBox, TextBlock,  Button을 StackPanel에 배치한 후
버튼을 클릭하면 메제지창에 TextBox에 입력한 문자열을 표시하도록 하였다.

<!-- XAML -->

<Page
    x:Class="TestUwpApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestUwpApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <StackPanel>
            <TextBlock Name="txtblk" Text="텍스트블록"></TextBlock>
            <TextBox Name="txtbx" Text="텍스트박스"></TextBox>
            <Button Margin="20,20,0,0" VerticalAlignment="Top" Content="버튼 1" Click="Button_Click"/>
        </StackPanel>
    </Grid>
</Page>

/** uwp C# 비하인드코드 */

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using System.Text;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Popups;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// 빈 페이지 항목 템플릿에 대한 설명은 https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x412에 나와 있습니다.

namespace TestUwpApp
{
    /// <summary>
    /// 자체적으로 사용하거나 프레임 내에서 탐색할 수 있는 빈 페이지입니다.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            SetCurrentWindowsSize();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            StringBuilder vStringbuilder = new StringBuilder();
            vStringbuilder.Append("텍스트 블록 : " + this.txtblk.Text);
            vStringbuilder.Append("\n");
            vStringbuilder.Append("텍스트 박스 : " + this.txtbx.Text);

            ShowAsyncMessageDialog(vStringbuilder.ToString(), "");
        }

        private async void ShowAsyncMessageDialog(String pContent, String pTitle)
        {
            /** 윈도우 크기 알림창 표시 */
            var vMessageDialog = new MessageDialog(pContent, pTitle);
            await vMessageDialog.ShowAsync();
        }

        private void SetCurrentWindowsSize()
        {
            /** 윈도우 크기 설정하기 */
            ApplicationView.PreferredLaunchViewSize = new Size(500, 319);
        }
    }
}