How to Design Grid view which is responsive for all view in UWP?

Question

I am working on windows Universal platform(Universal app-UWP). I have issue regarding Responsiveness of the Grid Control. How to design a grid which is responsive for all view. I am designed a grid this way:

Code:

<ListView Margin="30,0,0,1" MaxHeight="160"    Visibility="Visible" ScrollViewer.VerticalScrollMode="Enabled" Name="lstAssociatedProduct" Grid.Row="1" Grid.Column="0" BorderThickness="0" BorderBrush="#FFA79E9E" UseLayoutRounding="False"  >
                        <ListView.ItemContainerStyle>
                            <Style TargetType="ListViewItem">
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="ListViewItem">
                                            <Grid>
                                                <VisualStateManager.VisualStateGroups>
                                                    <VisualStateGroup x:Name="CommonStates">
                                                        <VisualState x:Name="Normal"/>
                                                    </VisualStateGroup>
                                                    <VisualStateGroup x:Name="SelectionStates">
                                                        <VisualState x:Name="Unselected">
                                                            <Storyboard>
                                                                <ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Transparent"/>
                                                            </Storyboard>
                                                        </VisualState>
                                                        <VisualState x:Name="SelectedUnfocused">
                                                            <Storyboard>
                                                                <ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="#FFF4F4F4"/>
                                                            </Storyboard>
                                                        </VisualState>
                                                    </VisualStateGroup>
                                                </VisualStateManager.VisualStateGroups>
                                                <Border x:Name="myback" Background="Transparent">
                                                    <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                                                </Border>
                                            </Grid>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="Padding" Value="0,0,0,0"/>
                                <Setter Property="Margin" Value="0,-10,0,-10"/>
                            </Style>
                        </ListView.ItemContainerStyle>
                        <ListView.HeaderTemplate>
                            <DataTemplate>
                                <Grid x:Name="grdAssociateTitle" MinWidth="700"  HorizontalAlignment="Left"  Margin="5,0,0,10">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="250*"></ColumnDefinition>
                                        <ColumnDefinition Width="100*"></ColumnDefinition>
                                        <ColumnDefinition Width="50*"></ColumnDefinition>
                                        <ColumnDefinition Width="50*"></ColumnDefinition>
                                        <ColumnDefinition x:Name="clmStatus" Width="150*"></ColumnDefinition>
                                    </Grid.ColumnDefinitions>

                                    <TextBlock Grid.Column="0" x:Name="name_title_detail" Text="Name"  HorizontalAlignment="Stretch" Foreground="#FF020202"  FontWeight="Bold" Margin="0"></TextBlock>
                                    <TextBlock Grid.Column="1" x:Name="sku_title_detail" Text="Surname" HorizontalAlignment="Left" Foreground="#FF040404" FontWeight="Bold"></TextBlock>
                                    <TextBlock Grid.Column="2" x:Name="qty_title_detail" Text="Age" Foreground="#FF080808" HorizontalAlignment="Left"  FontWeight="Bold"></TextBlock>
                                    <TextBlock x:Name="txtAcPriceTitle"  Grid.Column="3" Text="City" Margin="0,0,0,0" Foreground="#FF080808" HorizontalAlignment="Left"  FontWeight="Bold"></TextBlock>
                                    <TextBlock Grid.Column="4" Text="Status" x:Name="Address" Foreground="#FF080808" HorizontalAlignment="Left"  FontWeight="Bold"></TextBlock>
                                </Grid>
                            </DataTemplate>
                        </ListView.HeaderTemplate>
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <Grid Margin="5,5,0,0" x:Name="grdAssociateData"  MinWidth="700"  HorizontalAlignment="Left">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="250*"></ColumnDefinition>
                                        <ColumnDefinition Width="100*"></ColumnDefinition>
                                        <ColumnDefinition Width="50*"></ColumnDefinition>
                                        <ColumnDefinition Width="50*"></ColumnDefinition>
                                        <ColumnDefinition Width="150*"></ColumnDefinition>
                                    </Grid.ColumnDefinitions>

                                    <TextBlock Grid.Column="0" x:Name="name_ans" Text="{Binding name}" Foreground="#FF020202" TextWrapping="Wrap" HorizontalAlignment="Left"  FontWeight="Normal"></TextBlock>
                                    <TextBlock Grid.Column="1" x:Name="sku_ans" Text="{Binding surname}" Foreground="#FF040404" HorizontalAlignment="Left" TextWrapping="Wrap" FontWeight="Normal"></TextBlock>
                                    <TextBlock Grid.Column="2" x:Name="qty_ans" Text="{Binding age}" Foreground="#FF080808" HorizontalAlignment="Left" FontWeight="Normal"></TextBlock>
                                    <TextBlock Grid.Column="3" x:Name="price_ans" Text="{Binding city}" Foreground="#FF080808" Margin="0,0,0,0" HorizontalAlignment="Left" FontWeight="Normal"></TextBlock>
                                    <TextBlock Grid.Column="4"  x:Name="status_ans" Text="{Binding addres}" Foreground="#FF080808" HorizontalAlignment="Left"  FontWeight="Normal"></TextBlock>
                                </Grid>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>

I designed this way but the Grid not properly work responsiveness as per the view so, If there are any solution which make it easily responsive so provide a solution.

Answer 1

The best thing you could do is to use State Triggers which automatically resize based on the Screen size.

Check this example

Answer 2

We can provide a width of listview in code behind (c#) through the managing all visual state. Code:

if (PageSizeStatesGroup.CurrentState == WideState) //Desktop Devie
            {

            }
            else if (PageSizeStatesGroup.CurrentState == MediumState) // // //tablate state
            {
                lstorderdetail.Width = 650;


            }
            else if (PageSizeStatesGroup.CurrentState == MobileState)
            {


            }
            else
            {
                lstorderdetail.Width = 1200;
                new InvalidOperationException();
            }

Use PageSizeStatesGroup to manage the visual state and then provide a width as per your scrrn requirement.

Answer 3

Please tell more about your current problem (at which view size it has problem ? What is your desired result ?).

Depend on your view port / device requirements, you can chose one or combine the following solutions:

• Use difference XAML for each device family
• Use VisualState to change the size/flow of content of the view
• Check the conditions in code behind and adjust the view accordingly
• Programmatically build your UI from code behind