爲ListView創建圖標視圖模式WPF

Question

我正在嘗試將GridView更改爲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 example : How to: Create a Custom View Mode for a ListView並修改它來獲得我所需要的，但它沒和我一起工作，我實際上無法理解例子c在學習上，任何人都可以簡化我如何創建視圖模式？我必須創建一個覆蓋的ViewBase類嗎？

在此先感謝

Answer 1

使用完全相同的代碼背後爲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> 

然後：

<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"
• 簡單地更改任何ItemsControl的ItemsPanel，以確定項目的佈局方式。
• 使用WrapPanel，您會得到一個類似於Windows資源管理器的佈局，其中項目水平放置，直到沒有更多水平空間，然後創建另一個「行」。運行該示例並調整窗口的大小以查看此內容。

---

底線：不，你不需要自定義代碼自定義的WPF UI。可以使用現有的控件和一些XAML來完成。請閱讀"Alternatives to Writing a New Control"部分MSDN: Control Authoring Overview