为WPF的ListView创建图标视图模式

Question

为WPF的ListView创建图标视图模式

3

我正在尝试将listView转换为图标视图（IconView），正如您在截图中看到的，每个项目都占据一行。

enter image description here

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

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

提前感谢。

- Murhaf Sousli

您正在混合使用ListView和ListBox，请删除ListView并使用ListBox特定的XAML。 - Federico Berasategui

@HighCore 好的，我已经将所有内容更改为“ListView”和“ListViewItem”，现在样式丢失了，但请查看这个链接http://postimg.org/image/cueewkt4l/ 为什么会发生这种情况？ - Murhaf Sousli

@HighCore，我将它们全部更改为ListBox和ListBoxItem，但风格也丢失了。 - Murhaf Sousli

请发布您当前的XAML，并按照您提到的更改进行修改。 - Federico Berasategui

@HighCore 完成了，但这是截图 http://postimg.org/image/cueewkt4l/ - Murhaf Sousli

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Federico Berasategui · Accepted Answer

使用与你之前问题的答案完全相同的后端代码：

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

结果：

enter image description here

移除硬编码的Width和Height
用你的图像替换蓝色矩形。
在ControlTemplate中添加一些触发器，以便在IsSelected="True"时进行高亮显示
只需更改任何ItemsControl的ItemsPanel即可定义项目的布局。
使用WrapPanel，您可以获得类似于Windows Explorer的布局，其中项目水平放置，直到没有更多的水平空间，然后创建另一行。运行示例并调整窗口大小以查看此效果。

底线是：不需要自定义代码来定制WPF中的用户界面。可以使用现有的控件和一些XAML来完成。请阅读MSDN: Control Authoring Overview中的"Alternatives to Writing a New Control"部分。