컨트롤 목록
언어: HTML | XAML

컨트롤 목록(XAML)

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

Windows용 XAML UI 프레임워크는 UI 개발을 지원하는 광범위한 컨트롤 라이브러리를 제공합니다. 이러한 컨트롤에는 시각적으로 표시되는 컨트롤도 있고, 이미지와 미디어 같이 다른 컨트롤이나 콘텐츠의 컨테이너 역할을 하는 컨트롤도 있습니다. 컨트롤 및 레이아웃 갤러리 샘플XAML 필수 컨트롤 샘플을 다운로드하여 많은 Windows UI 컨트롤의 작동 방식을 확인할 수 있습니다.

다음은 앱에서 사용할 수 있는 일반적인 XAML 컨트롤의 사전순 목록입니다. 기능별로 그룹화된 컨트롤을 보려면 기능별 컨트롤을 참조하세요.

대부분의 컨트롤은 Phone 및 PC용 앱 UI에서 모두 사용할 수 있습니다. 일반적으로 이러한 컨트롤은 모양이 유사하지만 Phone 및 PC에서 모양이 다른 경우도 있습니다. 다른 컨트롤은 Phone 앱 또는 PC 앱에만 사용할 수 있습니다.

로드맵: 이 항목은 다음 항목과 연관되어 있습니다. 참고 항목:

A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z

A

앱 바(Windows만 해당)

응용 프로그램 관련 명령을 표시하는 도구 모음입니다.

하단 앱 바 컨트롤

<Page.BottomAppBar>
    <AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
        <Grid>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                <Button Style="{StaticResource EditAppBarButtonStyle}" Click="Button_Click"/>
                <Button Style="{StaticResource RemoveAppBarButtonStyle}" Click="Button_Click"/>
                <Button Style="{StaticResource AddAppBarButtonStyle}" Click="Button_Click"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                <Button Style="{StaticResource RefreshAppBarButtonStyle}" Click="Button_Click"/>
                <Button Style="{StaticResource HelpAppBarButtonStyle}" Click="Button_Click"/>
            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>


참조: AppBar

방법: 앱 바 추가

디자인: 위쪽 앱 바,아래쪽 앱 바

샘플 코드: XAML AppBar 컨트롤 샘플, 컨트롤 및 레이아웃 갤러리 샘플

앱 바 단추

앱 바 스타일을 사용하여 명령을 표시하는 단추입니다.

참조: AppBarButton

디자인: 뒤로 단추, 아래쪽 앱 바

앱 바 구분 기호(Windows만 해당)

앱 바의 명령 그룹을 시각적으로 구분합니다.

참조: AppBarSeparator

앱 바 토글 단추

앱 바 스타일을 사용하여 명령을 전환하는 단추입니다.

참조: AppBarToggleButton

오디오

미디어 요소 참조

자동 제안 상자(Windows Phone만 해당)

사용자가 입력할 때 제안된 텍스트를 제공하는 텍스트 입력 상자입니다.

참조: AutoSuggestBox

B

테두리

다른 개체 주변에 테두리, 배경 또는 둘 다를 그리는 컨테이너 컨트롤입니다.

2개 직사각형 둘레의 테두리

<Border BorderBrush="Gray" BorderThickness="4" 
        Height="108" Width="64">
    <StackPanel>
        <Rectangle Fill="Yellow"/>
        <Rectangle Fill="Green"/>
    </StackPanel>
</Border>


참조: Border

샘플 코드: 컨트롤 및 레이아웃 갤러리 샘플

단추

사용자 입력에 응답하고 Click 이벤트를 발생시키는 컨트롤입니다.

표준 단추 및 스타일 지정된 단추

<Button x:Name="button1" Content="Button" 
        Click="Button_Click" />


참조: Button

방법: 단추 추가

디자인: 단추

샘플 코드: XAML 필수 컨트롤 샘플, 컨트롤 및 레이아웃 갤러리 샘플

C

캔버스

캔버스의 왼쪽 위 모서리에 상대적인 자식 요소의 절대 위치 지정을 지원하는 레이아웃 패널입니다.

캔버스 레이아웃 패널

<Canvas Width="120" Height="120">
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue" Canvas.Left="20" Canvas.Top="20"/>
    <Rectangle Fill="Green" Canvas.Left="40" Canvas.Top="40"/>
    <Rectangle Fill="Yellow" Canvas.Left="60" Canvas.Top="60"/>
</Canvas>


참조: Canvas

방법: 빠른 시작: 레이아웃 컨트롤 추가

