как растянуть listviewitem в listview

Разработчики.

Я пытаюсь растянуть элемент списка в горизонтальной ориентации. Я сбрасываю ItemContainerStyle, и горизонтальное выравнивание растягивается. Вот весь код в MainPage.xaml.

<Grid x:Name="rootGrid"
      HorizontalAlignment="Stretch"
      MinWidth="320"
      MaxWidth="480"
      Width="Auto">
    <ListView x:Name="infoFlowListView" 
              MinWidth="320"
              MaxWidth="480"
              Width="Auto"
              HorizontalAlignment="Stretch">
        <ListView.ItemTemplate>
            <DataTemplate>
                <local:MyUserControl1 MinWidth="300" HorizontalAlignment="Stretch"></local:MyUserControl1>
            </DataTemplate>
        </ListView.ItemTemplate>
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
            </Style>
        </ListView.ItemContainerStyle>
    </ListView>
</Grid>

Вот весь код в MainPage.xaml.cs

public MainPage()
    {
        var items = new List<MyUserControl1>();
        for (int i = 0; i < 50; i++)
        {
            items.Add(new MyUserControl1());
        }
        this.InitializeComponent();
        infoFlowListView.ItemsSource = items;
    }

Вот весь код в MyUserControl.xaml

<Grid>    
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"></ColumnDefinition>
    <ColumnDefinition Width="4*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="Auto"></RowDefinition>
    <RowDefinition Height="*"></RowDefinition>
    <RowDefinition Height="Auto"></RowDefinition>
    <RowDefinition Height="8"></RowDefinition>
</Grid.RowDefinitions>

<Ellipse Width="60" Height="60"
         Grid.Column="0" Grid.Row="0" Grid.RowSpan="3"
         VerticalAlignment="Center" 
         HorizontalAlignment="Center" 
         Stretch="Uniform">
    <Ellipse.Fill>
        <ImageBrush ImageSource="Assets/1.png"></ImageBrush>
    </Ellipse.Fill>
</Ellipse>

<RelativePanel x:Name="topRelativePanel"
               Grid.Column="1" Grid.Row="0"
               HorizontalAlignment="Stretch">
    <TextBlock Text="TestName"
               VerticalAlignment="Bottom"
               RelativePanel.AlignLeftWithPanel="True"
               FontSize="12"
               HorizontalAlignment="Stretch"></TextBlock>
    <TextBlock Text="Author"
               VerticalAlignment="Bottom"
               RelativePanel.AlignRightWithPanel="True"
               FontSize="12"
               HorizontalAlignment="Stretch"
               Margin="0,0,8,0"></TextBlock>
</RelativePanel>

<TextBlock x:Name="nameTextBlock"
           Grid.Column="1" Grid.Row="1"
           Text="Name" 
           TextTrimming="WordEllipsis"
           VerticalAlignment="Stretch"
           HorizontalAlignment="Stretch"
           FontSize="18" >
</TextBlock>

<Grid x:Name="bottomGrid"
      Grid.Column="1" Grid.Row="2"
      VerticalAlignment="Top"
      HorizontalAlignment="Stretch">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="3*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Column="0"
               HorizontalAlignment="Stretch"
               Text="90"></TextBlock>
    <TextBlock Grid.Column="1"
               HorizontalAlignment="Stretch"
               Text="48"></TextBlock>
    <TextBlock Grid.Column="2"
               HorizontalAlignment="Stretch"
               Text="20170330 08:33"
               Margin="0,0,0,0"></TextBlock>
</Grid>

<Border Background="LightGray"
        VerticalAlignment="Stretch"
        HorizontalAlignment="Stretch"
        Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2"></Border>

I test these code on 6inch emulator, and I add a screenshot of this example.

И мобильные эмуляторы не дают того же результата. Вот разные скриншоты эмулятора. 4 дюйма снимок экрана примера Правая часть этих снимков экрана отличается.


listview uwp listviewitem stretch
person maoleigepu    schedule 29.03.2017    source источник
comment
Вероятно, у вас есть проблемы с InfoListViewItemUserControl, и вы не отправили этот код. В остальном вроде нормально.   -  person Ivan Ičin    schedule 29.03.2017
comment
@ IvanIčin Я отправил xaml usercontrol, не могли бы вы рассказать мне, в чем проблема? Большое спасибо.   -  person maoleigepu    schedule 29.03.2017
comment
Я думаю, что приведенный ниже ответ правильный, если вы установите MaxWidth, он аннулирует выравнивание Stretch.   -  person Ivan Ičin    schedule 29.03.2017
comment
Не могли бы вы просто предоставить минимальный воспроизводимый пример проекта?   -  person Sunteen Wu    schedule 30.03.2017
comment
@ SunteenWu-MSFT Я не знаю, как загрузить проект. Поэтому я копирую весь код примера.   -  person maoleigepu    schedule 30.03.2017

Ответы (2)


arrow_upward
27
arrow_downward

Я пытаюсь растянуть элемент списка в горизонтальной ориентации.

Вам нужно установить свойство HorizontalContentAlignment для ListViewItem, а не для HorizontalAlignment. С помощью следующего кода содержимое ListViewItem будет растягиваться.

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

ListViewItem стиль и шаблон по умолчанию не открывают HorizontalAlignment установщик, но HorizontalContentAlignment.

person Sunteen Wu    schedule 30.03.2017
comment
Это моя ошибка. Большое спасибо, это очень помогло! - person maoleigepu; 30.03.2017

arrow_upward
1
arrow_downward

Я думаю, это потому, что элемент управления ListView.ItemTemplate имеет свойство MaxWidth = "400".

person Ivan Ryakhov    schedule 29.03.2017
comment
Я удалил максимальную ширину usercontrol, но listviewitem по-прежнему не может растягиваться в горизонтальной ориентации. - person maoleigepu; 30.03.2017