設置在GridView內部電網的臺式機或手機

Question

上我有一個GridView，其中有下面像XAML網格：

<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> 

我想，如果在桌面上MaxWidth = 350，而在手機MaxWidth = 250

如何申請？

Answer 1

我需要一個用戶控件來做到這一點。

我應該將您的代碼移動到用戶控件並使用自適應觸發器。

<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> 

請參閱Screen sizes and break points for responsive design您可以獲得屏幕的大小。

我在用戶控件中添加了自適應觸發器，手機的屏幕尺寸爲640px，平階段爲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> 

您可以使用它作爲此代碼。

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

如果你有做手機的最大寬度爲250，你可以檢測設備類型。

此代碼可以檢測設備類型。

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爲wagonli

而且你應該刪除VisualStateManager然後在用戶控件添加以下代碼。

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