샘플 코드: 컨트롤 및 레이아웃 갤러리 샘플

확인란

사용자가 선택하거나 선택 취소할 수 있는 컨트롤입니다.

확인란의 세 가지 상태

<CheckBox x:Name="checkbox1" Content="CheckBox" 
          Checked="CheckBox_Checked"/>


참조: CheckBox

방법: 확인란 추가

디자인: 확인란

샘플 코드: XAML 필수 컨트롤 샘플, 컨트롤 및 레이아웃 갤러리 샘플

콤보 상자

사용자가 선택할 수 있는 항목의 드롭다운 목록입니다.

콤보 상자 열기

<ComboBox x:Name="comboBox1" SelectionChanged="ComboBox_SelectionChanged" Width="100">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>Item 3</x:String>
</ComboBox>


참조: ComboBox

방법: 콤보 상자 및 목록 상자 추가

디자인: 드롭다운 목록

샘플 코드: XAML 필수 컨트롤 샘플, 컨트롤 및 레이아웃 갤러리 샘플

명령 모음

앱 바 단추 요소의 크기 조정을 처리하는 특수한 앱 바입니다.


    <CommandBar>
        <AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
    </CommandBar>


참조: CommandBar

방법: 앱 바 추가

디자인: 아래쪽 앱 바

샘플 코드: XAML AppBar 컨트롤 샘플, 컨트롤 및 레이아웃 갤러리 샘플

콘텐츠 대화 상자(Windows Phone만 해당)

XAML 콘텐츠를 포함하도록 사용자 지정할 수 있는 대화 상자입니다.

참조: ContentDialog

상황에 맞는 메뉴

팝업 메뉴 참조

D

날짜 선택기

사용자가 날짜를 선택할 수 있는 컨트롤입니다.

날짜 선택기 컨트롤

<DatePicker Header="Arrival Date"/>

참조: DatePicker

방법: 빠른 시작: DatePicker 추가

디자인: 날짜 선택기

샘플 코드: XAML DatePicker 및 TimePicker 컨트롤 샘플, 컨트롤 및 레이아웃 갤러리 샘플

날짜 선택 플라이아웃(Windows Phone만 해당)

사용자가 날짜를 선택할 수 있는 플라이아웃입니다.

참조: DatePickerFlyout

F

가변 상자

스택 패널 참조

대칭 이동 뷰

사용자가 한 번에 하나씩 차례로 전환할 수 있는 항목 컬렉션을 제공하는 컨트롤입니다.

대칭 이동 뷰 컨트롤

<FlipView x:Name="flipView1" SelectionChanged="FlipView_SelectionChanged">
    <Image Source="Assets/Logo.png" />
    <Image Source="Assets/SplashScreen.png" />
    <Image Source="Assets/SmallLogo.png" />
</FlipView>


참조: FlipView

방법: FlipView 컨트롤 추가

디자인: 대칭 이동 뷰

샘플 코드: XAML FlipView 컨트롤 샘플, 컨트롤 및 레이아웃 갤러리 샘플

플라이아웃

사용자의 조작이 필요한 메시지를 표시합니다. 대화 상자와 달리 플라이아웃은 별도의 창을 만들지 않으며 다른 사용자 조작을 차단하지 않습니다.

플라이아웃 컨트롤

<Flyout>
    <StackPanel>
        <TextBlock>All items will be permanently removed from your cart.</TextBlock>
        <Button Click="DeleteConfirmation_Click">Empty my cart</Button>
    </StackPanel>
</Flyout>


참조: Flyout

방법: 빠른 시작: 플라이아웃 추가

디자인: 플라이아웃

샘플 코드: XAML 플라이아웃 및 MenuFlyout 샘플, 컨트롤 및 레이아웃 갤러리 샘플

G

그리드

자식 요소에 대한 열과 행 형태의 배열을 지원하는 레이아웃 패널입니다.

그리드 레이아웃 패널

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="50"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="50"/>
    </Grid.ColumnDefinitions>
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue" Grid.Row="1"/>
    <Rectangle Fill="Green" Grid.Column="1"/>
    <Rectangle Fill="Yellow" Grid.Row="1" Grid.Column="1"/>
</Grid>


참조: Grid

방법: 빠른 시작: 레이아웃 컨트롤 추가

샘플 코드: 컨트롤 및 레이아웃 갤러리 샘플

그리드 뷰

가로로 스크롤할 수 있는 행과 열 형태로 항목 컬렉션을 제공하는 컨트롤입니다.

