Fatal编程技术网
  • csharp/
  • C# UWP数据模板中的列未拉伸

C# UWP数据模板中的列未拉伸

c# xaml mvvm

C# UWP数据模板中的列未拉伸,c#,xaml,mvvm,win-universal-app,datatemplate,C#,Xaml,Mvvm,Win Universal App,Datatemplate,我正在编写一个UWP应用程序来跟踪观看/购买/播放的电视节目等 试图让DataTempate中的网格列扩展其宽度，我简直疯了，因为XAML中似乎存在忽略*宽度定义的错误。我需要ListView中的第一列（显示标题）来占用剩余空间（因此列定义为“*”）虽然它会在HeaderTemplate中这样做，但它绝对拒绝在DataTemplate中这样做，因此整个网格最终都会变得不稳定和不对齐，因为标题列只使用它在每一行上所需的空间 我的XAML如下-在ItemTemplate DataTemplate模板

我正在编写一个UWP应用程序来跟踪观看/购买/播放的电视节目等 试图让DataTempate中的网格列扩展其宽度，我简直疯了，因为XAML中似乎存在忽略*宽度定义的错误。我需要ListView中的第一列（显示标题）来占用剩余空间（因此列定义为“*”）虽然它会在HeaderTemplate中这样做，但它绝对拒绝在DataTemplate中这样做，因此整个网格最终都会变得不稳定和不对齐，因为标题列只使用它在每一行上所需的空间

我的XAML如下-在ItemTemplate DataTemplate模板中，我绑定到一个名为TVShow的对象实例，该对象位于我的主视图模型中的一个可观察集合中。（我没有在这里包括ViewModel或TVShow类定义，因为我知道这是一个纯粹的XAML问题）

到目前为止，唯一有效的方法是在我的TVShow类中有一个额外的属性来存储正确的列宽度（通过从网格大小中减去其他三列的宽度（在视图代码中获取）但这会导致整个列表在初始显示后重新格式化，这看起来很难看，更不用说糟糕的编程了

因此，我正在寻找如何解决这个问题的方法-我可以在主视图模型中移动正确列宽的属性，但是如果我绑定到“TVShow”，那么如何在模板中绑定到该属性？还是我必须将内容从数据模板中取出并放入用户控件中？我已经在非常简单的事情上浪费了太多时间-这个错误似乎自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>
如果您在viewmodel中有正确的宽度，可以这样绑定它

Width={Binding ElementName = ListViewname,Path=DataContext.width}
此问题是由
ListViewItem
的默认模板引起的，要使
网格在项目内部伸展，您可以打开文档大纲标签=>找到您的
ListView
控件并右键单击它，然后选择编辑其他模板=>选择编辑Gener指定的项目容器（ItemContainerStyle），最后编辑一份副本



然后您将在页面资源中找到此模板，请更改代码：


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






致：





那么你的问题就可以解决了

我看到您有不止一个
ListView
，如果您希望此样式针对此页面中的所有
ListView
，您可以删除此模板的
x:Key
属性，并删除带有由操作生成的StaticResource的
ItemContainerStyle

不要沮丧，我认为你以前开发过WPF，学习UWP很容易。编辑模板或控件的样式可以解决许多布局问题，下面是一些，下次遇到此类问题时，你可以看看

如果您对如何开发UWP应用程序有疑问，可以参考，如果您对API有一些问题，可以参考


如果你需要帮助或建议，你可以在这里提问，这里的人很乐意提供帮助。
好的，所以我最终将这个XAML添加到了我的列表视图中（虽然我知道我可以按照Grace的建议去做，但我觉得使用Blend很可怕）-实际上是HorizontalContentAlignment做到了这一点


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





谢谢Grace-这是我做的，但并没有进入Blend（你需要火箭科学学位才能使用）那么复杂，查看我的答案，了解我所做的。谢谢-我尝试了这种方法，但没有正确的语法，因此无法使其工作。我最终做了我在答案中输入的内容，但我对此进行了投票，因为它仍然非常有用。是的，我建议修改的值是此
HorizontalContentAligment
属性。

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