列表视图在UWP

我想以动态的方式对齐我的ListView项目，而无需为它们明确设置宽度。我正在得到的问题是对齐他们上面的属性名称。即属性名称应该在它下面有可乐，数量应该有整数值，小计应该有低于它的浮点数。如果我调整我的Windows的ListView应该也改变与各自的属性名称，但它没有。我已经尝试过RelativePanel，ListBox，但是没有明确的给出宽度，我希望它是动态的。列表视图在UWP

<Grid Grid.Column="2" Margin="5,0,5,0"> 

      <ScrollViewer VerticalScrollBarVisibility="Hidden"> 
       <StackPanel> 
        <TextBlock Style="{StaticResource MyTextBlock1}" FontSize="20" HorizontalAlignment="Center" Margin="0,0,0,10">Order Summary</TextBlock> 
        <RelativePanel> 
         <TextBlock Name="ItemName" Style="{StaticResource MyTextBlock1}" FontSize="12">Name</TextBlock> 
         <TextBlock Name="ItemPrice" Style="{StaticResource MyTextBlock1}" FontSize="12" RelativePanel.AlignRightWithPanel="True">SubTotal</TextBlock> 
         <TextBlock Name="ItemQuantity" Style="{StaticResource MyTextBlock1}" Margin="0,0,10,0" FontSize="12" RelativePanel.LeftOf="ItemPrice">Quantity</TextBlock> 
        </RelativePanel> 

        <ListView ItemsSource="{x:Bind dumbList}"> 
         <ListView.ItemTemplate> 
          <DataTemplate x:DataType="local:Dumb"> 
           <Grid Width="200"> 
            <Grid.ColumnDefinitions> 
             <ColumnDefinition Width="3*"/> 
             <ColumnDefinition Width="1*"/> 
             <ColumnDefinition Width="1*"/> 
            </Grid.ColumnDefinitions> 
            <TextBlock Text="{x:Bind name}"/> 
            <TextBlock Text="{x:Bind id}" Grid.Column="1"/> 
            <TextBlock Name="Quatity" Text="{x:Bind price}" Grid.Column="2"/> 
           </Grid> 
          </DataTemplate> 
         </ListView.ItemTemplate> 
        </ListView> 
</Grid>

CLICK HERE!! for the image

来源

2017-03-31 Muhammad Faizan

编辑：

您可以用的DataTemplate布局列表视图上面创建一个项目。

为避免显式设置Width，可以将HorizontalAlignment设置为Stretch（类似于Android XML fill_parent）并使用Margin。

例子：

<Grid 
    HorizontalAlignment="Stretch" 
    Margin="12,12,12,12" 
    Height="100"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="3*"/> 
     <ColumnDefinition Width="1*"/> 
     <ColumnDefinition Width="1*"/> 
    </Grid.ColumnDefinitions> 
    <TextBlock Text="Name"/> 
    <TextBlock Text="Quantity" Grid.Column="1"/> 
    <TextBlock Text="SubTotal" Grid.Column="2"/> 
</Grid> 

<ListView ItemsSource="{x:Bind dumbList}"> 
    <ListView.ItemTemplate> 
     <DataTemplate x:DataType="local:Dumb"> 
      <Grid 
       HorizontalAlignment="Stretch" 
       Margin="12,12,12,12" 
       Height="100"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="3*"/> 
        <ColumnDefinition Width="1*"/> 
        <ColumnDefinition Width="1*"/> 
       </Grid.ColumnDefinitions> 
       <TextBlock Text="{x:Bind name}"/> 
       <TextBlock Text="{x:Bind id}" Grid.Column="1"/> 
       <TextBlock Name="Quatity" Text="{x:Bind price}" Grid.Column="2"/> 
      </Grid> 
     </DataTemplate> 
    </ListView.ItemTemplate> 
</ListView>

来源

2017-03-31 17:40:36 Alexandre

嗨，亚历山大！感谢您的回复！我面临的问题是仅对齐。我希望我的排列方式与我在附图中显示的相同。只需要我的愿望的一些间隔，并且它也应该是动态的，因为相对面板是动态的。我没有问题在获取数据到我的列表视图。 –

嗨穆罕默德！我编辑了我的答案，我的第一个不太好。你可以在ListView的上面使用一个完全像你的DataTemplate一样的Grid，就像一个固定的项目一样。只要确保Grid和ListView具有相同的宽度。 – Alexandre

嗨亚历山大谢谢你帮我解决这个问题，但仍然如我在我的主要问题中所说，我不想在我的代码中使用EXPLICIT WIDTH。我也在主要问题中编辑了我的代码，您可以看到有一个网格可以通过屏幕更改其大小并且没有宽度属性。 –

你列的定义应该是百分比，而不是整个值。

<Grid.ColumnDefinitions> 
    <ColumnDefinition Width=".8*"/> 
    <ColumnDefinition Width=".1*"/> 
    <ColumnDefinition Width=".1*"/> 
</Grid.ColumnDefinitions>

.8 = 80%.1 = 10%.1 = 10%总计为100％

你的定义是：

3 = 300%1 = 100%1 = 100%总= 500％！

来源

2017-04-05 04:35:25 Laith

列表视图在UWP

回答

相关问题