그리드 뷰 컨트롤

<GridView x:Name="gridView1" SelectionChanged="GridView_SelectionChanged">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
</GridView>


참조: GridView

방법: ListView 및 GridView 컨트롤 추가

디자인: 그리드 보기 및 목록 보기

샘플 코드: XAML ListView 및 GridView 필수 샘플, XAML ListView 및 GridView 사용자 지정 대화형 작업 샘플, XAML GridView 그룹화 및 SemanticZoom 샘플, 컨트롤 및 레이아웃 갤러리 샘플

H

허브

사용자가 콘텐츠의 여러 섹션을 보고 이동할 수 있는 컨테이너 컨트롤입니다.


<Hub>
    <HubSection>
        <!--- hub section content -->
				</HubSection>
    <HubSection>
        <!--- hub section content -->
				</HubSection>
</Hub>

참조: Hub

방법: 빠른 시작: 허브 사용

디자인: 허브

샘플 코드: XAML 허브 컨트롤 샘플, 컨트롤 및 레이아웃 갤러리 샘플

하이퍼링크

하이퍼링크 단추 참조

하이퍼링크 단추

일반적으로 텍스트 블록 내에서 인라인으로 사용되는 마크업 텍스트로 표시되는 단추입니다.

하이퍼링크 단추

<HyperlinkButton Content="www.microsoft.com" NavigateUri="http://www.microsoft.com"/>


참조: HyperlinkButton

방법: 단추 추가

디자인: 하이퍼링크

샘플 코드: XAML 필수 컨트롤 샘플, 컨트롤 및 레이아웃 갤러리 샘플

I

이미지

이미지를 제공하는 컨트롤입니다.

이미지 컨트롤

<Image Source="Assets/Logo.png" />


참조: Image

방법: 빠른 시작: Image 및 ImageBrush

샘플 코드: XAML 이미지 샘플, XAML 필수 컨트롤 샘플, 컨트롤 및 레이아웃 갤러리 샘플

항목 컨트롤

데이터 템플릿을 통해 지정된 UI에 항목 컬렉션을 제공하는 컨트롤입니다.


<ItemsControl/>

참조: ItemsControl

L

목록 상자

사용자가 선택할 수 있는 인라인 항목 목록을 제공하는 컨트롤입니다.

목록 상자 컨트롤

<ListBox x:Name="listBox1" SelectionChanged="ListBox_SelectionChanged" Width="100">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>Item 3</x:String>
</ListBox>


참조: ListBox

방법: 콤보 상자 및 목록 상자 추가

디자인: 목록 상자

샘플 코드: XAML 필수 컨트롤 샘플, 컨트롤 및 레이아웃 갤러리 샘플

목록 선택 플라이아웃(Windows Phone만 해당)

사용자가 선택할 수 있는 항목 목록을 제공하는 플라이아웃입니다.

참조: ListPickerFlyout

목록 뷰

가로로 스크롤할 수 있는 목록 형태로 항목 컬렉션을 제공하는 컨트롤입니다.

목록 뷰 컨트롤

<ListView x:Name="listView1" SelectionChanged="ListView_SelectionChanged">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
</ListView>


참조: ListView

방법: ListView 및 GridView 컨트롤 추가

디자인: 그리드 보기 및 목록 보기

샘플 코드: XAML ListView 및 GridView 필수 샘플, XAML ListView 및 GridView 사용자 지정 대화형 작업 샘플, 컨트롤 및 레이아웃 갤러리 샘플

M

지도 컨트롤(Windows Phone만 해당)

지도를 표시하는 컨트롤입니다.

참조: MapControl

디자인: 지도

미디어 요소

오디오 및 비디오 콘텐츠를 재생하는 컨트롤입니다.


<MediaElement/>

참조: MediaElement

디자인: 오디오 인식 앱

샘플 코드: XAML 미디어 재생 샘플

메뉴 플라이아웃

사용자 현재 수행 중인 작업과 관련된 명령 또는 옵션 목록을 일시적으로 표시합니다.

메뉴 플라이아웃 컨트롤

<MenuFlyout>
    <MenuFlyoutItem Text="Reset" Click="Reset_Click"/>
    <MenuFlyoutSeparator/>
    <ToggleMenuFlyoutItem Text="Shuffle" 
                          IsChecked="{Binding IsShuffleEnabled, Mode=TwoWay}"/>
    <ToggleMenuFlyoutItem Text="Repeat" 
                          IsChecked="{Binding IsRepeatEnabled, Mode=TwoWay}"/>
