수색…
AdaptiveTrigger를 사용하여 UI 레이아웃 변경
UWP 응용 프로그램은 윈도우 모드 및 여러 장치에서 실행할 수 있습니다. 로우 엔드 폰에서 거대한 표면 허브 스크린까지 다양한 화면 크기로 디스플레이 할 수 있습니다. 상대 위치 지정을 사용하면 많은 시나리오에서 충분하지만 창 크기가 커지면 페이지의 컨트롤을 다른 위치로 이동하여 레이아웃을 완전히 변경하는 것이 항상 재미 있습니다.
이 샘플에서는 좁은 화면에서는 세로 레이아웃을 사용하고 와이드 스크린에서는 가로 레이아웃을 사용합니다. 대형 화면에서 항목의 크기도 변경합니다.
<Border x:Name="item2"
Background="Aquamarine"
Width="50"
Height="50">
<TextBlock Text="Item 2"
VerticalAlignment="Center"
HorizontalAlignment="Center" />
</Border>
<Border x:Name="item3"
Background="LightCoral"
Width="50"
Height="50">
<TextBlock Text="Item 3"
VerticalAlignment="Center"
HorizontalAlignment="Center" />
</Border>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="ultrawide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="800" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="mainPanel.Orientation" Value="Horizontal" />
<Setter Target="item1.Width" Value="100" />
<Setter Target="item1.Height" Value="100" />
<Setter Target="item2.Width" Value="100" />
<Setter Target="item2.Height" Value="100" />
<Setter Target="item3.Width" Value="100" />
<Setter Target="item3.Height" Value="100" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="wide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="mainPanel.Orientation" Value="Horizontal" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="narrow" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
창 크기를 조정하면 시스템은 현재 창 너비와 AdaptiveTrigger의 최소 너비를 비교합니다. 현재 너비가 최소 너비보다 크거나 같으면 트리거가 활성화되고 해당 VisualState가 표시됩니다.
다음은 여러 상태에 대한 출력입니다.
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow