WPF ListView:图标视图显示在单个列中

时间:2011-09-13 15:16:50

标签: wpf listview listviewitem

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

我想要做的是非常标准的,我想:让用户在Grid之间切换 和我的ListView中的图标模式。 一切顺利,但是......图标视图不是显示包装行中的项目,而是在单个列中显示它们,每个项目占据视图的整个宽度。我无法指出究竟是什么问题...: - (

(我还没有在这个论坛上获得足够的XP,并且它不允许我发布图片;我会给出截图的链接)

我想要的是什么:http://i.stack.imgur.com/jYhVx.png

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

这是IconView样式定义(在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>

它在相应的Control类中使用:

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中使用的所有内容(为了简洁起见,我将省略将{DynamicResource IconView}分配给ListView的View的DataTrigger):

<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"/>

我疯了......而且,为了增加我的挫败感,Snoop没有看到我的申请: - (

请帮忙! ; - )

非常感谢, 亚历

2 个答案:

答案 0 :(得分:0)

您的大多数绑定可能都会被破坏:(ListView.View).ItemWidth

上述路径的解释与您在StoryBoard.TargetProperty中使用的路径不同。如果在绑定中使用括号,则表示绑定到附加属性。

来自MSDN,强调我的:

  

路径在XAML中指定,该路径位于没有指定目标类型的样式或模板中。合格用法通常对于此以外的其他情况无效,因为在非样式的非模板情况下,该属性存在于实例上,而不是类型。

分别在上面的示例中更改它们:View.ItemWidth

答案 1 :(得分:0)

好吧,我找到了罪魁祸首。 原来问题不在于我在问题中包含的片段,而是在我遗漏的东西中 - ListView本身的ListView.GroupStyle定义。 删除后,列表会按照我预期的方式显示。

感谢所有考虑过我的问题的人!

亚历