如何在一个用户控件中具有两个滚动视图?

时间:2019-05-03 10:16:16

标签: c# wpf xaml mvvm

我正在尝试在一个userconrol中包含两个元素列表(销售和预订)。我面临的问题是滚动视图的内容溢出,并且无法滚动。

我试图将堆栈面板更改为网格。在网格中使用固定高度时,它确实可以工作,但我希望它具有可伸缩性。

<Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="2*"/>
                    <RowDefinition Height="1*"/>
                </Grid.RowDefinitions>
                <ScrollViewer Grid.Row="0">
                    <StackPanel>
                        <TextBlock Grid.Row="0" Margin="0 25 0 0" Text="{x:Static properties:Resources.Sales}" FontSize="20" FontWeight="Bold"/>
                        <ListView Grid.Row="1" FontSize="18" Height ="{Binding ActualHeight, ElementName=GridListView}" x:Name="SalesList" ItemsSource="{Binding CurrentOccupancy.Sales}" SelectedItem="{Binding SelectedSale}">

                            <i:Interaction.Behaviors>
                                <behavior:EventToCommandBehavior Command="{Binding SalesViewSelectionChangedCommand}" Event="SelectionChanged" PassArguments="True" />
                            </i:Interaction.Behaviors>
                            <ListView.View>

                                <GridView>
                                    <GridViewColumn Header="{Binding Source={x:Static properties:Resources.Paid}, StringFormat=is\{0\}}">
                                        <GridViewColumn.CellTemplate>
                                            <DataTemplate>
                                                <TextBlock x:Name="paid" Text="{Binding Paid}"/>
                                                <DataTemplate.Triggers>
                                                    <DataTrigger Binding="{Binding Paid}" Value="0">
                                                        <Setter TargetName="paid" Property="Text" Value="{x:Static properties:Resources.Unpaid}" />
                                                    </DataTrigger>
                                                    <DataTrigger Binding="{Binding Paid}" Value="1">
                                                        <Setter TargetName="paid" Property="Text" Value="{x:Static properties:Resources.Paid}" />
                                                    </DataTrigger>
                                                </DataTemplate.Triggers>
                                            </DataTemplate>
                                        </GridViewColumn.CellTemplate>
                                    </GridViewColumn>
                                    <GridViewColumn
                            DisplayMemberBinding="{Binding Product.Name}"
                            Header="{x:Static properties:Resources.Name}" />
                                    <GridViewColumn
                            DisplayMemberBinding="{Binding Product.Price}"
                            Header="{x:Static properties:Resources.Price}" />
                                </GridView>
                            </ListView.View>
                        </ListView>
                    </StackPanel>
                </ScrollViewer>
                <ScrollViewer Grid.Row="1">
                    <StackPanel>
                        <TextBlock Margin="0 25 0 0" Grid.Row="2" Text="{x:Static properties:Resources.Reservations}" FontSize="20" FontWeight="Bold"/>
                        <ListView Grid.Row="3" FontSize="18" Height ="{Binding ActualHeight, ElementName=GridListView}" ItemsSource="{Binding FutureReservations}" SelectedItem="{Binding SelectedReservation}">
                            <ListView.View>
                                <GridView>
                                    <GridViewColumn
                            DisplayMemberBinding="{Binding LastName}"
                            Header="{x:Static properties:Resources.LastName}"/>
                                    <GridViewColumn
                            DisplayMemberBinding="{Binding AmountPeople}"
                            Header="{x:Static properties:Resources.AmountOfPeople}"/>
                                    <GridViewColumn
                            DisplayMemberBinding="{Binding PhoneNumber}"
                            Header="{x:Static properties:Resources.Phone}"/>
                                    <GridViewColumn
                            DisplayMemberBinding="{Binding StartTime, StringFormat=HH:mm dd/MM}"
                            Header="{x:Static properties:Resources.StartTime}"/>
                                </GridView>
                            </ListView.View>
                        </ListView>
                    </StackPanel>

                </ScrollViewer>
            </Grid>

我正在尝试拥有两个都有各自滚动条的列表视图,第一个列表视图(销售)必须大于第二个列表视图,并且高度不应该固定。

这是de design的外观: Screenshot of designer

1 个答案:

答案 0 :(得分:0)

ListView中有一个滚动查看器。

将列表视图放入未以计算出的高度结尾的面板中会导致问题。

我建议您在每个网格行中放置一个网格。

给它两行。

在第一个文本块中放置一个文本块,然后在第二个列表视图中放置一个文本块。

这是您标记的简化版本,可以说明我的建议。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="2*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Text="First List"/>
        <ListView ItemsSource="{Binding Letters}" Grid.Row="1"/>
    </Grid>
    <Grid Grid.Row="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Text="Second List"/>
        <ListView ItemsSource="{Binding Letters}" Grid.Row="1"/>
    </Grid>
</Grid>

文本块和列表视图标题将保持可见,并且如果每个列表视图的内容不合适,则会显示垂直滚动条。

很明显,此版本中没有标题。

enter image description here