XAML 如何让一个水平方向的列表视图水平伸展?

o7jaxewo  于 2023-03-06  发布在  其他
关注(0)|答案(2)|浏览(159)

我试图让ListView水平拉伸以填充其父级(Grid)。我将ListView.ItemsPanel定义为StackPanel类型,具有水平方向。我四处搜索,发现让ListViewItems水平拉伸的技巧是在ItemContainerStyle上将"HorizontalContentAlignment"属性设置为"Stretch",我做到了。
不幸的是,我仍然不能让我的项水平拉伸。我曾考虑过根据父容器的ActualWidth手动计算每个ListViewItem的宽度,但对于本应更简单的东西来说,这似乎太费力了。
MainPage.xaml:

<Grid Grid.Row="1" Height="40">
        <ListView ItemsSource="{x:Bind ViewModel.Numbers}">
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="models:MyClass">
                    <Border BorderBrush="red" BorderThickness="1">
                        <TextBlock Text="{x:Bind Number }" HorizontalAlignment="Center" />
                    </Border>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>

MainViewModel.cs:

public class MainViewModel : ObservableRecipient
{
    public List<MyClass> Numbers
    {
        get; set;
    }
    public MainViewModel()
    {
        Numbers = new List<MyClass>() 
        { 
            new MyClass { Number = 1 }, 
            new MyClass { Number = 2 }, 
            new MyClass { Number = 3 }, 
            new MyClass { Number = 4 }, 
            new MyClass { Number = 5 },
            new MyClass { Number = 6 },
            new MyClass { Number = 7 },
            new MyClass { Number = 8 }
        };
    }
}

MyClass.cs

public class MyClass
{
    public int Number
    {
        get; set;
    }
}

输出为:

我需要数字来占据水平方向的可用空间
我正在使用Windows应用程序SDK 1.2的Win UI。
你能帮忙吗?
(我已将代码更改为最小可重复性用例)

lndjwyie

lndjwyie1#

    • 您应该对ItemsPanel使用UniformGrid(具有单行)而不是StackPanel**! UniformGrid将拉伸以填充其父级,而StackPanel不能。您还需要使用ItemContainerStyle将ListViewItem. HorizontalContentAlignment设置为"拉伸"。

这是可行的:

<ListView>
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Rows="1" HorizontalAlignment="Stretch"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.ItemContainerStyle>
        <Style TargetType="{x:Type ListViewItem}">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="models:MyClass">
            <Border BorderBrush="red" BorderThickness="1">
                <TextBlock Text="{x:Bind Number}" HorizontalAlignment="Center" />
            </Border>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

如果您需要更小的文本块之间的空间,您也可以在ListViewItem样式中设置边距/填充。

brgchamk

brgchamk2#

这段简单的代码应该水平拉伸每一项。

<Grid>
    <ListView
        x:Name="List"
        Grid.Row="1"
        Grid.Column="1"
        ItemsSource="{x:Bind MonthScale}">
        <ListView.ItemTemplate>
            <!--
                I'm assuming that MonthScale is a collection of Month.  
                Replace it with the actual item type.
            -->
            <DataTemplate x:DataType="local:Month">
                <Border>
                    <TextBlock
                        VerticalAlignment="Center"
                        Text="{x:Bind MonthName}" />
                </Border>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

还要注意,我使用的是x:Bind而不是Binding

相关问题