为ListView WPF创建图标视图模式 [英] creating Icon View mode for ListView WPF

问题描述

我正在尝试将listView GridView更改为IconView，如您在屏幕快照中看到的那样，每个项目都占据一行.

I'm Trying to change listView GridView to IconView, as you see in the screenshot, each item is taking a row.

样式XAML

<UserControl.Resources>
<Style x:Key="FileItemStyle" TargetType="{x:Type ListViewItem}">
        <Setter Property="Width" Value="50"/>
        <Setter Property="Margin" Value="5,5,5,5"/>
        <Setter Property="Padding" Value="0,0,0,0"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="Template">
           <Setter.Value>
                <ControlTemplate  TargetType="{x:Type ListViewItem}">
                    <Grid HorizontalAlignment="Left" VerticalAlignment="Top" Height="50" Width="50">
                        <Border x:Name="border" BorderBrush="{x:Null}" BorderThickness="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CornerRadius="2.5"/>
                        <StackPanel HorizontalAlignment="Stretch"  VerticalAlignment="Stretch">

                            <ContentPresenter />
                        </StackPanel>
                    </Grid>
        </ControlTemplate>
     </Setter.Value>
     </Setter>
    </Style>
</UserControl.Resources>

ListView XAML

    <ListView ItemContainerStyle="{DynamicResource FileItemStyle}" HorizontalAlignment="Left" Height="194.667" Margin="11,77.666,0,0" VerticalAlignment="Top" Width="368.667" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.CanContentScroll="True" UseLayoutRounding="False">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid HorizontalAlignment="Left" Height="50">
                    <Border x:Name="border" BorderBrush="{x:Null}" BorderThickness="1" HorizontalAlignment="Stretch" Height="50" VerticalAlignment="Stretch" Width="50" CornerRadius="2.5"/>
                    <StackPanel>
                        <Image x:Name="Img" Source="BtnImg/Computer.png" Stretch="None" Margin="9,0,9,0" Width="32" Height="32"/>
                        <TextBlock x:Name="PCName" Margin="0" TextWrapping="Wrap" Height="18" HorizontalAlignment="Stretch" TextAlignment="Center"><Run Text="{Binding Content}"/></TextBlock>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
        <ListBoxItem Content="ddd"/>  <!--**-->
        <ListViewItem Content="zczxcz"/>
    </ListView>

我尝试使用 MDSN示例:如何:创建自定义ListView的查看模式并对其进行修改以获取我需要的内容，但是它对我没有用，我实际上无法清楚地理解该示例，任何人都可以简化如何创建查看模式?我必须创建一个重写的ViewBase类吗?

I've tried to use MDSN example : How to: Create a Custom View Mode for a ListView and modify it to get what I need, but it didn't work with me, I actually couldn't understand the example clearly, anyone can Simplify how can I create a View mode? Do I have to create an overrided ViewBase class?

预先感谢

推荐答案

在后面的问题中使用相同的确切代码:

 <Style x:Key="FileItemStyle" TargetType="{x:Type ListViewItem}">
        <Setter Property="Margin" Value="5,5,5,5"/>
        <Setter Property="Padding" Value="0,0,0,0"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate  TargetType="{x:Type ListViewItem}">
                    <Grid HorizontalAlignment="Left" VerticalAlignment="Top" Height="50" >
                        <Border x:Name="border" BorderBrush="{x:Null}" BorderThickness="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CornerRadius="2.5"/>
                        <StackPanel HorizontalAlignment="Stretch"  VerticalAlignment="Stretch">
                            <ContentPresenter/>
                        </StackPanel>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

然后:

    <ListView ItemsSource="{Binding}" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
              SelectedItem="{Binding SelectedComputer, RelativeSource={RelativeSource AncestorType=Window}}"
              ItemContainerStyle="{StaticResource FileItemStyle}">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>

        <ListView.ItemTemplate>
            <DataTemplate>
                <DockPanel>
                    <TextBlock DockPanel.Dock="Bottom" Text="{Binding Name}"/>
                    <Rectangle Height="32" Width="32" Fill="Blue"/>
                </DockPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

结果:

• 删除硬编码的Width和Height s
• 替换图像的蓝色矩形.
• 在ControlTemplate中添加一些触发器，以便在IsSelected="True"
时突出显示
• 只需更改 ItemsPanel ItemsControl中的>，以定义项目的布置方式.
• 使用 WrapPanel ，您将获得类似于Windows资源管理器的布局，其中项目水平放置直到没有更多的水平空间，然后创建另一个行".运行示例并调整窗口大小以查看该内容.

• Remove the hardcoded Width and Heights
• Replace the blue rectangle for your Image.
• Add some Triggers in the ControlTemplate so that you get highlighting when IsSelected="True"
• Simply change the ItemsPanel of any ItemsControl in order to define how items are laid out.
• Using a WrapPanel, you get a layout similar to Windows Explorer, where items are placed horizontally until there is no more horizontal space and then another "row" is created. Run the example and resize the Window to see this.

底线:不，您不需要自定义代码即可在WPF中自定义UI.可以使用现有控件和一些XAML来完成.请阅读编写新的替代方法部分" rel ="noreferrer"> MSDN:控件创作概述

Bottom line: NO, you don't need custom code to customize the UI in WPF. It can be done with the existing controls and some XAML. Please read the "Alternatives to Writing a New Control" section in MSDN: Control Authoring Overview

这篇关于为ListView WPF创建图标视图模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！