XAML Listview滚动

时间：2015-04-16 22:52:15

标签： xaml listview scroll

滚动listview控件时遇到一个小问题。

当listview上的列表点击设备的下边缘时，我试图打开滚动选项。现在列表视图出现在我的应用程序的弹出控件中，我尝试了将listview的高度绑定到主页网格的设置，这不起作用。

以下是截图的链接。底部列表实际上是listview控件。

Screenshot

这是具有listview的XAML和弹出控件上的其他控件：

<Popup x:Name="setShiftPopup" Width="350" Height="Auto">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Border x:Name="borderMainPopup" Grid.Row="0" Grid.RowSpan="5" Background="#FFE4E4E4" CornerRadius="15" BorderThickness="2"/>
                <Border Grid.Row="0" Background="#FF0B6CF8" BorderThickness="2" Margin="0,0,-2,0" CornerRadius="10"/>
                <StackPanel x:Name="Header" Grid.Row="0">
                    <TextBlock x:Name="tbSelectedDatePopup" Grid.Row="0" Margin="21,10,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" FontSize="20" Foreground="#FFF7F0EF"/>
                </StackPanel>
                <StackPanel x:Name="SliderOne" Grid.Row="1" Orientation="Vertical">
                    <Slider x:Name="sliderShiftStartPopup" ValueChanged="sliderShiftStartEndPopup_ValueChanged" Margin="48,26,44,9.5" Maximum="48" LargeChange="0" SmallChange="0" Style="{StaticResource SliderShiftStartStyle}" FontFamily="Global User Interface"/>

                </StackPanel>
                <StackPanel x:Name="SliderTwo" Grid.Row="2">
                    <Slider x:Name="sliderShiftEndPopup" ValueChanged="sliderShiftStartEndPopup_ValueChanged"  Grid.Row="1" Margin="48,13.5,44,80.333" Maximum="48" LargeChange="0" SmallChange="0" Style="{StaticResource SliderShiftEndStyle}" FontFamily="Global User Interface" Value="48"/>
                </StackPanel>
                <StackPanel x:Name="Favbutton" Grid.Row="3">
                    <Button x:Name="btnAddToFas" Click="btnAddToFas_Click" Grid.Column="0"  Grid.ColumnSpan="2" HorizontalAlignment="Stretch" Style="{StaticResource btnOnPopup}"/>
                </StackPanel>
                <StackPanel x:Name="ListView" Grid.Row="4">
                    <ListView x:Name="lvFASList" ItemsSource="{Binding theFasListOC}" Foreground="Red" FontSize="40" Grid.Row="1" ShowsScrollingPlaceholders="False">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock x:Name="theShift" Text="{Binding theShift}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="17"/>
                                    <Button x:Name="btnDeleteShift" Click="btnDeleteShift_Click" Content="X" HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" FontFamily="Global User Interface"/>
                                </StackPanel>
                             </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackPanel>
            </Grid>
        </Popup>

请指教！

2 个答案:

答案 0 :(得分：1)

ListView所在的Grid Row无法确定高度。 

<Popup x:Name="setShiftPopup" Width="350" Height="Auto">
    <Grid Width="{Binding ElementName=setShiftPopup, Path=Width}" Height="{Binding ElementName=setShiftPopup, Path=Height}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Border x:Name="borderMainPopup" Grid.Row="0" Grid.RowSpan="2" Background="#FFE4E4E4" Width="{Binding Width, ElementName=setShiftPopup}" Height="{Binding Height, ElementName=setShiftPopup}" CornerRadius="15" BorderThickness="2">
            <Grid Margin="8.333,67.333,7.5,7.5">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto" MinHeight="160.833"/>
                    <RowDefinition Height="Auto" MinHeight="68.357"/> // Overflowing due to this set of Auto. 
                </Grid.RowDefinitions>
                <Slider x:Name="sliderShiftStartPopup" ValueChanged="sliderShiftStartEndPopup_ValueChanged" Grid.Row="0" Margin="48,26,44,9.5" Maximum="48" LargeChange="0" SmallChange="0" Style="{StaticResource SliderShiftStartStyle}" Grid.RowSpan="1" FontFamily="Global User Interface"/>
                <Slider x:Name="sliderShiftEndPopup" ValueChanged="sliderShiftStartEndPopup_ValueChanged"  Grid.Row="1" Margin="48,13.5,44,80.333" Maximum="48" LargeChange="0" SmallChange="0" Style="{StaticResource SliderShiftEndStyle}" FontFamily="Global User Interface" Value="48"/>
                <Grid x:Name="gridFASListAndSetButtons" Grid.Row="1" Margin="0,85.5,0,-5.31" Grid.RowSpan="2">
                    <Grid.RowDefinitions>
                        <RowDefinition/> // This row does not have a set height and it cant be determined from the parent
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Grid Grid.Row="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Button x:Name="btnAddToFas" Click="btnAddToFas_Click" Grid.Column="0"  Grid.ColumnSpan="2" HorizontalAlignment="Stretch" Style="{StaticResource btnOnPopup}"/>
                    </Grid>
                    <ListView x:Name="lvFASList" ScrollViewer.VerticalScrollBarVisibility="Auto" ItemsSource="{Binding theFasOC}" Foreground="Red" FontSize="40" Grid.Row="1" ShowsScrollingPlaceholders="False">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                               <Grid>
                                  <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                  </Grid.ColumnDefinitions>
                                  <TextBlock Grid.Column="0" x:Name="theShift" Text="{Binding theShift}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="17"/>
                                  <Button Grid.Column="1" x:Name="btnDeleteShift" Content="X" HorizontalAlignment="Center" VerticalAlignment="Center" Width="50" Height="50"/>
                                </Grid>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </Grid>
            </Grid>
        </Border>
        <Border Grid.Row="0" Width="{Binding Width, ElementName=borderMainPopup}" Height="Auto" BorderThickness="2" Margin="0,0,-2,0">
            <Border.Background>
                <SolidColorBrush Color="#FF0B6CF8"/>
            </Border.Background>
            <TextBlock x:Name="tbSelectedDatePopup" Grid.Row="0" Margin="21,10,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" FontSize="20" Foreground="#FFF7F0EF"/>
        </Border>
    </Grid>
</Popup>

以下是一些应该有用的简化代码，如果您仍然遇到问题，请告诉我。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/> // For the header
        <RowDefinition Height="Auto"/> // Slider one
        <RowDefinition Height="Auto"/> // Slider two
        <RowDefinition Height="Auto"/> // Favs button
        <RowDefinition Height="*"/> // Listview
    </Grid.RowDefinitions>

    <StackPanel x:Name="Header" Grid.Row="0">


    </StackPanel>
    <StackPanel x:Name="SliderOne" Grid.Row="1">


    </StackPanel>
    <StackPanel x:Name="SliderTwo" Grid.Row="2">


    </StackPanel>

    <StackPanel x:Name="Favbutton" Grid.Row="3">


    </StackPanel>

    <StackPanel x:Name="ListView" Grid.Row="3">
        // Your ListView
    </StackPanel>

</Grid>

网格可以放在每个StackPanel中，也可以将StackPanels交换为网格。这个xaml会给你一个类似于下图的布局。图片中每个蓝色单元格的高度将由每个蓝色StackPanel中内容的累积高度决定，即＆＃34; Header＆＃34;，＆＃34; SliderOne＆＃34;，＆＃34; SliderTwo＆＃34;和＆＃34; Favbutton＆＃34;。

StackPanel＆＃34; ListView＆＃34;将填补剩余空间。

enter image description here

<强>更新

@Sumchans好吧我已经厌倦了复制你的问题，看起来Popup不在同一个视觉树中（有人可能能够纠正我）。你需要以某种方式设置弹出窗口的高度。使用Auto以外的其他功能来获得所需的结果。

这样做的一种方法是将高度绑定到最外层元素。最有可能是网格，见下文。 

<Grid x:Name="MyMostOuterControl" >


... <!-- The rest of you controls -->


