UWP DataTemplateの列が伸びていない

Question

私は、視聴/購入/ストリーミングされたテレビ番組を追跡するUWPアプリを作成しています。 DataTempate内のグリッド列を取得しようとしています。 *幅の定義を無視するXAMLのバグ。残りのスペース（したがって、列定義= "*"）を取り込むために、ListView（表示タイトル）の最初の列が必要ですが、HeaderTemplateではDataTemplate内でそれを行うことを絶対に拒否しますタイトル列は各行に必要なスペースしか使用しないので、グリッドはすべてうんざりしていて、整列していません。

私のXAMLは以下の通りです - ItemTemplateにDataTemplateをテンプレートに私は私のメインのビューモデルで監視可能なコレクションであるTVShowと呼ばれるオブジェクトのインスタンスに結合しています。 （私はこれが純粋にXAMLの問題であることを知っているので、ViewModelクラスまたはTVShowクラス定義はここには含めていません）。

これまでに働いたのは、TVShowクラスで、グリッドサイズから他の3つの列の幅を差し引いて（ビューコードに取り込まれた）しかし、これはリスト全体が初期の表示後にひどいプログラミングを言い表すのではなく、醜いように見えるようになります。

私はこれを解決するためのアイデアを探しています。どのように私は "TVShow"にバインドされているテンプレートでバインドするのですか？または、DataTemplateからコンテンツを取り出してUserControlを配置する必要がありますか？私は何かに多くの時間を無駄にしていますとてもばかげてシンプルです - このバグはs WPFではなぜこれを修正していないのですか？非常にイライラします。

<HubSection Name="hsShows" Width="{Binding HubSectionWidth}" MinWidth="430" MaxWidth="640" 
      VerticalAlignment="Top" HorizontalAlignment="Stretch" Background="{StaticResource Dark}" > 

    <HubSection.Header> 
     <TextBlock Text="Shows" TextLineBounds="TrimToBaseline" OpticalMarginAlignment="TrimSideBearings" 
            FontSize="24" Foreground="{StaticResource Light}"/> 
    </HubSection.Header> 

    <DataTemplate x:DataType="local:MainPage"> 

     <ListView Name="lvwShows" 
            Width="{Binding HubSectionGridWidth}" 
            Grid.Row="0" 
            Foreground="{StaticResource Light}" 
            Background="{StaticResource Dark}" 
            Margin="-14,20,0,0" 
            Loaded="lvwShows_Loaded" 
            ItemsSource="{Binding AllShows}"        
            HorizontalAlignment="Stretch" 
            HorizontalContentAlignment="Stretch" 
            IsSwipeEnabled="True" 
            IsItemClickEnabled="True" 
            SelectedItem="{Binding SelectedTVShow, Mode=TwoWay}"         
            SelectionMode="Single"        
            ScrollViewer.VerticalScrollMode="Enabled" 
            ScrollViewer.VerticalScrollBarVisibility="Auto"> 

      <ListView.ItemContainerStyle> 
       <Style TargetType="ListViewItem"> 
        <Setter Property="HorizontalAlignment" Value="Stretch" /> 
       </Style> 
      </ListView.ItemContainerStyle> 

      <ListView.HeaderTemplate> 
       <DataTemplate> 
        <Grid Width="{Binding HubSectionGridWidth}" Height="Auto" Background="DarkGreen" Margin="15,5,5,5" HorizontalAlignment="Stretch"> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="*"/> 
          <ColumnDefinition Width="80"/> 
          <ColumnDefinition Width="100"/> 
          <ColumnDefinition Width="80"/> 
         </Grid.ColumnDefinitions> 

         <TextBlock Grid.Column="0" Text="Title" FontSize="16" FontWeight="Bold" Foreground="{StaticResource Bright}" 
                VerticalAlignment="Bottom" HorizontalAlignment="Left" 
                Tag="TITLE,ASC" Tapped="ShowsGridHeading_Tapped"/> 

         <TextBlock Grid.Column="1" Text="Seasons" FontSize="16" FontWeight="Bold" Foreground="{StaticResource Bright}" 
                VerticalAlignment="Bottom" HorizontalAlignment="Center" 
                Tag="SEASONS,ASC" Tapped="ShowsGridHeading_Tapped"/> 

         <TextBlock Grid.Column="2" Text="Last Watched" FontSize="16" FontWeight="Bold" Foreground="{StaticResource Bright}" 
                VerticalAlignment="Bottom" HorizontalAlignment="Center" TextAlignment="Center" TextWrapping="Wrap" 
                Tag="WATCHED,ASC" Tapped="ShowsGridHeading_Tapped"/> 

         <TextBlock Grid.Column="3" Text="Last Episode" FontSize="16" FontWeight="Bold" Foreground="{StaticResource Bright}" 
                VerticalAlignment="Bottom" HorizontalAlignment="Center" TextAlignment="Center" TextWrapping="Wrap" 
                Tag="EPISODE,ASC" Tapped="ShowsGridHeading_Tapped"/> 
        </Grid> 
       </DataTemplate> 
      </ListView.HeaderTemplate> 

      <ListView.ItemTemplate> 
       <DataTemplate x:DataType="model:TVShow"> 
        <Grid Height="Auto" MinWidth="410" MaxWidth="640" Background="Blue" HorizontalAlignment="Stretch" RightTapped="ShowsList_RightTapped"> 

         <FlyoutBase.AttachedFlyout> 
          <MenuFlyout Placement="Bottom"> 
           <MenuFlyoutItem x:Name="UpdateButton" Text="Update from TVMaze" Click="FlyoutUpdateButton_Click"/> 
           <MenuFlyoutItem x:Name="RefreshButton" Text="Refresh" Click="FlyoutRefreshButton_Click"/> 
           <MenuFlyoutItem x:Name="DeleteButton" Text="Delete Show" Click="FlyoutDeleteButton_Click"/> 
          </MenuFlyout> 
         </FlyoutBase.AttachedFlyout> 

         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="*"/> 
          <ColumnDefinition Width="80"/> 
          <ColumnDefinition Width="100"/> 
          <ColumnDefinition Width="80"/> 
         </Grid.ColumnDefinitions> 

         <TextBlock Grid.Row="0" Grid.Column="0" Text="{x:Bind Title}" Foreground="{StaticResource Light}" 
                VerticalAlignment="Center" HorizontalAlignment="Stretch" TextWrapping="Wrap" /> 

         <TextBlock Grid.Row="0" Grid.Column="1" Text="{x:Bind Seasons}" Foreground="{StaticResource Light}" 
                VerticalAlignment="Center" HorizontalAlignment="Center"/> 

         <TextBlock Grid.Row="0" Grid.Column="2" Foreground="{StaticResource Light}" 
                Text="{x:Bind LastWatchedDate, Mode=OneWay, Converter={StaticResource DateTimeFormatConverter}, ConverterParameter='{}{0:dd/MM/yyy HH\\\\:mm}'}"        
                VerticalAlignment="Center" HorizontalAlignment="Center"/> 

         <TextBlock Grid.Row="0" Grid.Column="3" Text="{Binding LastWatchedEpisodeRef}" Foreground="{StaticResource Light}" 
                VerticalAlignment="Center" HorizontalAlignment="Center"/> 
        </Grid> 
       </DataTemplate> 
      </ListView.ItemTemplate> 
     </ListView> 
    </DataTemplate> 
