Как сделать адаптивный интерфейс в Windows 10?

Question

Я пытаюсь перенести свое старое приложение в Windows 10, и я столкнулся с проблемой с сеткой. Я создал сетку на странице XAML с WebView и ListView внутри нее в 2 разных строках. Теперь проблема в том, что она выглядит нормально на локальной машине (ноутбуке), но когда я проверяю ее на Windows Phone, она выглядит не очень хорошо (изображение, текст выглядит очень большим). Пожалуйста, найдите мой XAML-код и DataTemplate для ListView ниже. Я знаю, что RelativePanel сохранит мой день, но может кто-нибудь обновить мой код и предложить мне, чтобы я мог использовать его на каждой странице, так как мое приложение часто использует ListView внутри Grid.

XAML КОД

<Grid x:Name="LayoutRoot" Background="{StaticResource AppBackGroundColor}"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 

    <WebView Grid.Row="0" 
      x:Name="webView" 
      DefaultBackgroundColor="#388941" 
      IsHitTestVisible="False"/> 
    <ListView x:Name="loginandRegisterOptionslist" 
      Margin="0,10,0,0" 
      Grid.Row="1" 
      ScrollViewer.VerticalScrollBarVisibility="Auto" 
      ItemContainerStyle="{StaticResource GenericListViewContainerStyle}" 
      ItemTemplate="{StaticResource WelcomePageListItemTemplate}" 
      VerticalAlignment="Bottom" 
      SelectionMode="Single" 
      /> 
</Grid> 

шаблона данных для выше ListView

<DataTemplate x:Key="WelcomePageListItemTemplate"> 

     <Grid Margin="0,2,0,2" 
      Background="White"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="Auto" /> 
       <ColumnDefinition Width="*" /> 
      </Grid.ColumnDefinitions> 

      <Image Width="80" 
       Height="60" 
       Name="img1" 
       Stretch="Uniform" 
       Margin="4,0,4,0" 
       Grid.Column="0" 
       Source="{Binding IMAGE_URL}"></Image> 

      <StackPanel Grid.Column="1" 
        Margin="0,8,0,8"> 
       <TextBlock Text="{Binding TITLE}" 
         Margin="2" 
         Style="{StaticResource HeaderContentStyle}" /> 
       <TextBlock Text="{Binding VALUE}" 
         Margin="2" 
         Style="{StaticResource DescriptionContentStyle}" /> 
      </StackPanel> 
     </Grid> 

</DataTemplate> 

Answer 1

Есть некоторые решения, которые вы можете попробовать:

• Поместите свой datatemplace внутри пользовательского элемента управления, используйте Adaptive Trigger, чтобы настроить размер изображения и текста в соответствии с размерами разностного экрана.
• Использование разницы XAML View для семей разницы устройств
• При запуске приложения, обнаружить семейство устройств, установите правильное значение для размера связывания базы на этой информации