퓨즈[Fusetools] 문서[Docs] 번역

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 컨트롤들
  4. 버튼[Button]

버튼[Button]

Button 클래스

버튼을 표시합니다.

퓨즈의 기본 버튼입니다. 그 외관은 가운데에 파란색 텍스트가 있고 배경은 투명합니다. 모양을 변경하거나 시맨틱한 특정 버튼을 만들려면 이 클래스의 서브 클래스를 만들어야 합니다. NativeViewHost 내부에서 사용할 때 이 버튼은 플랫폼 기본 모양을 가지므로 추가 스타일이 필요할 수도 있습니다. 예를 들어, iOS에서 버튼의 기본 모양은 흰색 배경 안의 파란색 텍스트입니다.

예제

기본적으로 Button은 투명한 배경 위에 파란색 텍스트로 그려집니다.

1
<Button Text="Click me" />

그러나 Button은 가능할 때마다 플랫폼 기본 버튼 컨트롤을 렌더링하는데도 사용할 수 있습니다. 아래 그림과 같이 NativeViewHost에 Button을 래핑하면 됩니다.

1
2
3
<NativeViewHost>
    <Button Text="Native button" />
</NativeViewHost>

그러나 우리는 일반적으로 우리 자신의 모양과 느낌의 버튼을 원합니다. 이 경우 Button이 아니라 Panel을 하위 클래스로 만드는 것이 좋습니다. Clicked 핸들러를 모든 요소에 연결할 수 있으므로 Panel을 기본 클래스로 사용하면 많은 유연성을 제공하면서 실제 Button 클래스의 불필요한 복잡성을 제거할 수 있습니다.

다음은 Panel에서 자신 만의 버튼 컨트롤을 만드는 예제입니다:

1
2
3
4
5
6
7
8
9
10
<Panel ux:Class="MyButton" HitTestMode="LocalBounds" Margin="4" Color="#25a">
    <string ux:Property="Text" />
    <Text Value="{ReadProperty Text}" Color="#fff" Alignment="Center" Margin="30,15" />

    <WhilePressed>
        <Change this.Color="#138" Duration="0.05" DurationBack=".2" />
    </WhilePressed>
</Panel>

<MyButton Text="Click me" />

그러나 비 모바일 장치에서 사용자 정의 모양으로 되돌아가는(fallback) 플랫폼 네이티브 버튼을 원할 경우 Button을 하위 클래스로 만들어야 합니다.

1
2
3
4
5
6
<Button ux:Class="MyNativeButtonWithFallback" Margin="2">
    <Panel ux:Template="GraphicsAppearance" HitTestMode="LocalBounds">
        <Text Value="{ReadProperty Text}" Color="#fff" Alignment="Center" TextAlignment="Center" Margin="10" />
        <Rectangle CornerRadius="4" Layer="Background" Color="#25a" />
    </Panel>
</Button>

NativeViewHost에 배치되면 버튼은 네이티브 버튼 컨트롤을 초기화하려고 시도합니다. 가능하지 않은 경우(예: 데스크톱에서 실행중인 경우) ux:Template=”GraphicsAppearance”로 지정된 템플릿으로 되돌아갑니다.

1
2
3
4
<NativeViewHost>
    <!-- Will be native if possible -->
    <MyNativeButtonWithFallback Text="Some button" />
</NativeViewHost>

NativeViewHost 내에 Button을 배치하지 않으면 항상 GraphicsAppearance 템플릿이 버튼을 그립니다.

1
<MyNativeButtonWithFallback />

Button의 인터페이스

링크로 대신합니다: https://www.fusetools.com/docs/fuse/controls/button#section-table-of-contents

Was this article helpful to you? Yes No

How can we help?