WPF的ListView：图标视图中显示在一列 [英] WPF ListView: Icons view shown in a single column

问题描述

我遇到一个奇怪的问题...

I'm experiencing a weird problem...

我试图做的是很标准，我想：aloowing用户网格之间切换
和图标模式在我的ListView。
一切都进展顺利，但...图标视图，而不是显示在包装行的项目，显示他们在一列，每个项目占据视图的整个宽度。我不能把我的手指上到底什么是错的...： - （

What I'm trying to do is quite standard, I guess: aloowing the user to switch between Grid and Icon modes in my ListView. All is going well, but... The Icon view, instead of showing the items in wrapping rows, shows them in a single column, with each item occupying the whole width of the view. And I can't put my finger on what exactly is wrong... :-(

的（我还没有获得关于这个论坛足够XP着呢，它不会让我张贴图片，我给的链接，而不是截图）的

我要什么： http://i.stack.imgur.com/jYhVx.png

我有什么： http://i.stack.imgur.com/PeAae.png

这里的图标型控件样式定义（在主题\\ Generic.xaml）：

Here's the IconView style definition (in Themes\Generic.xaml):

<Style x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type l:IconView}, ResourceId=IconViewStyle}" 
       TargetType="{x:Type ListView}" 
       BasedOn="{StaticResource {x:Type ListBox}}">
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="ItemContainerStyle" Value="{Binding (ListView.View).ItemContainerStyle, RelativeSource={RelativeSource Self}}"/>
    <Setter Property="ItemTemplate" Value="{Binding (ListView.View).ItemTemplate, RelativeSource={RelativeSource Self}}"/>
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <WrapPanel IsItemsHost="True"
                           Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
                           ItemWidth="{Binding (ListView.View).ItemWidth, RelativeSource={RelativeSource AncestorType=ListView}}"
                           MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
                           ItemHeight="{Binding (ListView.View).ItemHeight, RelativeSource={RelativeSource AncestorType=ListView}}"/>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
</Style>

它在相应的控制类中使用：

It's used in the corresponding Control class:

public class IconView : ViewBase
{
    public static readonly DependencyProperty ItemContainerStyleProperty =
      ItemsControl.ItemContainerStyleProperty.AddOwner(typeof(IconView));

    public Style ItemContainerStyle
    {
        get { return (Style)GetValue(ItemContainerStyleProperty); }
        set { SetValue(ItemContainerStyleProperty, value); }
    }

    public static readonly DependencyProperty ItemTemplateProperty =
        ItemsControl.ItemTemplateProperty.AddOwner(typeof(IconView));

    public DataTemplate ItemTemplate
    {
        get { return (DataTemplate)GetValue(ItemTemplateProperty); }
        set { SetValue(ItemTemplateProperty, value); }
    }

    public static readonly DependencyProperty ItemWidthProperty =
        WrapPanel.ItemWidthProperty.AddOwner(typeof(IconView));

    public double ItemWidth
    {
        get { return (double)GetValue(ItemWidthProperty); }
        set { SetValue(ItemWidthProperty, value); }
    }


    public static readonly DependencyProperty ItemHeightProperty =
        WrapPanel.ItemHeightProperty.AddOwner(typeof(IconView));

    public double ItemHeight
    {
        get { return (double)GetValue(ItemHeightProperty); }
        set { SetValue(ItemHeightProperty, value); }
    }


    protected override object DefaultStyleKey
    {
        get
        {
            return new ComponentResourceKey(GetType(), "IconViewStyle");
        }
    }
}

和这里是如何这一切在View.xaml正在使用（我将省略DataTrigger的受让人{DynamicResource}图标型控件到ListView的视图，为简便起见）：

And here's how all this is being used in the View.xaml (I'll omit the DataTrigger that assigns {DynamicResource IconView} to ListView's View, for brevity) :

<DataTemplate x:Key="IconViewItemTemplate">
    <StackPanel Height="170" Width="170">
        <Grid Width="150" Height="150" HorizontalAlignment="Center">
            <Image Source="{Binding DefaultPicture.Path}" Margin="6,6,6,9"/>
        </Grid>
        <TextBlock Text="{Binding ID}" FontSize="13" HorizontalAlignment="Center" Margin="0,0,0,1" />
    </StackPanel>
</DataTemplate>

<localControls:IconView x:Key="IconView"  
                        ItemTemplate="{StaticResource IconViewItemTemplate}" 
                        ItemWidth="180"/>

我要坚果......而且，添加到我的无奈，史努比没有看到我的应用程序： - （

I am going nuts... And, to add to my frustration, Snoop doesn't see my application :-(

请帮帮忙！ ; - ）

Please help! ;-)

非常感谢，
亚历克斯

Many thanks, Alex

推荐答案

好吧，我找到了罪魁祸首。
原来，问题不是出在我包含在问题的片段，而是我的东西离开了 - 就在ListView本身ListView.GroupStyle定义。
取出后，列表显示我希望它是的方式。

Well, I found the culprit. Turns out that problem is not in the snippets I included in the question, but rather in something I left out - the ListView.GroupStyle definition on the ListView itself. After removing it, the list is shown the way I expect it to be.

感谢您给大家，认为我的问题！

Thank you to everyone that considered my question!

亚历

这篇关于WPF的ListView：图标视图中显示在一列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！