WPF複雜的分級控制

4

TreeView可以用於這種方法。該項目容器的樣式應該是定製，如下面的鏈接，

http://www.codeproject.com/Articles/17025/Custom-TreeView-Layout-in-WPF

2014-12-24 08:09:39 Jawahar

2

你也可以做到這一點使用ListBox控件。

的Xaml

<Window x:Class="DecoraSnap.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="MainWindow" WindowState="Maximized" > 
<Window.Resources> 
    <Style TargetType="ListBoxItem"> 
     <Setter Property="SnapsToDevicePixels" Value="True"/> 
     <Setter Property="OverridesDefaultStyle" Value="True"/> 
     <Setter Property="FocusVisualStyle" Value="{x:Null}"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="ListBoxItem"> 
        <Border> 
         <ContentPresenter></ContentPresenter> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Window.Resources> 

<StackPanel Margin="100,0,0,0" Orientation="Horizontal"> 
    <Border Height="50" Width="100" VerticalAlignment="Center" BorderBrush="Black" BorderThickness="1"> 
     <TextBlock FontWeight="Bold" Text="Meassage" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="0"/> 
    </Border> 
    <Separator Height="1" Background="Black" VerticalAlignment="Center" Width="50"></Separator> 
    <Border x:Name="BorderWidth" Width="1" Background="Black" ></Border> 
    <ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled" ItemsSource="{Binding RequestList}" BorderBrush="Transparent" BorderThickness="0" x:Name="lst"> 
     <ListBox.ItemsPanel> 
      <ItemsPanelTemplate> 
       <UniformGrid x:Name="UniformGrid1" Height="{Binding ElementName=lst,Path=ActualHeight}" Loaded="UniformGrid1_Loaded_1" Columns="1" ></UniformGrid> 
      </ItemsPanelTemplate> 
     </ListBox.ItemsPanel> 
     <ListBox.ItemTemplate> 
      <DataTemplate> 
       <Grid> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition/> 
         <ColumnDefinition Width="4*"/> 
        </Grid.ColumnDefinitions> 
        <StackPanel Orientation="Horizontal"> 
         <Separator Width="50" Height="1" Background="Black"></Separator> 
         <Border Height="50" Width="100" BorderBrush="Black" BorderThickness="1"> 
          <TextBlock FontWeight="Bold" Text="{Binding Reaquest}" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="0"/> 
         </Border> 
        </StackPanel> 
        <StackPanel Grid.Column="1" Orientation="Horizontal"> 
         <Border Background="Black" Height="1" Width="50"></Border> 
         <!--You can implement border width like "UniformGrid1_Loaded_1" event --> 
         <Border Width="1" Background="Black" Height="235" ></Border> 
         <ListBox Background="Transparent" HorizontalAlignment="Center" BorderBrush="Transparent" ItemsSource="{Binding Models}"> 
          <ListBox.ItemsPanel> 
           <ItemsPanelTemplate> 
            <UniformGrid x:Name="Uniformgrid2" Columns="1"></UniformGrid> 
           </ItemsPanelTemplate> 
          </ListBox.ItemsPanel> 
          <ListBox.ItemTemplate> 
           <DataTemplate> 
            <StackPanel Orientation="Horizontal"> 
             <Separator Width="50" Height="1" Background="Black"></Separator> 
             <Grid Height="40" Width="100" > 
              <Border BorderBrush="Black" BorderThickness="1"> 
               <TextBlock FontWeight="Bold" Text="{Binding Name}" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="0"/> 
              </Border> 
             </Grid> 
             <Separator Width="50" Height="1" Background="Black"></Separator> 
             <Grid Height="100" Width="100" > 
              <Rectangle Stroke="Black" Fill="LightYellow" StrokeThickness="1" StrokeDashArray="1,2"></Rectangle> 
              <TextBlock FontWeight="Bold" Foreground="Silver" Text="{Binding SameName}" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="0"/> 
             </Grid> 
            </StackPanel> 
           </DataTemplate> 
          </ListBox.ItemTemplate> 
         </ListBox> 
        </StackPanel> 
       </Grid> 
      </DataTemplate> 
     </ListBox.ItemTemplate> 
    </ListBox> 
</StackPanel>

C＃代碼

public partial class MainWindow : Window 
{       
    public MainWindow() 
    { 
     InitializeComponent(); 

     List<Meassage> RequestList = new List<Meassage>(); 

     RequestList.Add(new Meassage() 
     { 
      Reaquest = "request", 
      Models = new List<Commands>(){new Commands(){ Name = "command", SameName="command"}, 
              new Commands(){Name = "Metainfo", SameName="MetaInfo"}, 
              new Commands(){Name = "data", SameName="result" },} 
     }); 

     RequestList.Add(new Meassage() 
     { 
      Reaquest = "response", 
      Models = new List<Commands>(){new Commands(){ Name = "command", SameName="command"}, 
              new Commands(){Name = "Metainfo", SameName="MetaInfo"}, 
              new Commands(){Name = "data", SameName="result" },} 
     }); 

     lst.ItemsSource = RequestList; 
    } 

    private void UniformGrid1_Loaded_1(object sender, RoutedEventArgs e) 
    { 
     UniformGrid un = sender as UniformGrid;   
     var ab= un.ActualHeight; 
     var ItemsCount = un.Children.Count; 
     var SingleHeight = ab/ItemsCount; 
     BorderWidth.Height = SingleHeight * (ItemsCount - 1); 
    }  

} 

public class Meassage 
{ 
    public string Reaquest { get; set; } 

    public List<Commands> Models { get; set; } 
} 

public class Commands 
{ 
    public string Name { get; set; } 
    public string SameName{ get; set; } 

}

結果

enter image description here

來源

2014-12-24 13:04:33

1

正如XAML情人所提到的，TreeView控件在這裏將是更好的選擇。您可以將它與HierarchicalDataTemplate一起使用，您可以在其中設置ItemsSource並綁定到視圖模型。

http://msdn.microsoft.com/en-us/library/dd759035(v=vs.95).aspx

在鏈路的例子使用一個簡單的TextBlock顯示項目名稱。如果您必須添加其他項目（如樹視圖項目的上下文菜單），則可以在HieraichalDataTemplate中添加這些項目。然後，爲了更新外觀，您必須自定義TreeViewItem樣式或ItemsContainerStyle。您可以在此處添加圖標，並且如果您需要在加載時保持樹打開，還可以自定義IsExpanded屬性。樹視圖還允許您瀏覽控件並從節點中查找子項。

來源

2014-12-24 15:00:05 RamyaN

WPF複雜的分級控制

回答

相關問題