UWP 앱에서 프로그래밍 방식으로 화면을 적응시키는 방법은 무엇입니까?

Question

UWP 앱에서 프로그래밍 방식의 적응 형 화면을 찾는 방법을 찾으려고하고 있지만 관련 아이디어를 얻을 수 없습니다.

Answer 1

적응 형 트리거는 응용 프로그램의 크기에 따라 레이아웃을 변경하는 데 가장 적합한 솔루션입니다. 예를 보려면 https://www.microsoft.com/en-gb/developers/articles/week03aug15/designing-with-adaptive-triggers-for-windows-10/을 참조하십시오.

개의 버튼에 대한 간단한 예 : 앱 600 개 픽셀보다 넓은

<Grid> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup> 
      <VisualState x:Name="Narrow"> 
      </VisualState> 
      <VisualState x:Name="Wide"> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="600" /> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="TestButton2.Visibility" Value="Visible" /> 
       </VisualState.Setters> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
    <StackPanel> 
     <Button x:Name="TestButton" Content="Test button" /> 
     <Button x:Name="TestButton2" Content="Test button" Visibility="Collapsed" /> 
    </StackPanel> 
</Grid> 

되면 번째 버튼이 표시 될 것이다.

다른 방법

당신은 사용자가 페이지 크기를 조정 때마다 해고 된 Page의 SizeChanged 이벤트를 사용하여 크기 변화에 반응에서 페이지의 레이아웃을 변경할 수 있습니다. 그러나 이것은 깨끗한 접근법이 아니며 내장 된 적응 형 트리거를 사용하면 훨씬 더 적합합니다.

//in the page's constructor wire-up the SizeChanged event 
this.SizeChanged += MainPage_SizeChanged;  

private void MainPage_SizeChanged(object sender, SizeChangedEventArgs e) 
{ 
    if (e.NewSize.Width < 768) 
    { 
     //some layout changes 
    } 
    else if (e.NewSize.Width < 1024) 
    { 
     //some layout changes 
    } 
    else 
    { 
     //etc. 
    } 
} 

수동 코드에서 페이지의 현재 VisualState을 전환 할 수 있습니다.

먼저 XAML에서 일부 VisualStates 정의 :

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="CustomGroup"> 
      <VisualState x:Name="ShowButtonState" /> 
      <VisualState x:Name="HideButtonState"> 
       <VisualState.Setters> 
        <Setter Target="TestButton.Visibility" Value="Collapsed" /> 
       </VisualState.Setters> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
    <Button x:Name="TestButton" Content="Test button" /> 
</Grid> 

을 그리고 코드의 상태를 전환 :

if (someCondition) 
{ 
    VisualStateManager.GoToState(this, "HideButtonState", false); 
}    
else 
{ 
    VisualStateManager.GoToState(this, "ShowButtonState", false); 
}