Set the Grid inside the Gridview on the desktop or phone

Question

I have a gridview in which there is a grid like XAML below:

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

I would like if on desktop MaxWidth = 350, while on phone MaxWidth = 250

How to apply it?

Answer 1

I need a user control to do it.

I should move your code to user control and use Adaptive Triggers.

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

See Screen sizes and break points for responsive design that you can get the size of the screen.

I add Adaptive Triggers in user control that the screen size of phone is 640px and to phablets is 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>

You can use it as this code.

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

If you have to make the phone's max width is 250 that you can detect device type.

This code can detect device type.

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

And you should remove the VisualStateManager then add this code in user control.

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