2009-04-06 22 views
8

Tôi muốn tạo một kết hợp của một số lần xem trang và một listview. Tôi muốn có 2 cột. Trong cột bên trái, tôi muốn có một hình ảnh thu nhỏ và cột bên phải sẽ hiển thị một số thông tin về các mục từ cột bên trái. Hãy gọi cột bên trái Tên và cột bên phải Giá trị. Vấn đề là khi bạn mở rộng treeview, mức độ thụt đầu dòng thay đổi và cột Giá trị trở thành chưa được căn chỉnh.Xem lại WPF với các cột có chiều rộng cố định

Tất cả tôi có thể đưa ra là một trong hai:

A: Sử dụng được xây dựng trong TreeView và tự thay đổi độ rộng của tên cột tùy thuộc vào mức độ thụt đầu dòng nên giá trị cột luôn được thẳng hàng.

B. Sử dụng ListView tích hợp và tạo TreeView theo cách thủ công bằng cách thêm các childitems giữa các mục cha và cũng thay đổi thụt lề của các mục này.

Thực sự không có cách nào tốt hơn?

Trả lời

6

Có một cách, tôi có một con thú như vậy trong ứng dụng Silverlight

Bạn cần phải tweek mẫu của treeviewitem. Mẫu mặc định không mở rộng tất cả các cách trên treeview.

Bằng cách tweeking mẫu, bạn có thể làm cho nó mở rộng tất cả các cách, và sau đó bạn có thể đặt DataTemplate của bạn (hoặc HierarchicalDataTemplate) vào một lưới. Nếu tôi nhớ chính xác, bạn cần lấy một bản sao của mẫu mặc định của TreeviewItem và thay đổi thuộc tính HorizontalAlignment của phần tử "Header" thành "Stretch", xóa cột ngoài cùng bên phải trong lưới tạo nên mẫu và thay đổi chiều rộng của cột chứa phần tử từ "Auto" đến "*".

Thật dễ dàng để thực hiện việc sử dụng kết hợp. Tạo một TreeViewItem, nhấp chuột phải vào nó và chọn "chỉnh sửa các bộ phận điều khiển (" Mẫu ")> Chỉnh sửa bản sao ..." Điều này sẽ tạo một bản sao của mẫu mặc định cho TreeViewItem. Từ đó, tìm ContentPresenter có tên PART_Header. Đi lên từ đây, tìm lưới có chứa và sửa đổi các cột của nó để phù hợp với lời giải thích của tôi (loại bỏ cột cuối cùng, thay đổi cột thứ hai từ "Tự động" thành "*"). Trong Kiểu đã được tạo cho mục, đặt HorizontalContentAlignment thành "Stretch" (nó được gắn với một cái gì đó khác theo mặc định).

Sử dụng Kiểu đã được tạo dưới dạng ItemContainerStyle trên treeview của bạn. Bạn có thể xóa TreeViewItem mà bạn đã tạo lúc đầu sau đó.

Cuối cùng, bạn sẽ kết thúc với một loạt tài nguyên, một trong số đó là phong cách của bạn. Xem dưới đây cho những gì tôi kết thúc với (cả phong cách TreeViewItem và DataTemplate cơ bản cho các mục của tôi với một cột tên và giá trị). Có các tài nguyên khác được tạo ra rằng tham chiếu kiểu/mẫu TreeViewItem, nhưng chúng không được hiển thị ở đây (vì nó đã quá dài: p).

<Window.Resources>  
<Style x:Key="TreeViewItemStyle1" TargetType="{x:Type TreeViewItem}"> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
     <Setter Property="VerticalContentAlignment" Value="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/> 
     <Setter Property="Padding" Value="1,0,0,0"/> 
     <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> 
     <Setter Property="FocusVisualStyle" Value="{StaticResource TreeViewItemFocusVisual}"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type TreeViewItem}"> 
        <Grid> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition MinWidth="19" Width="Auto"/> 
          <ColumnDefinition Width="*"/> 
         </Grid.ColumnDefinitions> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto"/> 
          <RowDefinition/> 
         </Grid.RowDefinitions> 
         <ToggleButton x:Name="Expander" Style="{StaticResource ExpandCollapseToggleStyle}" ClickMode="Press" IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"/> 
         <Border x:Name="Bd" SnapsToDevicePixels="true" Grid.Column="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}"> 
          <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" x:Name="PART_Header" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header"/> 
         </Border> 
         <ItemsPresenter x:Name="ItemsHost" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1"/> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsExpanded" Value="false"> 
          <Setter Property="Visibility" TargetName="ItemsHost" Value="Collapsed"/> 
         </Trigger> 
         <Trigger Property="HasItems" Value="false"> 
          <Setter Property="Visibility" TargetName="Expander" Value="Hidden"/> 
         </Trigger> 
         <Trigger Property="IsSelected" Value="true"> 
          <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/> 
          <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/> 
         </Trigger> 
         <MultiTrigger> 
          <MultiTrigger.Conditions> 
           <Condition Property="IsSelected" Value="true"/> 
           <Condition Property="IsSelectionActive" Value="false"/> 
          </MultiTrigger.Conditions> 
          <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/> 
          <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> 
         </MultiTrigger> 
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

     <HierarchicalDataTemplate x:Key="DataTemplate1"         
            ItemsSource="{Binding SubNodes}"> 
      <Grid Margin="5"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="Auto" /> 
        <ColumnDefinition Width="*"/> 
        <ColumnDefinition Width="Auto" /> 
       </Grid.ColumnDefinitions> 
       <TextBlock HorizontalAlignment="Left" 
          VerticalAlignment="Top" 
          Grid.Column="1" 
          Text="HEADER" 
          TextWrapping="Wrap" /> 
       <TextBox HorizontalAlignment="Left" 
         Margin="2" 
         VerticalAlignment="Top" 
         Text="VALUE" 
         TextWrapping="Wrap" 
         Grid.Column="2" /> 
      </Grid> 

</Window.Resources> 

<TreeView HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch" 
        Width="Auto" 
        Height="Auto" 
        x:Name="trv" 
      ItemContainerStyle="{StaticResource TreeViewItemStyle1}" 
        ItemTemplate="{DynamicResource DataTemplate1}">    
     </TreeView> 

Lưu ý rằng bạn cần phải đảm bảo các cột lưới của bạn có chứa các tế bào bên phải sẽ luôn luôn được chiều rộng tương tự, nếu không bạn sẽ có một cái gì đó kỳ lạ (tôi sử dụng "Auto" cột với nội dung cố định chiều rộng, và Tôi thêm một cột "*" trống giữa tên và "ô" để căn phải chúng).

Cũng lưu ý rằng giải pháp này về cơ bản "đóng băng" sự xuất hiện của hình ảnh thu nhỏ cho bất kỳ chủ đề nào bạn có trên máy của mình. (Nó sẽ giống nhau trên một máy Vista và XP, dựa trên hệ điều hành bạn đã sử dụng khi thực hiện sửa đổi).

Các vấn đề liên quan