XAML Win UI 3中的ListView垂直拉伸

dz6r00yl 于 2022-12-20 发布在其他

关注(0)|答案(1)|浏览(200)

我在使用下面的XAML时遇到了困难，无法在调整表单大小时使listView垂直拉伸网格第2行，同时将进度栏和信息栏锚定在表单底部。有人能给我一个正确的方向来解决这个问题吗？
XAML：

<Grid Margin="6">
    <Grid.RowDefinitions>
        <RowDefinition Height="300"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="100"/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="500"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <StackPanel Orientation="Vertical">

        <CommandBar Background="Transparent" 
            HorizontalAlignment="Left"
            IsOpen="False" 
            DefaultLabelPosition="Right">
            <AppBarButton Icon="AttachCamera" Label="Find Import Sources" x:Name="findSourcesButton"/>
            <AppBarButton Icon="Import" x:Name="importButton" Label="Import Selected Items"/>
        </CommandBar>

        <ComboBox Header="Sources:" x:Name="sourcesComboBox" Width="500"/>
        <DatePicker Header="Import Date:      Select the required date to start the import from." Margin="0,20,0,10" />

        <TextBlock Text="Files:" Margin="0,20,0,10" />
        <ListView x:Name="fileListView"  
                VerticalAlignment="Stretch"
                MinHeight="300"
                Width="500"
                SelectionMode="None"
                BorderBrush="#FF858585"   
                BorderThickness="1"
                ScrollViewer.VerticalScrollBarVisibility="Visible">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="0.05*"/>
                            <ColumnDefinition Width="0.20*"/>
                            <ColumnDefinition Width="0.75*"/>
                        </Grid.ColumnDefinitions>
                        <!--<CheckBox Grid.Column="0" IsChecked="{Binding ImportableItem.IsSelected, Mode=TwoWay}" />
                        --><!-- Click="CheckBox_Click"/>--><!--
                        <Image Grid.Column="1" Source="{Binding Thumbnail}" Width="120" Height="120" Stretch="Uniform"/>
                        <TextBlock Grid.Column="2" Text="{Binding ImportableItem.Name}" VerticalAlignment="Center" Margin="10,0"/>-->
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackPanel>
    
    <ProgressBar x:Name="progressBar" SmallChange="0.01" LargeChange="0.1" Maximum="1" MinHeight="100" Grid.Row="2" Grid.ColumnSpan="3"/>
    <InfoBar
            Grid.Row="2"
            Grid.ColumnSpan="3"
            IsOpen="True"
            IsIconVisible="True"
            IsClosable="True"
            Title="Title"
            Message="Message display here." />
</Grid>

xaml

来源：https://stackoverflow.com/questions/74843195/listview-vertical-stretch-in-win-ui-3

1条答案

按热度按时间

qyuhtwio1#

我设法修复了它。问题可能是，堆栈面板没有调整它的高度，所以我从它那里删除了列表视图，并将它直接放在Grid.Row=“1”的网格中。
现在网格中的第一行将调整其高度为其中stackpanel的呈现高度。这不是因为它被设置为auto。网格的第三行具有预定义的高度100，屏幕的其余部分将填充列表视图，这就是为什么它的高度被定义为“*"。

以下也是height属性的含义：

星星（*）：当自动和固定大小被填充时，它将占用剩余的空间。

<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="2*" />
    <RowDefinition Height="*"/>
</Grid.RowDefinitions>

出发地：https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.grid.rowdefinitions?view=winrt-22621

这是更改后的代码：

<Grid Margin="6">
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="100"/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="500"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <StackPanel Grid.Row="0" Orientation="Vertical">
        <CommandBar Background="Transparent" 
        HorizontalAlignment="Left"
        IsOpen="False" 
        DefaultLabelPosition="Right">
            <AppBarButton Icon="AttachCamera" Label="Find Import Sources" x:Name="findSourcesButton"/>
            <AppBarButton Icon="Import" x:Name="importButton" Label="Import Selected Items"/>
        </CommandBar>

        <ComboBox Header="Sources:" x:Name="sourcesComboBox" Width="500"/>
        <DatePicker Header="Import Date:      Select the required date to start the import from." Margin="0,20,0,10" />

        <TextBlock Text="Files:" Margin="0,20,0,10" />
    </StackPanel>
    
    <ListView Grid.Row="1" x:Name="fileListView"  
            SelectionMode="None"
              VerticalAlignment="Stretch"
            BorderBrush="#FF858585"   
            BorderThickness="1"
            ScrollViewer.VerticalScrollBarVisibility="Visible">
            <ListViewItem Content="Hello"/>
            <ListViewItem Content="Hello"/>
            <ListViewItem Content="Hello"/>
            <ListViewItem Content="Hello"/>
        </ListView>

    <ProgressBar x:Name="progressBar" SmallChange="0.01" LargeChange="0.1" Maximum="1" MinHeight="100" Grid.Row="2" Grid.ColumnSpan="3"/>
    <InfoBar
        Grid.Row="2"
        Grid.ColumnSpan="3"
        IsOpen="True"
        IsIconVisible="True"
        IsClosable="True"
        Title="Title"
        Message="Message display here." />

赞(0）回复(0）举报 2022-12-20

我来回答

XAML Win UI 3中的ListView垂直拉伸

1条答案

相关问题

热门标签

最新问答