XAML 컨트롤

  • 아티클

Download Sample 샘플 다운로드

보기는 다른 그래픽 프로그래밍 환경에서 일반적으로 컨트롤 또는 위젯이라고 하는 레이블, 단추 및 슬라이더와 같은 사용자 인터페이스 개체입니다. 모든 뷰에서 Xamarin.Forms 지원되는 뷰는 클래스에서 View 파생합니다.

정의된 Xamarin.Forms 모든 뷰는 XAML 파일에서 참조할 수 있습니다.

프레젠테이션 뷰

보기 예시

BoxView

특정 색의 사각형을 표시합니다.

Screenshot of a BoxView

API / 가이드		 
<BoxView 색="강조"
         WidthRequest="150"
         HeightRequest="150"
         HorizontalOptions="Center">

타원

줄임표 또는 원을 표시합니다.

Screenshot of an Ellipse

API / 가이드		 
<타원 채우기="빨강"
         WidthRequest="150"
         HeightRequest="50"
         HorizontalOptions="Center" />

이미지

비트맵을 표시합니다.

Screenshot of an Image

API / 가이드		 
<Image Source="https://aka.ms/campus.jpg"
       Aspect="AspectFit"
       HorizontalOptions="Center" />

Label

하나 이상의 텍스트 줄을 표시합니다.

Screenshot of a Label

API / 가이드		 
<Label Text="Hello, Xamarin.Forms!"
       FontSize="Large"
       FontAttributes="기울기"
       HorizontalTextAlignment="Center" />

줄

선을 표시합니다.

Screenshot of a Line

API / 가이드		 
<X1="40" 줄
      Y1="0"
      X2="0"
      Y2="120"
      Stroke="Red"
      HorizontalOptions="Center" />

지도

지도를 표시합니다.

Screenshot of a Map

API / 가이드		 
<maps:Map ItemsSource="{Binding Locations}" />

Path

곡선 및 복합 셰이프를 표시합니다.

Screenshot of a Path

API / 가이드		 
<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      HeightRequest="100"
      WidthRequest="100"
      Data="M13.9,16.2
            L32,16.2 32,31.9 13.9,30.1Z
            M0,16.2
            L11.9,16.2 11.9,29.9 0,28.6Z
            M11.9,2
            L11.9,14.2 0,14.2 0,3.3Z
            M32,0
            L32,14.2 13.9,14.2 13.9,1.8Z" />

Polygon

다각형을 표시합니다.

Screenshot of a Polygon

API / 가이드		 
<Polygon Points="0 48, 0 144, 96 150, 100 0, 192 0, 192 96,
                 50 96, 48 192, 150 200 144 48"
         Fill="Blue"
         Stroke="Red"
         StrokeThickness="3"
         HorizontalOptions="Center" />

폴리라인

일련의 연결된 직선을 표시합니다.

Screenshot of a Polyline

API / 가이드		 
<Polyline Points="0,0 0 10,30, 15,0 18,60 23,30 35,30 40,0
                  43,60 48,30 100,30"
          Stroke="Red"
          HorizontalOptions="Center" />

사각형

사각형 또는 사각형을 표시합니다.

Screenshot of a Rectangle

API / 가이드		 
<사각형 채우기="빨강"
           WidthRequest="150"
           HeightRequest="50"
           HorizontalOptions="Center" />

WebView

웹 페이지 또는 HTML 콘텐츠를 표시합니다.

Screenshot of a WebView

API / 가이드		 
<WebView Source="https://learn.microsoft.com/xamarin/"
         VerticalOptions="FillAndExpand" />

명령 시작 뷰

보기 예시

단추

사각형 개체에 텍스트를 표시합니다.

Screenshot of a Button

API / 가이드		 
<Button Text="Click Me!"
        Font="Large"
        BorderWidth="1"
        HorizontalOptions="Center"
        VerticalOptions="CenterAndExpand"
        Clicked="OnButtonClicked" />

ImageButton

사각형 개체에 이미지를 표시합니다.

Screenshot of an ImageButton

API / 가이드		 
<ImageButton Source="XamarinLogo.png"
             HorizontalOptions="Center"
             VerticalOptions="CenterAndExpand"
             Clicked="OnImageButtonClicked" />

RadioButton

집합에서 하나의 옵션을 선택할 수 있습니다.

Screenshot of a RadioButton

가이드		 
<RadioButton 텍스트="파인애플"
             CheckedChanged="OnRadioButtonCheckedChanged" />

RefreshView

스크롤 가능한 콘텐츠에 대한 풀 투 새로 고침 기능을 제공합니다.

Screenshot of a RefreshView

가이드		 
<RefreshView IsRefreshing="{Binding IsRefreshing}"
             Command="{Binding RefreshCommand}" >
    <-- 스크롤 가능한 컨트롤은 다음과 같습니다.>
</RefreshView>

SearchBar

검색을 수행하는 데 사용하는 사용자 입력을 허용합니다.

Screenshot of a SearchBar

가이드		 
<SearchBar 자리 표시자="검색어 입력"
           SearchButtonPressed="OnSearchBarButtonPressed" />

SwipeView

