2015-07-18 4 views
0

Я хочу создать макет, как показано в первом разделе следующего изображения. Но с прикрепленным кодом я могу получить только вывод макета, как показано в нижней части прикрепленного изображения.Телефон Windows 8.1 Ширина текстового блока для заполнения

enter image description here

<ListView Grid.Row="1" 
       ItemsSource="{Binding Items}" 
       Margin="0,20,0,0"> 
     <ListView.ItemTemplate> 
      <DataTemplate> 
       <StackPanel> 
        <Grid> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="*" /> 
          <ColumnDefinition Width="40" /> 
         </Grid.ColumnDefinitions> 

         <TextBlock TextWrapping="NoWrap" 
            TextTrimming="WordEllipsis" 
            Grid.Column="0" 
            Text="{Binding Name}" 
            Style="{ThemeResource ListViewItemTextBlockStyle}" /> 

         <Image Grid.Column="1" 
           Source="image.png"/> 

        </Grid> 
       </StackPanel> 
      </DataTemplate> 
     </ListView.ItemTemplate> 
    </ListView> 

ответ

1

Вам не нужно StackPanel в DataTemplate - Сетка у вас есть достаточно для этого.

Кроме того, для того, чтобы получить детали, чтобы растянуть, определить простой ListView.ItemContainerStyle в вашей ListView:

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

Таким образом, полный код:

<ListView Grid.Row="1" 
      ItemsSource="{Binding Items}" 
      Margin="0,20,0,0"> 
    <ListView.ItemTemplate> 
     <DataTemplate> 
      <Grid> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="*" /> 
        <ColumnDefinition Width="40" /> 
       </Grid.ColumnDefinitions> 

       <TextBlock TextWrapping="NoWrap" 
          TextTrimming="WordEllipsis" 
          Grid.Column="0" 
          Text="{Binding Name}" 
          Style="{ThemeResource ListViewItemTextBlockStyle}" /> 

       <Image Grid.Column="1" 
         Source="image.png"/> 

      </Grid> 
     </DataTemplate> 
    </ListView.ItemTemplate> 
    <ListView.ItemContainerStyle> 
     <Style TargetType="ListViewItem"> 
      <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
     </Style> 
    </ListView.ItemContainerStyle> 
</ListView> 
0

Попробуй

<ColumnDefinition Width="100" /> 

вместо ширины = "*"