为ListView WPF创建图标视图模式

Question

我正在尝试将listViewGridView 更改为IconView,如截图中所示,每个项目都在进行.

风格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类？

提前致谢

Answer 1

使用与上一个问题相同的完全代码作为我的答案:

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

结论:不,您不需要自定义代码来自定义WPF中的UI.可以使用现有控件和一些XAML完成.请阅读MSDN中的"编写新控件的替代方法"部分:控制创作概述