언어: HTML | XAML

컨트롤 목록(XAML)

Applies to Windows and Windows Phone

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 런타임 앱용 로드맵

 

 

표시:
© 2014 Microsoft