</MenuFlyout>



참조: MenuFlyout, MenuFlyoutItem, MenuFlyoutSeparator, ToggleMenuFlyoutItem

방법: 빠른 시작: MenuFlyout 추가

샘플 코드: XAML 플라이아웃 및 MenuFlyout 샘플, 컨트롤 및 레이아웃 갤러리 샘플

여러 줄 입력란

텍스트 상자 참조

P

이동 스크롤 뷰어

스크롤 뷰어 참조

암호 상자

암호를 입력하기 위한 컨트롤입니다.

암호 상자 컨트롤

<PasswordBox x:Name="passwordBox1" IsPasswordRevealButtonEnabled="True" 
             PasswordChanged="PasswordBox_PasswordChanged" />


참조: PasswordBox

방법: 빠른 시작: 텍스트 입력 추가 및 컨트롤 편집

디자인: 암호 상자

샘플 코드: XAML 텍스트 표시 샘플, XAML 텍스트 편집 샘플, 컨트롤 및 레이아웃 갤러리 샘플

선택 플라이아웃(Windows Phone만 해당)

사용자 지정 선택기를 만드는 데 사용할 수 있는 플라이아웃입니다.

참조: PickerFlyout

피벗(Windows Phone만 해당)

일반적으로 동일한 데이터 집합에서 서로 다른 피벗(보기 또는 필터) 간에 빠르게 이동하는 방법을 제공하는 전체 화면 컨테이너 및 탐색 모델입니다.

참조: Pivot

디자인: 피벗

팝업 메뉴

사용자가 지정한 명령을 표시하는 사용자 지정 메뉴입니다.

참조: PopupMenu

디자인: 상황에 맞는 메뉴

샘플 코드: XAML 필수 컨트롤 샘플

진행률 표시줄

막대를 표시하여 진행 상황을 나타내는 컨트롤입니다.

진행률 표시줄 컨트롤

특정 값을 표시하는 진행률 표시줄입니다.


<ProgressBar x:Name="progressBar1" Value="50" Width="100"/>


확정되지 않은 진행률 표시줄 컨트롤

확정되지 않은 진행 상황을 표시하는 진행률 표시줄입니다.


<ProgressBar x:Name="indeterminateProgressBar1" IsIndeterminate="True" Width="100"/>


참조: ProgressBar

방법: 진행률 컨트롤 추가

디자인: 진행률 표시줄 및 진행률 링

샘플 코드: XAML 필수 컨트롤 샘플, 컨트롤 및 레이아웃 갤러리 샘플

진행률 링

링 표시로 확정되지 않은 진행률을 나타내는 컨트롤입니다.

진행률 링 컨트롤

<ProgressRing x:Name="progressRing1" IsActive="True"/>


참조: ProgressRing

방법: 진행률 컨트롤 추가

디자인: 진행률 표시줄 및 진행률 링

샘플 코드: XAML 필수 컨트롤 샘플, 컨트롤 및 레이아웃 갤러리 샘플

누름 단추

단추 참조

R

라디오 단추

사용자가 옵션 그룹에서 하나의 옵션을 선택할 수 있도록 해 주는 컨트롤입니다. 라디오 단추가 그룹화되면 함께 사용할 수 없습니다.

라디오 단추 컨트롤

<RadioButton x:Name="radioButton1" Content="RadioButton 1" GroupName="Group1" 
             Checked="RadioButton_Checked"/>
<RadioButton x:Name="radioButton2" Content="RadioButton 2" GroupName="Group1" 
             Checked="RadioButton_Checked" IsChecked="True"/>
<RadioButton x:Name="radioButton3" Content="RadioButton 3" GroupName="Group1" 
             Checked="RadioButton_Checked"/>


참조: RadioButton

방법: 라디오 단추 추가

디자인: 라디오 단추

샘플 코드: XAML 필수 컨트롤 샘플, 컨트롤 및 레이아웃 갤러리 샘플

반복 단추

사용자가 눌렀다가 놓을 때까지 반복해서 Click 이벤트를 발생시키는 컨트롤입니다.

반복 단추 컨트롤

<RepeatButton x:Name="repeatButton1" Content="Repeat Button" 
              Click="RepeatButton_Click" />


참조: RepeatButton

방법: 단추 추가

샘플 코드: 컨트롤 및 레이아웃 갤러리 샘플

서식 있는 편집 상자

사용자가 서식 있는 텍스트, 하이퍼링크, 이미지 등의 콘텐츠가 포함된 서식 있는 텍스트 문서를 편집할 수 있는 컨트롤입니다.


