为 ListView WPF 创建图标视图模式

creating Icon View mode for ListView WPF

提问by Murhaf Sousli

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

我正在尝试将listViewGridView更改为 IconView，正如您在屏幕截图中看到的，每个项目都占用一行。

Style XAML

样式 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

列表视图 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>

I've tried to use MDSN example : How to: Create a Custom View Mode for a ListViewand 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?

我尝试使用MDSN 示例：如何：为 ListView 创建自定义视图模式并修改它以获得我需要的内容，但它对我不起作用，我实际上无法清楚地理解该示例，任何人都可以简化如何创建查看模式？我是否必须创建一个重写的 ViewBase 类？

Thanks in advance

提前致谢

回答by Federico Berasategui

Using the same exact Code Behind as My Answer to your previous question:

使用与我对您上一个问题的回答相同的代码：

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

Then:

然后：

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

Result:

结果：

• Remove the hardcoded Widthand Heights
• Replace the blue rectangle for your Image.
• Add some Triggers in the ControlTemplateso that you get highlighting when IsSelected="True"
• Simply change the ItemsPanelof any ItemsControlin 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.

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

---

---

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

底线：不，您不需要自定义代码来自定义 WPF 中的 UI。它可以通过现有控件和一些 XAML 来完成。请阅读MSDN 中的“编写新控件的替代方法”部分：控件创作概述