1. 首页
  2. 问答
  3. 列在UWP DataTemplate不拉伸

列在UWP DataTemplate不拉伸

2016-04-14 35 views
2

我正在写一个UWP应用程序来跟踪观看/购买/流等电视节目和 是绝对疯狂试图获取DataTempate中的网格列来扩展它们的宽度，因为它似乎有一个XAML中的错误忽略了* width定义。我需要ListView中的第一列（显示标题）占用剩余的空间（因此列定义=“*”），虽然它会在HeaderTemplate中这样做，但它绝对拒绝在DataTemplate中这样做，所以整个由于标题列仅使用每行所需的空间，因此网格最终会变得不可靠和不协调。列在UWP DataTemplate不拉伸

我的XAML低于 - 在ItemTemplate DataTemplate中的模板，我结合称为TVShow一个对象，它是可观察集合在我的主视图模型的实例。 （我没有在这里包含ViewModel或TVShow类的定义，因为我知道这是纯粹的XAML问题）。

到目前为止唯一有效的工作是在我的TVShow类中存储一个额外的属性，该属性存储列的正确宽度（通过从网格大小减去其他三列的宽度（在后面的视图代码中获取）但这会导致整个列表重新格式化后，初步显示哪些看起来丑陋，更不用说可怕的编程

所以我正在寻找如何解决这个问题的想法 - 我可以移动属性的正确列宽主视图模型，但我怎么绑定到模板中的，因为我绑定到“TVShow”？或者我必须从DataTemplate中取出内容并放入UserControl？我浪费了太多时间在某些事情上是如此荒谬的简单 - 这个bug似乎已经出现了因此WPF为什么没有MS修复这个 - 非常令人沮丧。

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

来源

2016-04-14 nzmike

回答

1

如果您在视图模型有正确的宽度可以绑定像这样

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

来源

2016-04-15 03:11:33 Archana

+0

感谢您 - 已经尝试过这种方式，但没有正确的语法，所以不能得到它的工作。我最终完成了我在答案中的内容，但我已经提出了这个建议，因为它仍然非常有用。 – nzmike

1

此问题是由ListViewItem的默认模板引起的，使项目内的Grid舒展，你可以打开文档提纲 label =>找到你的ListView控件并右键点击它，然后选择编辑附加模板 =>选择编辑生成物品容器（ItemCo ntainerStyle），最后编辑副本。

enter image description here

这时你会发现在你的页面资源此模板，请更改代码：

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

要：

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

然后您就可以解决问题。

我看到你已经不止一个ListView，如果您希望此型靶所有ListView在这个页面，你可以删除这个模板的x:Key属性，并与由行动所产生的静态资源删除ItemContainerStyle上。

不要沮丧，我觉得你以前开发WPF，很容易学习UWP。编辑模板或控件的样式可以解决许多布局问题，下面是一些default templates and styles of different controls，下次您有这样的问题时可以看看。

如果您对如何开发UWP应用程序有疑问，可以参考Develop UWP apps，如果您在使用API​​方面遇到问题，可以参考Reference for Universal Windows apps。

如果您需要帮助或建议，您可以在此提问，这里的人很乐意提供帮助。

来源

2016-04-15 04:39:06

+0

感谢恩典 - 这是我所做的，但不像进入Blend那样复杂（你需要火箭科学学位才能使用），请参阅我的答案。 – nzmike

3

好的，所以我最终将这个XAML添加到了我的ListViews中（尽管我知道我可以完成Grace的建议，但是我发现Blend可怕） - 这是Horizo​​ntalContentAlignment实际上做的窍门！

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

来源

2016-04-15 22:46:55 nzmike

+1

是的，我建议修改这个'Horizo​​ntalContentAligment'属性的值。 –

相关问题

 相关问题