UWPのすべてのビューに応答するグリッドビューの設計方法は？

Question

私はWindowsユニバーサルプラットフォーム（ユニバーサルアプリ - UWP）で作業しています。グリッドコントロールの応答性に関する問題があります。どのようにすべてのビューに応答するグリッドを設計する。私は、グリッドをこのように設計されています：

コード：

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

私がこのように設計されたが、グリッドが正しくので、ビューごとに応答性を動作しない、それは簡単に応答させるいかなる解決策がある場合はその提供します解決策。

Answer 1

すべてのビジュアル状態を管理することによって、リストビューの幅をコードの背後に（c＃）提供できます。 コード：

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(); 
      } 

使用PageSizeStatesGroup視覚的な状態を管理して、あなたのscrrnの要件ごとに幅を提供します。

Answer 2

あなたの現在の問題（表示サイズに問題がありますか？希望する結果は何ですか？）について詳しく教えてください。

は、ビューポート/デバイスの要件に、あなたは1を選んだのか、次のソリューションを組み合わせることができますによって異なりますのコンテンツのサイズ/フローを変更するには、各デバイス・ファミリの

• 使用差XAML
• 使用visualSTATEのビュー
• 背後にあるコードで条件をチェックして、視野を調整応じ
• はプログラム

背後にあるコードから、あなたのUIを構築します

Answer 3

あなたができる最も良いことは、画面サイズに基づいて自動的にサイズを変更する状態トリガを使用することです。このexample