<RichEditBox />

참조: RichEditBox

방법: 빠른 시작: 텍스트 입력 추가 및 컨트롤 편집

디자인: 텍스트 입력 맞춤법 검사

샘플 코드: XAML 텍스트 샘플, 컨트롤 및 레이아웃 갤러리 샘플

S

스크롤 막대

위치가 값에 해당하는 슬라이딩 Thumb이 있는 스크롤 막대를 제공하는 컨트롤입니다.


<ScrollBar/>

참조: ScrollBar

스크롤 뷰어

사용자가 내용을 이동 및 확대/축소할 수 있도록 하는 컨테이너 컨트롤입니다.

스크롤 뷰어 컨트롤

<ScrollViewer ZoomMode="Enabled" MaxZoomFactor="10" 
              HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Visible"
              Height="200" Width="200">
    <Image Source="Assets/Logo.png" Height="400" Width="400"/>
</ScrollViewer>


참조: ScrollViewer

디자인: 스크롤 뷰어

샘플 코드: XAML 스크롤, 이동 및 확대/축소 샘플, 컨트롤 및 레이아웃 갤러리 샘플

검색 상자(Windows만 해당)

사용자가 검색 쿼리를 입력할 수 있는 컨트롤입니다.

검색 상자 컨트롤

<SearchBox />

참조: SearchBox

방법: 검색 추가

디자인: 검색 상자

샘플 코드: SearchBox 컨트롤 샘플, 컨트롤 및 레이아웃 갤러리 샘플

시맨틱 줌

사용자가 항목 컬렉션의 두 가지 뷰 사이에서 확대/축소할 수 있도록 해 주는 컨테이너 컨트롤입니다.

시맨틱 줌 컨트롤


<SemanticZoom>
    <ZoomedInView>
        <GridView></GridView>
    </ZoomedInView>
    <ZoomedOutView>
        <GridView></GridView>
    </ZoomedOutView>
</SemanticZoom>

참조: SemanticZoom

방법: SemanticZoom 컨트롤 추가

디자인: 시맨틱 줌, 고유한 Windows: 시맨틱 줌

샘플 코드: XAML GridView 그룹화 및 SemanticZoom 샘플, 컨트롤 및 레이아웃 갤러리 샘플

셰이프

줄임표, 사각형, 선. 베지어 패스 등과 같이 표시할 수 있는 다양한 유지 모드 그래픽 개체입니다.

다각형경로

<Ellipse/>
<Path/>
<Rectangle/>

참조: Shapes

방법: 빠른 시작: 셰이프 그리기

샘플 코드: XAML 벡터 기반 그리기 샘플

한 줄 입력란

한 줄 일반 텍스트 필드입니다. 텍스트 상자를 참조하세요.

슬라이더

사용자가 트랙을 따라 Thumb 컨트롤을 이동하여 값 범위에서 값을 선택할 수 있도록 하는 컨트롤입니다.

슬라이더 컨트롤

<Slider x:Name="slider1" Width="100" ValueChanged="Slider_ValueChanged" />


참조: Slider

방법: 슬라이더 추가

디자인: 슬라이더

샘플 코드: XAML 필수 컨트롤 샘플

스택 패널

가로 또는 세로 방향으로 지정된 단일 행에 자식 요소를 배열하는 레이아웃 패널입니다.

스택 패널 레이아웃 컨트롤

<StackPanel>
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue"/>
    <Rectangle Fill="Green"/>
    <Rectangle Fill="Yellow"/>
</StackPanel>


참조: StackPanel

방법: 빠른 시작: 레이아웃 컨트롤 추가

샘플 코드: 컨트롤 및 레이아웃 갤러리 샘플

정적 텍스트/단락

텍스트 블록 참조

T

텍스트 블록

텍스트를 표시하는 컨트롤입니다.

텍스트 블록 컨트롤

<TextBlock x:Name="textBlock1" Text="I am a TextBlock" />


참조: TextBlock, RichTextBlock

방법: 빠른 시작: 텍스트 표시

디자인: 형식

샘플 코드: XAML 텍스트 샘플, 컨트롤 및 레이아웃 갤러리 샘플

텍스트 상자

한 줄 또는 여러 줄 일반 텍스트 필드입니다.

텍스트 상자 컨트롤

<TextBox x:Name="textBox1" Text="I am a TextBox" 
         TextChanged="TextBox_TextChanged" />


참조: TextBox

