내가 아래 XAML 같은 그리드가있는 gridview에있는 바탕 화면 또는 전화

Question

에 GRIDVIEW 내부의 그리드를 설정 : 내가 바탕 화면 최대 너비 = 350의 경우 싶습니다

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

를 전화 동안 최대 너비 = 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> 

화면 크기를 알 수 있습니다.

사용자 컨트롤에 전화의 화면 크기가 640px이고 phablets가 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> 

이 코드로 사용할 수 있습니다.

당신이 휴대 전화의 최대 폭은 장치 유형을 검색 할 수 있습니다 (250)인지 확인해야하는 경우

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

.

이 코드는 장치 유형을 감지 할 수 있습니다. wagonli

에 대한

는

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 
} 

들으 그리고 당신은 다음 VisualStateManager를 제거 사용자 컨트롤에이 코드를 추가해야합니다.

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