Question

UWP相对较新，是否可以将TextBlock中的DataTemplate（用于列表视图中的ItemTemplate）绑定到其外面的列，或者有任何方法将DataTemplate的网格列的宽度设置为“ MainGrid”的列定义宽度的大小？下面的代码显示了我要实现的目标。

<Grid x:Name="MainGrid">
   <Grid.ColumnDefinitions>
       <ColumnDefinition x:Name="Column1" Width="*"/>
       <ColumnDefinition x:Name="Column2" Width="8*"/>
       <ColumnDefinition x:Name="Column3" Width="*"/>
   </Grid.ColumnDefinitions>
   <ListView Name="recordList" ItemsSource="{x:Bind _recordingList, TargetNullValue=0}">
       <ListView.ItemTemplate>
          <DataTemplate x:DataType="local:Recording">
            <Grid>
              <TextBlock Grid.Column="{Binding Column1}" Name="TextBlock_Time" Text="{x:Bind Time}"/>
              <TextBlock Grid.Column="{Binding Column2}"  Name="TextBlock_Message" Text="{x:Bind Message}"/>
              <TextBlock Grid.Column="{Binding Column3}"  Name="TextBlock_Type" Text="{x:Bind Type}"/>
            </Grid>
          </DataTemplate>
       </ListView.ItemTemplate>
   </ListView>
</Grid>

使用下图，我想假设红线是窗口。本质上是试图使列适应窗口大小的变化。

example

Answer 1

我认为您希望listviewitem扩展到窗口大小。为此，您需要在HorizontalContentAlignment

中将listviewitem的ItemContainerStyle设置为 stretch

<ListView x:Name="MessagesList" BorderThickness="1" ItemsSource="{x:Bind _recordingList, TargetNullValue=0}" BorderBrush="Black">
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment"  Value="Stretch"></Setter>
            <Setter Property="Padding"  Value="0"></Setter>
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.ItemTemplate>
       <DataTemplate x:DataType="local:Recording">
           <Grid BorderThickness="0,1,0,0" Padding="20" BorderBrush="{ThemeResource SystemControlForegroundBaseMediumBrush}">
              <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="*" />
                  <ColumnDefinition Width="8*"/>
                  <ColumnDefinition Width="*"/>
              </Grid.ColumnDefinitions>
              <TextBlock Text="{x:Bind Time,Mode=OneWay}"></TextBlock>
              <TextBlock Grid.Column="1" Text="{x:Bind Message,Mode=OneWay}"></TextBlock>
              <TextBlock Grid.Column="2" Text="{x:Bind Type,Mode=OneWay}"></TextBlock>
           </Grid>
       </DataTemplate>
    </ListView.ItemTemplate>  
</ListView>

Answer 2

您只需要将列移动到模板本身即可。

DataTemplate 是一种描述内容和位置的方案。因为它在 ItemTemplate 中，所以这意味着它适用于每个项目。

 <ListView Name="recordList" ItemsSource="{x:Bind _recordingList, TargetNullValue=0}">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="local:Recording">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition x:Name="Column1" Width="*" />
                        <ColumnDefinition x:Name="Column2" Width="8*" />
                        <ColumnDefinition x:Name="Column3" Width="*" />
                    </Grid.ColumnDefinitions>
                    <TextBlock
                        Name="TextBlock_Time"
                        Grid.Column="0"
                        Margin="20"
                        Foreground="Red"
                        Text="{x:Bind Time}" />
                    <TextBlock
                        Name="TextBlock_Message"
                        Grid.Column="1"
                        Margin="20"
                        Foreground="Green"
                        Text="{x:Bind Message}" />
                    <TextBlock
                        Name="TextBlock_Type"
                        Grid.Column="2"
                        Margin="20"
                        Foreground="LightBlue"
                        Text="{x:Bind Type}" />
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

这应该使您的商品看起来像这样。

查看文档，因为它很好地解释了它。模板中有模板。因此，您可以为容器（它应该如何显示项目）和 Items （每个项目的外观）模板化。

Templates

请记住 HorizontalAlignment =“ Stretch” 等，因为这意味着文本块（或 Grid ）将占据其所有可用空间（水平）。修补它，您将了解它的工作原理。

UWP-我可以将数据模板中的文本块绑定到网格列外部的宽度吗？

2 个答案: