none
ListView显示不全 RRS feed

  • 问题

  • 请帮忙看下,两列显示的ListView,最右侧一列总是显示不全

    无论是否会产生滚动条都会显示不全,第二列已经设置Wrap属性代码如下:

    <ListView x:Name ="TourneyDetailList" HorizontalAlignment="Left" VerticalAlignment="Top" Height="358" Width="440" Margin="809,194,0,0" ItemsSource="{Binding}" Foreground="#FF4AF2FC" Background="{x:Null}" IsItemClickEnabled="False" ItemContainerStyle="{StaticResource ReadOnlyListView}">
                    <ListView.ItemTemplate>
                        <DataTemplate>           
                            <Grid Width="440" Height="Auto" Margin="0" HorizontalAlignment="Left" VerticalAlignment="Top">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="3*"/>
                                    <ColumnDefinition Width="7*"/>
                                </Grid.ColumnDefinitions>
                                <TextBlock  Grid.Column="0" Text="{Binding Position}" FontSize="20" VerticalAlignment="Top" HorizontalAlignment="Left"/>
                                <TextBlock  Grid.Column="1" Text ="{Binding Desc}" FontSize="20" VerticalAlignment="Top" HorizontalAlignment="Left" TextWrapping="Wrap"/>
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>  

    另外,我想实现没有滚动条时,内容能够自动充满显示区域,应该如何设置?

    2012年8月1日 4:01

