Windows 전화의 해상도가 다릅니다.

Question

티타늄 앱 (iOS 및 Android 용)을 Windows Phone 8.1로 옮깁니다. 나는 Windows 응용 프로그램에서 초보자입니다.

다른 화면에서 동일한 모양을 가진 앱을 만들고 싶습니다. 더 큰 화면의 요소는 더 크게 표시되지만 앱의 측면은 그대로 유지해야합니다. 페이지에 요소를 배치하려면 여백과 너비 및 높이를 정의해야한다고 생각합니다.

MainPage.xaml에 몇 가지 기본 요소를 추가하고 어떤 결과가 발생했는지 확인하려고했습니다. 나는 다른 인치와 다른 Windows 전화 시뮬레이터를 시도하고 결과는 끔찍했다

<Grid> 

    <Image Source="Assets/ppal/fondoCompleto.png" 
      Margin="-25, 0, -25, 0"></Image> 
    <Image Source="Assets/ppal/settings.png" 
      Margin="10,10,365,612"></Image> 
    <TextBlock Text="aaa" FontFamily="Arial" 
       TextAlignment="Center" 
       Margin="0, 200, 0, 0" 
       FontSize="22"/> 

    <Rectangle 
     Fill="#0098bc" 
     Margin="30, 50, 30, 450" 
     RadiusX="5" 
     RadiusY="5"/> 
</Grid> 

: 이것은 내 코드입니다. 그것은 4 인치는 괜찮지 만 6 인치는 매우 나쁘다.

내가 어떻게 할 수 있는지 알고 있니?

픽셀이 아닌 딥과 같은 단위를 사용할 방법이 있습니까?

너비, 높이, 여백을 변환하고 화면 크기에 따라 값을 반환하는 공식이 있습니까? (티타늄 앱에서 사용하는 것입니다 : Titanium conversion pixels to dp)

대단히 고마워요!

Answer 1

는

필요하지 않게을 "나는 페이지에 요소를 배치 할 여백과 너비와 높이를 정의 할 필요가 있다고 생각합니다." 겹칠 필요가 있거나 애니메이션을 통해 주위를 돌아 다니는 요소가있는 경우에는 폼 요소를 배치하는 경우 그리드 (또는 여러 그리드)를 사용하여 정렬해야합니다. 내가 위에서로부터 분별 귀하의 레이아웃을 시도하지 않을거야 (어쨌든 임의의 테스트처럼 보인다),하지만은 다음과 같이 보일 것이다 :

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="100" /> 
     <RowDefinition Height="*" /> 
     <RowDefinition Height="2*" /> 
     <RowDefinition Height="50" /> 
    </Grid.RowDefinitions> 
    <Image Source="Assets/ppal/fondoCompleto.png" Grid.Row="0"></Image> 
    <Image Source="Assets/ppal/settings.png" Grid.Row="1"></Image> 
    <Rectangle Grid.Row="2" Fill="#0098bc" RadiusX="5" RadiusY="5" /> 
    <TextBlock Grid.Row="3" Text="aaa" FontFamily="Arial" TextAlignment="Center" FontSize="22"/> 
</Grid> 

이 네 개의 행 배치됩니다; 상단은 100px 높이, 하단은 50px 높이, 두 중간 행은 화면 공간 (*)의 나머지 부분을 채우며 두 번째는 첫 번째 (2*)의 두 배입니다. ColumnDefinitions와 동일하게 수행 할 수 있습니다. 이미지는 포함하는 격자 셀에 맞도록 크기가 조정되어야하며 일반적으로 적합하지 않은 다른 요소를 맞추려면 ViewBox과 같은 것을 사용할 수 있습니다.

그리드 레이아웃과 여백/수평 맞춤을 조합하여 원하는 레이아웃을 얻을 수도 있습니다. 여백은 포함 그리드 셀에 상대적입니다. 또한 단일 그리드 셀 안에 여러 요소가있는 것을 막을 수있는 방법은 없습니다. 두 항목에 Grid.Row=1을 넣은 다음 여백 등을 사용하여 원하는대로 레이아웃 할 수 있습니다.