Réglez la grille à l'intérieur du Gridview sur le bureau ou par téléphone

Question

J'ai un gridview dans lequel il y a une grille comme XAML ci-dessous:

<Page.Resources> 
     <DataTemplate x:Key="VideoDataTemplate"> 
      <Grid Background="LightGray" Margin="5,10"> 
       <Grid x:Name="VideoContent" Margin="10,10,0,0" HorizontalAlignment="Center" VerticalAlignment="Top" MaxWidth="350"> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="auto"/> 
         <RowDefinition Height="auto"/> 
         <RowDefinition Height="auto"/> 
         <RowDefinition Height="auto"/> 
        </Grid.RowDefinitions> 

        <Border Grid.Row="0" Margin="0,10,0,0" HorizontalAlignment="Center" BorderThickness="1" BorderBrush="Black" Background="{x:Null}"> 
         <Image Margin="0,0,5,5" Source="{Binding Thumbnail}" Height="140" Width="200" HorizontalAlignment="Center"/> 
        </Border> 

        <ScrollViewer Grid.Row="1" Margin="10,10,10,0" HorizontalScrollMode="Auto" VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto"> 
         <TextBlock Margin="0,0,10,10" Text="{Binding Title}" FontSize="18" FontWeight="SemiBold" TextWrapping="Wrap"/> 
        </ScrollViewer> 
        <TextBlock Grid.Row="2" Margin="15,0,10,10" Text="{Binding PubDate}" FontSize="16" TextWrapping="Wrap"/> 

        <ScrollViewer Grid.Row="3" Margin="10,10,10,10" MinHeight="40" MaxHeight="150" HorizontalScrollMode="Disabled" VerticalScrollMode="Auto" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Disabled" Background="{x:Null}"> 
         <TextBlock Margin="0,0,10,10" Text="{Binding Description}" FontSize="16" TextWrapping="WrapWholeWords" Height="auto"/> 
        </ScrollViewer> 
       </Grid> 
      </Grid> 
     </DataTemplate> 
    </Page.Resources> 

Je voudrais si sur le bureau MaxWidth = 350, tandis que sur le téléphone MaxWidth = 250

Comment l'appliquer?

Answer 1

J'ai besoin d'un contrôle utilisateur pour le faire.

Je devrais déplacer votre code au contrôle de l'utilisateur et utiliser les déclencheurs adaptatifs.

<UserControl 
    x:Class="HwliqeaivFqeakkpfl.VideoPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:HwliqeaivFqeakkpfl" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" 
    d:DesignHeight="300" 
    d:DesignWidth="400"> 

    <Grid> 
     <Grid Background="LightGray" Margin="5,10"> 
      <Grid x:Name="VideoContent" Margin="10,10,0,0" HorizontalAlignment="Center" VerticalAlignment="Top" MaxWidth="350"> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="auto"/> 
        <RowDefinition Height="auto"/> 
        <RowDefinition Height="auto"/> 
        <RowDefinition Height="auto"/> 
       </Grid.RowDefinitions> 

       <Border Grid.Row="0" Margin="0,10,0,0" HorizontalAlignment="Center" BorderThickness="1" BorderBrush="Black" Background="{x:Null}"> 
        <Image Margin="0,0,5,5" Source="{Binding Thumbnail}" Height="140" Width="200" HorizontalAlignment="Center"/> 
       </Border> 

       <ScrollViewer Grid.Row="1" Margin="10,10,10,0" HorizontalScrollMode="Auto" VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto"> 
        <TextBlock Margin="0,0,10,10" Text="{Binding Title}" FontSize="18" FontWeight="SemiBold" TextWrapping="Wrap"/> 
       </ScrollViewer> 
       <TextBlock Grid.Row="2" Margin="15,0,10,10" Text="{Binding PubDate}" FontSize="16" TextWrapping="Wrap"/> 

       <ScrollViewer Grid.Row="3" Margin="10,10,10,10" MinHeight="40" MaxHeight="150" HorizontalScrollMode="Disabled" VerticalScrollMode="Auto" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Disabled" Background="{x:Null}"> 
        <TextBlock Margin="0,0,10,10" Text="{Binding Description}" FontSize="16" TextWrapping="WrapWholeWords" Height="auto"/> 
       </ScrollViewer> 
      </Grid> 
     </Grid> 
    </Grid> 
</UserControl> 

Voir Screen sizes and break points for responsive design pour connaître la taille de l'écran.

J'ajoute Adaptive Triggers dans le contrôle utilisateur que la taille de l'écran du téléphone est 640px et phablets est 1000px.

