列表視圖在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

回答

相關問題