WPF 中复杂的分层控制

Question

美好的一天！我刚刚开始学习WPF。有如下标准功能来构建 UI？在 WinForms 中必须为此创建复杂的自定义控件：

WPF中可能会用到什么方法？

Answer 1

TreeView 可以用于这种方法。项目容器样式应按照以下链接进行自定义，

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

Answer 2

您也可以使用列表框控件来实现此目的。

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

}

结果

Answer 3

正如 XAML Lover 提到的那样，TreeView 控件将是一个更好的选择。您可以将它与 HierarchicalDataTemplate 一起使用，您可以在其中设置 ItemsSource 并绑定到您的视图模型。

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

链接中的示例使用一个简单的 TextBlock 来显示项目标题。如果您必须添加其他项目，例如树视图项目的上下文菜单，则可以在 HieraichalDataTemplate 中添加。然后要更新外观，您必须自定义 TreeViewItem 样式或 ItemsContainerStyle。如果您需要在加载时保持树处于打开状态，您可以在此处添加图标并自定义 IsExpanded 属性。树视图还允许您在控件中导航并从节点中查找子项。