<UserControl 
    x:Class="HwliqeaivFqeakkpfl.VideoPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:HwliqeaivFqeakkpfl" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" 
    d:DesignHeight="300" 
    d:DesignWidth="400"> 

    <Grid> 
     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="WindowStates"> 
       <VisualState x:Name="WideState"> 
        <VisualState.StateTriggers> 
         <AdaptiveTrigger MinWindowWidth="1000" /> 
        </VisualState.StateTriggers> 
        <VisualState.Setters> 
         <Setter Target="VideoContent.MaxWidth" Value="350" /> 
        </VisualState.Setters> 
       </VisualState> 
       <VisualState x:Name="NarrowState"> 
        <VisualState.StateTriggers> 
         <AdaptiveTrigger MinWindowWidth="640" /> 
        </VisualState.StateTriggers> 
        <VisualState.Setters> 
         <Setter Target="VideoContent.MaxWidth" Value="250" /> 
        </VisualState.Setters> 
       </VisualState> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 
     <Grid Background="LightGray" Margin="5,10"> 
      <Grid x:Name="VideoContent" Margin="10,10,0,0" HorizontalAlignment="Center" VerticalAlignment="Top" MaxWidth="350"> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="auto"/> 
        <RowDefinition Height="auto"/> 
        <RowDefinition Height="auto"/> 
        <RowDefinition Height="auto"/> 
       </Grid.RowDefinitions> 

       <Border Grid.Row="0" Margin="0,10,0,0" HorizontalAlignment="Center" BorderThickness="1" BorderBrush="Black" Background="{x:Null}"> 
        <Image Margin="0,0,5,5" Source="{Binding Thumbnail}" Height="140" Width="200" HorizontalAlignment="Center"/> 
       </Border> 

       <ScrollViewer Grid.Row="1" Margin="10,10,10,0" HorizontalScrollMode="Auto" VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto"> 
        <TextBlock Margin="0,0,10,10" Text="{Binding Title}" FontSize="18" FontWeight="SemiBold" TextWrapping="Wrap"/> 
       </ScrollViewer> 
       <TextBlock Grid.Row="2" Margin="15,0,10,10" Text="{Binding PubDate}" FontSize="16" TextWrapping="Wrap"/> 

       <ScrollViewer Grid.Row="3" Margin="10,10,10,10" MinHeight="40" MaxHeight="150" HorizontalScrollMode="Disabled" VerticalScrollMode="Auto" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Disabled" Background="{x:Null}"> 
        <TextBlock Margin="0,0,10,10" Text="{Binding Description}" FontSize="16" TextWrapping="WrapWholeWords" Height="auto"/> 
       </ScrollViewer> 
      </Grid> 
     </Grid> 
    </Grid> 
</UserControl> 

Vous pouvez l'utiliser comme ce code.

<ListView x:Name="YqxczetXexj" > 
     <ListView.ItemTemplate> 
      <DataTemplate> 
       <local:VideoPage></local:VideoPage> 
      </DataTemplate> 
     </ListView.ItemTemplate> 
    </ListView> 

Si vous devez faire la largeur maximale du téléphone est de 250 que vous pouvez détecter le type de périphérique.

Ce code peut détecter le type de périphérique.

public static class DeviceTypeHelper 
{ 
    public static DeviceFormFactorType GetDeviceFormFactorType() 
    { 
     switch (AnalyticsInfo.VersionInfo.DeviceFamily) 
     { 
      case "Windows.Mobile": 
       return DeviceFormFactorType.Phone; 
      case "Windows.Desktop": 
       return UIViewSettings.GetForCurrentView().UserInteractionMode == UserInteractionMode.Mouse 
        ? DeviceFormFactorType.Desktop 
        : DeviceFormFactorType.Tablet; 
      case "Windows.Universal": 
       return DeviceFormFactorType.IoT; 
      case "Windows.Team": 
       return DeviceFormFactorType.SurfaceHub; 
      default: 
       return DeviceFormFactorType.Other; 
     } 
    } 
} 

public enum DeviceFormFactorType 
{ 
    Phone, 
    Desktop, 
    Tablet, 
    IoT, 
    SurfaceHub, 
    Other 
} 

Thx pour wagonli

Et vous devez retirer le VisualStateManager puis ajoutez ce code dans le contrôle de l'utilisateur.

public VideoPage() 
    { 
     this.InitializeComponent(); 
     if (GetDeviceFormFactorType() == DeviceFormFactorType.Phone) 
     { 
      VideoContent.MaxWidth = 250; 
     } 
    }