살짝 밀기 제스처로 표시되는 상황에 맞는 메뉴 항목을 제공합니다.

Screenshot of a SwipeView

가이드		 
<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Invoked="OnDeleteInvoked" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!--콘텐츠-->
</SwipeView>

값 설정 뷰

보기 예시

CheckBox

값을 선택할 수 있습니다 boolean .

Screenshot of a CheckBox

가이드		 
<CheckBox IsChecked="true"
          HorizontalOptions="Center"
          VerticalOptions="CenterAndExpand" />

슬라이더

연속 범위에서 값을 선택할 double 수 있습니다.

Screenshot of a Slider

API / 가이드		 
<Slider Minimum="0"
        Maximum="100"
        VerticalOptions="CenterAndExpand" />

Stepper

증분 범위에서 값을 선택할 double 수 있습니다.Screenshot of a Stepper

API / 가이드		 
<Stepper Minimum="0"
         Maximum="10"
         Increment="0.1"
         HorizontalOptions="Center"
         VerticalOptions="CenterAndExpand" />

Switch

값을 선택할 수 있습니다 boolean .

Screenshot of a Switch

API / 가이드		 
<Switch IsToggled="false"
        HorizontalOptions="Center"
        VerticalOptions="CenterAndExpand" />

DatePicker

날짜를 선택할 수 있습니다.

Screenshot of a DatePicker

API / 가이드		 
<DatePicker Format="D"
            VerticalOptions="CenterAndExpand" />

TimePicker

시간을 선택할 수 있습니다.

Screenshot of a TimePicker

API / 가이드		 
<TimePicker Format="T"
            VerticalOptions="CenterAndExpand" />

텍스트 편집 뷰

보기 예시

항목

한 줄의 텍스트를 입력하고 편집할 수 있습니다.

Screenshot of an Entry

API / 가이드		 <
<Entry Keyboard="Email"
       자리 표시자="전자 메일 주소 입력"
       VerticalOptions="CenterAndExpand" />

편집기

여러 줄의 텍스트를 입력하고 편집할 수 있습니다.

Screenshot of an Editor

API / 가이드		 
<Editor VerticalOptions="FillAndExpand" />

작업 표시 뷰

보기 예시

ActivityIndicator

진행 상황을 표시하지 않고 애플리케이션이 긴 작업에 참여하고 있음을 보여 주는 애니메이션을 표시합니다.

Screenshot of an ActivityIndicator

API / 가이드		 
<ActivityIndicator IsRunning="True"
                   VerticalOptions="CenterAndExpand" />

ProgressBar

애플리케이션이 긴 작업을 통해 진행 중임을 보여 주는 애니메이션을 표시합니다.

Screenshot of a ProgressBar

API / 가이드		 
<ProgressBar Progress=".5"
             VerticalOptions="CenterAndExpand" />

컬렉션 표시 뷰

보기 예시

CarouselView

스크롤 가능한 데이터 항목 목록을 표시합니다.

Screenshot of a CarouselView

가이드		 
<CarouselView ItemsSource="{Binding Monkeys}">
              ItemTemplate="{StaticResource MonkeyTemplate}" />

CollectionView

다양한 레이아웃 사양을 사용하여 선택 가능한 데이터 항목의 스크롤 가능한 목록을 표시합니다.

Screenshot of a CollectionView

가이드		 
<CollectionView ItemsSource="{Binding Monkeys}">
                ItemTemplate="{StaticResource MonkeyTemplate}"
                ItemsLayout="VerticalGrid, 2" />

IndicatorView

에 있는 CarouselView항목 수를 나타내는 표시기를 표시합니다.

Screenshot of an IndicatorView

가이드		 
<IndicatorView x:Name="indicatorView"
               IndicatorColor="LightGray"
               SelectedIndicatorColor="DarkGray" />

ListView

선택 가능한 데이터 항목의 스크롤 가능한 목록을 표시합니다.

Screenshot of a ListView

API / 가이드		 
<ListView ItemsSource="{Binding Monkeys}">
          ItemTemplate="{StaticResource MonkeyTemplate}" />

Picker

텍스트 문자열 목록에서 선택 항목을 표시합니다.

Screenshot of a Picker

API / 가이드		 <
<선택기 제목="원숭이 선택"
        TitleColor="Red">
  <Picker.ItemsSource>
    <x:Array Type="{x:Type x:String}">
      <x:String>Baboon</x:String>
      <x:String>Capuchin Monkey</x:String>
      <x:String>Blue Monkey</x:String>
      <x:String>다람쥐 원숭이</x:String>
      <x:String>Golden Lion Tamarin</x:String>
      <x:String>Howler Monkey</x:String>
      <x:String>Japanese Macaque</x:String>
    </X:array>
  </Picker.ItemsSource>
</Picker>

TableView

대화형 행 목록을 표시합니다.

Screenshot of a TableView

API / 가이드		 
<TableView 의도="설정">
    <TableRoot>
        <TableSection Title="Ring">
            <SwitchCell Text="New Voice Mail" />
            <SwitchCell Text="New Mail" On="true" />
        </TableSection>
    </TableRoot>
</TableView>