答案

  • Hi,

    首先说为什么显示不全。问题在于你设置了DataTemplate中Grid的Width=440,而你的ListView的Width也是440。应该将Grid的中的Width直接去掉,Height我也不建议保留因为你不设置他自动会是Auto的。

    原因是ListViewItem中的宽度并不与ListView中宽度一样。在Item的周围还有一些元素比如选择选项时周围的表示选择的元素。你通过Blend将ListViewItem的默认模板导出就能看出来ContentPresenter的外边还有很多元素。下面是我导出的模板的一部分:

    <Grid x:Name="ReorderHintContent" Background="Transparent">
        <Path x:Name="SelectingGlyph" Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{StaticResource ListViewItemCheckSelectingThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="13" Margin="0,9.5,9.5,0" Opacity="0" Stretch="Fill" VerticalAlignment="Top" Width="15"/>
        <Border x:Name="ContentContainer">
            <Grid x:Name="InnerDragContent">
                <Border x:Name="HintGlyphBorder" HorizontalAlignment="Right" Height="40" Margin="4" Opacity="0" VerticalAlignment="Top" Width="40">
                    <Path x:Name="HintGlyph" Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{StaticResource ListViewItemCheckHintThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="13" Margin="0,5.5,5.5,0" Opacity="0" Stretch="Fill" VerticalAlignment="Top" Width="15"/>
                </Border>
                <Rectangle x:Name="PointerOverBorder" Fill="{StaticResource ListViewItemPointerOverBackgroundThemeBrush}" IsHitTestVisible="False" Margin="1" Opacity="0"/>
                <Rectangle x:Name="FocusVisual" IsHitTestVisible="False" Opacity="0" Stroke="{StaticResource ListViewItemFocusBorderThemeBrush}" StrokeThickness="2"/>
                <Rectangle x:Name="SelectionBackground" Fill="{StaticResource ListViewItemSelectedBackgroundThemeBrush}" Margin="4" Opacity="0"/>
                <Border x:Name="ContentBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="4">
                    <Grid>
                        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        <TextBlock x:Name="PlaceholderTextBlock" Foreground="{x:Null}" IsHitTestVisible="False" Margin="{TemplateBinding Padding}" Opacity="0" Text="Xg"/>
                        <Rectangle x:Name="PlaceholderRect" Fill="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" IsHitTestVisible="False" Visibility="Collapsed"/>
                        <Rectangle x:Name="SelectedBorder" IsHitTestVisible="False" Opacity="0" Stroke="{StaticResource ListViewItemSelectedBackgroundThemeBrush}" StrokeThickness="{StaticResource ListViewItemSelectedBorderThemeThickness}"/>
                        <Rectangle x:Name="MultiArrangeOverlayBackground" Fill="{StaticResource ListViewItemDragBackgroundThemeBrush}" IsHitTestVisible="False" Opacity="0"/>
                    </Grid>
                </Border>
                <Border x:Name="SelectedCheckMarkOuter" HorizontalAlignment="Right" IsHitTestVisible="False" Margin="4" Padding="{TemplateBinding BorderThickness}" VerticalAlignment="Top">
                    <Grid x:Name="SelectedCheckMark" Height="40" Opacity="0" Width="40">
                        <Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z" Fill="{StaticResource ListViewItemSelectedBackgroundThemeBrush}" Stretch="Fill"/>
                        <Path Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{StaticResource ListViewItemCheckThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="13" Margin="0,5.5,5.5,0" Stretch="Fill" VerticalAlignment="Top" Width="15"/>
                    </Grid>
                </Border>
                <TextBlock x:Name="MultiArrangeOverlayText" Foreground="{StaticResource ListViewItemDragForegroundThemeBrush}" FontSize="26.667" FontFamily="{StaticResource ContentControlThemeFontFamily}" IsHitTestVisible="False" Margin="18,9,0,0" Opacity="0" TextWrapping="Wrap" Text="{Binding TemplateSettings.DragItemsCount, RelativeSource={RelativeSource Mode=TemplatedParent}}" TextTrimming="WordEllipsis"/>
            </Grid>
        </Border>
    </Grid>

    这就是为什么这个字体显示不全的原因。

    第二个问题我没有太看懂,不知道你想要实现的是什么效果。

    按照我的理解,将集合中元素以一定的行数或者列数填充的话我建议在ListView.ItemsPanel中设置WrapGrid

    WrapGrid的文档:

    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.wrapgrid.aspx

    Hope this helps

     

     

     

     

     

    Aaron Xue [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.


    2012年8月2日 7:21
    版主
  • Hi,

    抱歉一开始没仔细看你的代码,Grid上面说的有问题,Grid如果不设置的话默认根据内容大小来测算。ListView实际上是为了显示一列绑定数据而设计的,Grid因为每次测算内容的大小,因此内容长宽不已的话就会造成上面的问题,而且因为每个元素都有Grid而不是整体在一个Grid中这就导致不能够对齐。因为这里没有了WPF的ShareSizedGroup。所以我想使用两个ListView可能比较好,外面整体使用一个Grid控制大小所在位置。

    需要注意的是,关于长宽控制,所在位置,Margin等,我建议设在外面用于控制Grid中,ListView只用来负责显示内容。

    下面是代码:

            <Grid Name="grid"  Height="358" Width="440" Margin="0,194,117,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="2*" />
                </Grid.ColumnDefinitions>
                <ListView Grid.Column="0" ItemsSource="{Binding}" x:Name ="TourneyDetailList" HorizontalAlignment="Right" VerticalAlignment="Top" Foreground="#FF4AF2FC" Background="{x:Null}" IsItemClickEnabled="False">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                                <TextBlock  Text="{Binding Column1}"  TextWrapping="Wrap"/>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
                <ListView Grid.Column="1" ItemsSource="{Binding}"  x:Name ="TourneyDetailList2" HorizontalAlignment="Right" VerticalAlignment="Top" Foreground="#FF4AF2FC" Background="{x:Null}" IsItemClickEnabled="False">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <TextBlock  Text="{Binding Column2}"  TextWrapping="Wrap"/>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </Grid>

    效果:

    Hope this helps


    Aaron Xue [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    2012年8月7日 8:22
    版主

全部回复

  • Hi,

    首先说为什么显示不全。问题在于你设置了DataTemplate中Grid的Width=440,而你的ListView的Width也是440。应该将Grid的中的Width直接去掉,Height我也不建议保留因为你不设置他自动会是Auto的。

    原因是ListViewItem中的宽度并不与ListView中宽度一样。在Item的周围还有一些元素比如选择选项时周围的表示选择的元素。你通过Blend将ListViewItem的默认模板导出就能看出来ContentPresenter的外边还有很多元素。下面是我导出的模板的一部分:

    <Grid x:Name="ReorderHintContent" Background="Transparent">
        <Path x:Name="SelectingGlyph" Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{StaticResource ListViewItemCheckSelectingThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="13" Margin="0,9.5,9.5,0" Opacity="0" Stretch="Fill" VerticalAlignment="Top" Width="15"/>
        <Border x:Name="ContentContainer">
            <Grid x:Name="InnerDragContent">
                <Border x:Name="HintGlyphBorder" HorizontalAlignment="Right" Height="40" Margin="4" Opacity="0" VerticalAlignment="Top" Width="40">
                    <Path x:Name="HintGlyph" Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{StaticResource ListViewItemCheckHintThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="13" Margin="0,5.5,5.5,0" Opacity="0" Stretch="Fill" VerticalAlignment="Top" Width="15"/>
                </Border>
                <Rectangle x:Name="PointerOverBorder" Fill="{StaticResource ListViewItemPointerOverBackgroundThemeBrush}" IsHitTestVisible="False" Margin="1" Opacity="0"/>
                <Rectangle x:Name="FocusVisual" IsHitTestVisible="False" Opacity="0" Stroke="{StaticResource ListViewItemFocusBorderThemeBrush}" StrokeThickness="2"/>
                <Rectangle x:Name="SelectionBackground" Fill="{StaticResource ListViewItemSelectedBackgroundThemeBrush}" Margin="4" Opacity="0"/>
                <Border x:Name="ContentBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="4">
                    <Grid>
                        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        <TextBlock x:Name="PlaceholderTextBlock" Foreground="{x:Null}" IsHitTestVisible="False" Margin="{TemplateBinding Padding}" Opacity="0" Text="Xg"/>
                        <Rectangle x:Name="PlaceholderRect" Fill="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" IsHitTestVisible="False" Visibility="Collapsed"/>
                        <Rectangle x:Name="SelectedBorder" IsHitTestVisible="False" Opacity="0" Stroke="{StaticResource ListViewItemSelectedBackgroundThemeBrush}" StrokeThickness="{StaticResource ListViewItemSelectedBorderThemeThickness}"/>
                        <Rectangle x:Name="MultiArrangeOverlayBackground" Fill="{StaticResource ListViewItemDragBackgroundThemeBrush}" IsHitTestVisible="False" Opacity="0"/>
                    </Grid>
                </Border>
                <Border x:Name="SelectedCheckMarkOuter" HorizontalAlignment="Right" IsHitTestVisible="False" Margin="4" Padding="{TemplateBinding BorderThickness}" VerticalAlignment="Top">
                    <Grid x:Name="SelectedCheckMark" Height="40" Opacity="0" Width="40">
                        <Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z" Fill="{StaticResource ListViewItemSelectedBackgroundThemeBrush}" Stretch="Fill"/>
                        <Path Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{StaticResource ListViewItemCheckThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="13" Margin="0,5.5,5.5,0" Stretch="Fill" VerticalAlignment="Top" Width="15"/>
                    </Grid>
                </Border>
                <TextBlock x:Name="MultiArrangeOverlayText" Foreground="{StaticResource ListViewItemDragForegroundThemeBrush}" FontSize="26.667" FontFamily="{StaticResource ContentControlThemeFontFamily}" IsHitTestVisible="False" Margin="18,9,0,0" Opacity="0" TextWrapping="Wrap" Text="{Binding TemplateSettings.DragItemsCount, RelativeSource={RelativeSource Mode=TemplatedParent}}" TextTrimming="WordEllipsis"/>
            </Grid>
        </Border>
    </Grid>

    这就是为什么这个字体显示不全的原因。

    第二个问题我没有太看懂,不知道你想要实现的是什么效果。

    按照我的理解,将集合中元素以一定的行数或者列数填充的话我建议在ListView.ItemsPanel中设置WrapGrid

    WrapGrid的文档:

    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.wrapgrid.aspx

    Hope this helps

     

     

     

     

     

    Aaron Xue [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.


    2012年8月2日 7:21
    版主
  • 谢谢,如果不设定宽度,每列不能对齐,

    如我想实现的效果是:

    aaaa     cccc

    dddd     bbbbbb

    不设置Grid宽度后效果是

    aaaacccc

    ddddbbbbb

    可以使用Margin进行控制,但是我希望载入的数据不同时,两列的宽度是一定的,而不是随着内容的不同发生变化。比如宽度如果设定为500,两列比例是3:2则两列宽度固定为300,200。可是不设定500的话,就会根据具体显示内容来设定,两列不一定是300,200了。

    2012年8月3日 3:12
  • 是的,你没设置Grid的宽度它就会填充满,只要设置每一列的比例即可,因为ListView的宽度固定,并且模板中TextBlock设置了HorizontalAliment和VerticalAliment所以我认为不会有第二种情况。


    Aaron Xue [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    2012年8月7日 2:16
    版主
  • Aaron,麻烦您看下,我的代码有什么问题:

    <ListView x:Name ="TourneyDetailList" HorizontalAlignment="Right" VerticalAlignment="Top" Height="358" Width="440" Margin="0,194,117,0" ItemsSource="{Binding}" Foreground="#FF4AF2FC" Background="{x:Null}" IsItemClickEnabled="False" ItemContainerStyle="{StaticResource ReadOnlyListView}">
                    <ListView.ItemTemplate>
                        <DataTemplate>           
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="1*"/>
                                    <ColumnDefinition Width="2*"/>
                                </Grid.ColumnDefinitions>
                                <TextBlock  Grid.Column="0" Text="{Binding Column1}" Grid.ColumnSpan ="{Binding Column2Span}" FontSize="{StaticResource FontSize20}" VerticalAlignment="Top" HorizontalAlignment="Left"  TextWrapping="Wrap"/>
                                <TextBlock  Grid.Column="1" Text="{Binding Column2}" FontSize="{StaticResource FontSize20}" VerticalAlignment="Top" HorizontalAlignment="Left" TextWrapping="Wrap"/>
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>          

    2012年8月7日 5:31
  • Hi,

    抱歉一开始没仔细看你的代码,Grid上面说的有问题,Grid如果不设置的话默认根据内容大小来测算。ListView实际上是为了显示一列绑定数据而设计的,Grid因为每次测算内容的大小,因此内容长宽不已的话就会造成上面的问题,而且因为每个元素都有Grid而不是整体在一个Grid中这就导致不能够对齐。因为这里没有了WPF的ShareSizedGroup。所以我想使用两个ListView可能比较好,外面整体使用一个Grid控制大小所在位置。

    需要注意的是,关于长宽控制,所在位置,Margin等,我建议设在外面用于控制Grid中,ListView只用来负责显示内容。

    下面是代码:

            <Grid Name="grid"  Height="358" Width="440" Margin="0,194,117,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="2*" />
                </Grid.ColumnDefinitions>
                <ListView Grid.Column="0" ItemsSource="{Binding}" x:Name ="TourneyDetailList" HorizontalAlignment="Right" VerticalAlignment="Top" Foreground="#FF4AF2FC" Background="{x:Null}" IsItemClickEnabled="False">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                                <TextBlock  Text="{Binding Column1}"  TextWrapping="Wrap"/>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
                <ListView Grid.Column="1" ItemsSource="{Binding}"  x:Name ="TourneyDetailList2" HorizontalAlignment="Right" VerticalAlignment="Top" Foreground="#FF4AF2FC" Background="{x:Null}" IsItemClickEnabled="False">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <TextBlock  Text="{Binding Column2}"  TextWrapping="Wrap"/>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </Grid>

    效果:

    Hope this helps


    Aaron Xue [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    2012年8月7日 8:22
    版主
  • 这样会有个问题。。如果显示不下的话。。每个listview都会有滚动条。

    我想还是采用Listview套Grid的方案,将Grid的宽度设置的略小,请问:

    1、设置Grid的宽度时能否绑定ListView宽度,比如Grid Width="ListView.Width-20"之类的,不清楚是否有这样的语法。

    2、我们的应用需要根据分辨率动态拉伸ListView,所以也要动态拉伸DataTemplate内的Grid,请问在C++代码中如何获取到这个Grid对象,我试过x:Name的方式,可是在对应的.cpp文件索引不到这个对象。

    2012年8月7日 9:53
  • 我采用TourneyDetailList->ItemTemplate->LoadContent()的方式可以获得Grid的引用,但是更改Width属性无效。

    2012年8月8日 3:02
  • 1.那种语法在XAML里是不行的,你可以在代码中这样做,或者是使用Converter也行,手动的对绑定进行数值上的转换。

    2.loadContent()方法是创建一个UIElement,而不是获取里面的引用,所以更改是无效的。要更改ItemTemplate的内容的唯一方法就是把里面的内容都替换掉,你可以试试更改Width之后重新赋给ItemTemplate,这个我没试过,请告诉我一下结果。


    Aaron Xue [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    2012年8月8日 4:28
    版主