</HubSection> 

Answer 1

あなたがのviewmodelに正しい幅を持っている場合は、この問題は、あなたが、アイテムの内Gridストレッチを作るために、ListViewItemのデフォルトテンプレートによって引き起こされるこの

Width={Binding ElementName = ListViewname,Path=DataContext.width} 

Answer 2

ようにそれをバインドすることができます =>編集生成されたアイテムのコンテナを選択します（ラベル=>あなたのListView制御し、それを右クリックを見つけ、その後、編集追加のテンプレートを選択しItemCoをドキュメントアウトラインを開くことができますntainerStyle）、最後にを編集してください。

次に、あなたがあなたのページのリソースでこのテンプレートを見つけるだろう、コードを変更してください：

<Setter Property="HorizontalContentAlignment" Value="Left" /> 

へ：

<Setter Property="HorizontalContentAlignment" Value="Stretch" /> 

は、その後、あなたの問題を解決することができます。

私はあなたがこのスタイルは、このページのすべてのListViewをターゲットにしたい場合は、このテンプレートのx:Key属性を削除し、上部のアクションによって生成されたStaticResourceとItemContainerStyleを削除することができ、1 ListView、より多くをした見た

。

私はあなたがWPFを以前に開発したと思います。UWPを学ぶのは簡単です。テンプレートやコントロールのスタイルを編集することで多くのレイアウト問題を解決できます。ここではdefault templates and styles of different controlsですが、次回にこのような問題が発生する場合があります。

UWPアプリの開発方法については、Develop UWP appsを参照してください。また、APIに問題がある場合はReference for Universal Windows appsを参照してください。

もしあなたが助けや助言を必要とするなら、ここで質問するかもしれませんが、ここの人々は助けてくれると嬉しいです。

Answer 3

私はこのXAMLをListViewsに追加しました（しかし、Graceが示唆したことを実行できたことは知っていますが、私はBlend horrificを使用して見つけました） - 実際にトリックを行ったHorizo​​ntalContentAlignmentでした！

<ListView.ItemContainerStyle> 
    <Style TargetType="ListViewItem"> 
     <Setter Property="HorizontalAlignment" Value="Stretch" /> 
     <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
    </Style> 
</ListView.ItemContainerStyle>