<Popup x:Name="setShiftPopup" Width="350" Height="{Binding ActualHeight, ElementName=MyMostOuterControl}">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Border x:Name="borderMainPopup" Grid.Row="0" Grid.RowSpan="5" Background="#FFE4E4E4" CornerRadius="15" BorderThickness="2"/>
                <Border Grid.Row="0" Background="#FF0B6CF8" BorderThickness="2" Margin="0,0,-2,0" CornerRadius="10"/>
                <StackPanel x:Name="Header" Grid.Row="0">
                    <TextBlock x:Name="tbSelectedDatePopup" Grid.Row="0" Margin="21,10,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" FontSize="20" Foreground="#FFF7F0EF"/>
                </StackPanel>
                <StackPanel x:Name="SliderOne" Grid.Row="1" Orientation="Vertical">
                    <Slider x:Name="sliderShiftStartPopup" ValueChanged="sliderShiftStartEndPopup_ValueChanged" Margin="48,26,44,9.5" Maximum="48" LargeChange="0" SmallChange="0" Style="{StaticResource SliderShiftStartStyle}" FontFamily="Global User Interface"/>

                </StackPanel>
                <StackPanel x:Name="SliderTwo" Grid.Row="2">
                    <Slider x:Name="sliderShiftEndPopup" ValueChanged="sliderShiftStartEndPopup_ValueChanged"  Grid.Row="1" Margin="48,13.5,44,80.333" Maximum="48" LargeChange="0" SmallChange="0" Style="{StaticResource SliderShiftEndStyle}" FontFamily="Global User Interface" Value="48"/>
                </StackPanel>
                <StackPanel x:Name="Favbutton" Grid.Row="3">
                    <Button x:Name="btnAddToFas" Click="btnAddToFas_Click" Grid.Column="0"  Grid.ColumnSpan="2" HorizontalAlignment="Stretch" Style="{StaticResource btnOnPopup}"/>
                </StackPanel>
                <StackPanel x:Name="ListView" Grid.Row="4">
                    <ListView x:Name="lvFASList" ItemsSource="{Binding theFasListOC}" Foreground="Red" FontSize="40" Grid.Row="1" ShowsScrollingPlaceholders="False">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock x:Name="theShift" Text="{Binding theShift}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="17"/>
                                    <Button x:Name="btnDeleteShift" Click="btnDeleteShift_Click" Content="X" HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" FontFamily="Global User Interface"/>
                                </StackPanel>
                             </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackPanel>
            </Grid>
        </Popup>
</Grid>

答案 1 :(得分：1)

我认为问题来自于你没有为listview设置合适的高度。你说当你的列表视图在弹出窗口时，你试过给它主页的高度吗？

如果列表视图位于弹出窗口中，则需要为其提供弹出窗口的高度。如果没有，它将会太大，你将无法访问最后的元素。

另外我注意到你的列表视图是一行的一部分。假设您的弹出窗口高度为1200，并且堆叠面板的4个第一行总高度为600.您的列表视图（以及最后一行）需要的高度为600或更低

您需要确定列表视图所需的确切高度。在这种情况下，由于你的行的高度为“*”，我建议做这样的事情：

<Grid x:Name = "GridListView" Grid.Row = "4">
    <StackPanel x:Name="ListView">
        <ListView x:Name="lvFASList" ItemsSource="{Binding theFasListOC}" Foreground="Red" FontSize="40" Grid.Row="1" Height ="{Binding ElementName=GridListView, Path=ActualHeight}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock x:Name="theShift" Text="{Binding theShift}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="17"/>
                        <Button x:Name="btnDeleteShift" Click="btnDeleteShift_Click" Content="X" HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" FontFamily="Global User Interface"/>
                    </StackPanel>
                 </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackPanel>
</Grid>

几乎可以让你获得listview所在网格的高度（这就是你将stackpanel放在一个新的网格<Grid Grid.Row ="4" x:Name="GridListView"中）的原因。然后相应地设置高度Height="{Binding ElementName=GridListView, Path=ActualHeight}"

相关问题
最新问题