방법: 빠른 시작: 텍스트 입력 추가 및 컨트롤 편집

디자인: 텍스트 입력 상자, 텍스트 입력 맞춤법 검사

샘플 코드: XAML 텍스트 샘플, 컨트롤 및 레이아웃 갤러리 샘플

시간 선택기

사용자가 시간 값을 설정할 수 있는 컨트롤입니다.

TimePicker 컨트롤

<TimePicker Header="Arrival Time"/>

참조: TimePicker

방법: 빠른 시작: TimePicker 추가

디자인: 시간 선택기

샘플 코드: XAML DatePicker 및 TimePicker 컨트롤 샘플, 컨트롤 및 레이아웃 갤러리 샘플

시간 선택 플라이아웃(Windows Phone만 해당)

사용자가 시간 값을 설정할 수 있는 플라이아웃입니다.

참조: TimePickerFlyout

토글 단추

두 가지 상태 간에 전환할 수 있는 단추입니다.

토글 단추 컨트롤

<ToggleButton x:Name="toggleButton1" Content="Button" 
              Checked="ToggleButton_Checked"/>


참조: ToggleButton

방법: 단추 추가

토글 스위치

두 가지 상태에서 전환할 수 있는 스위치입니다.

토글 스위치 컨트롤

<ToggleSwitch x:Name="toggleSwitch1" Header="ToggleSwitch" 
              OnContent="On" OffContent="Off" 
              Toggled="ToggleSwitch_Toggled"/>


참조: ToggleSwitch

방법: 토글 스위치 추가

디자인: 토글 스위치

샘플 코드: XAML 필수 컨트롤 샘플, 컨트롤 및 레이아웃 갤러리 샘플

도구 설명

요소에 대한 정보를 표시하는 팝업 창입니다.

도구 설명 컨트롤

<Button Content="Button" Click="Button_Click" 
        ToolTipService.ToolTip="Click to perform action" />


참조: ToolTip, ToolTipService

방법: 도구 설명 추가

디자인: 도구 설명

샘플 코드: XAML 필수 컨트롤 샘플, 컨트롤 및 레이아웃 갤러리 샘플

V

VariableSizedWrapGrid

자식 요소에 대한 열과 행 형태의 배열을 지원하는 레이아웃 패널입니다. 각 자식 요소를 여러 행과 열에 걸쳐 표시할 수 있습니다.

가변 크기 랩 그리드 레이아웃 패널

<VariableSizedWrapGrid MaximumRowsOrColumns="3" ItemHeight="44" ItemWidth="44">
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue" Height="80" 
               VariableSizedWrapGrid.RowSpan="2"/>
    <Rectangle Fill="Green" Width="80" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
    <Rectangle Fill="Yellow" Height="80" Width="80" 
               VariableSizedWrapGrid.RowSpan="2" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
</VariableSizedWrapGrid>


참조: VariableSizedWrapGrid

방법: 빠른 시작: 레이아웃 컨트롤 추가

샘플 코드: 컨트롤 및 레이아웃 갤러리 샘플

비디오

미디어 요소 참조

Viewbox

내용의 크기를 지정된 크기로 조정된 컨테이너 컨트롤입니다.

Viewbox 컨트롤

<Viewbox MaxWidth="25" MaxHeight="25">
    <Image Source="Assets/Logo.png"/>
</Viewbox>
<Viewbox MaxWidth="75" MaxHeight="75">
    <Image Source="Assets/Logo.png"/>
</Viewbox>
<Viewbox MaxWidth="150" MaxHeight="150">
    <Image Source="Assets/Logo.png"/>
</Viewbox>


참조: Viewbox

샘플 코드: 컨트롤 및 레이아웃 갤러리 샘플

W

웹 뷰

웹 콘텐츠를 호스트하는 컨테이너 컨트롤입니다.


<WebView x:Name="webView1" Source="http://dev.windows.com" Height="400" Width="800" />



<Rectangle Height="400" Width="800">
    <Rectangle.Fill>
        <WebViewBrush SourceName="webView1"/>
    </Rectangle.Fill>
</Rectangle>


참조: WebView, WebViewBrush

디자인: 웹 보기

샘플 코드: XAML WebView 컨트롤 샘플

Z

확대/축소 스크롤 뷰어

스크롤 뷰어 참조

관련 항목

기능별 컨트롤
C# 또는 Visual Basic으로 작성한 Windows 런타임 앱용 로드맵
C++로 작성한 Windows 런타임 앱용 로드맵

 

 

표시:
© 2016 Microsoft