WPF新手我正试图掌握TreeView,我对它提供的灵活性印象深刻。
到目前为止,我的每个树视图项都实现了一个Expander,这是显示每个项目的更多细节的好方法,并且标题只显示摘要。但是,这不适合叶子项目并浪费屏幕空间 - 我的树视图中的每个叶子项目(其中有很多)显示的数据量相对较少。
我想要为叶子项目实现的是水平包装而不是垂直列表。想象一下,显示一个网格或(stackpanel),每个项目都显示在自己的单元格/区域中,并按照可用的水平空间指示包裹在下面的行中。
例如
Level 1
Level 2
Level 3
Leaf 1 | leaf 2 | leaf 3 | leaf 4
Leaf 5 | leaf 6 | leaf 7 | leaf 8
Leaf 9 .....
Level 1
Level 2
Level 3
Leaf 1 | leaf 2| ....
我已经为此寻找了年龄 - 我已经阅读了TreeGrid(这是我已经独立实现的)以及优秀的http://www.codeproject.com/Articles/17025/Custom-TreeView-Layout-in-WPF示例。这样做可以实现我想要的但不实现项目的包装。
我的背景沉浸在WinForms中,我因为缺乏WPF经验而受到限制(我喜欢到目前为止我学到的东西)。我想做什么,可行吗?
我不是要求一个样板,剪切和粘贴解决方案,只是我可以探索的一些指针/资源/意见。
BTW,由于我公司的skinflint性质,任何解决方案都必须是免费的。谢谢。
到目前为止,这是TreeView的xaml:
<TreeView Name="tvMonitoredAlarms" Margin="10,10,10,10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ScrollViewer.VerticalScrollBarVisibility="Auto" >
<TreeView.ItemContainerStyle>
<Style TargetType="TreeViewItem">
<Setter Property="IsExpanded" Value="{Binding Expanded}"/>
</Style>
</TreeView.ItemContainerStyle>
<TreeView.Resources>
<!-- *****************************************************************************************************************
Server TreeView item
***************************************************************************************************************** -->
<HierarchicalDataTemplate DataType="{x:Type PAM:MonitoredServer}" ItemsSource="{Binding PLCs}">
<Border Margin="0" BorderBrush="{Binding AlarmPriority.BackColour, Converter={StaticResource PriorityBrush}}"
Background="{Binding AlarmPriority.BackColour, Converter={StaticResource PriorityBrush}}">
<Border.Style>
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=OPCAlarmTriggered}" Value="True">
<Setter Property="BorderThickness" Value="5"/>
<Setter Property="CornerRadius" Value="3,3,3,3"/>
<DataTrigger.EnterActions>
<BeginStoryboard x:Name="FlashBorderSERVER" Storyboard="{StaticResource FlashBorder}"/>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="FlashBorderSERVER"/>
</DataTrigger.ExitActions>
</DataTrigger>
<DataTrigger Binding="{Binding Path=OPCAlarmTriggered}" Value="False">
<Setter Property="BorderThickness" Value="1"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<Expander Template="{StaticResource RevealExpanderTemp}"
OverridesDefaultStyle="True"
Header="{Binding ServerName}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
>
<Grid Margin="0,0,0,0" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Margin="4,0,4,0" Grid.Row="0" Grid.Column="0">PLCs</Label>
<Label Margin="4,0,4,0" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Right" Content="{Binding NumberOfPLCs}" Foreground="{Binding AlarmPriority.ForeColour, Converter={StaticResource PriorityBrush}}" />
<Label Margin="4,0,4,0" Grid.Row="1" Grid.Column="0" Foreground="{Binding AlarmPriority.ForeColour, Converter={StaticResource PriorityBrush}}">Monitored Alarms</Label>
<Label Margin="4,0,4,0" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Content="{Binding NumberOfMonitoredAlarms}" Foreground="{Binding AlarmPriority.ForeColour, Converter={StaticResource PriorityBrush}}" />
<Label Margin="4,0,4,0" Grid.Row="2" Grid.Column="0" Foreground="{Binding AlarmPriority.ForeColour, Converter={StaticResource PriorityBrush}}">Address</Label>
<Label Margin="4,0,4,0" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Right" Content="{Binding IPAddress}" Foreground="{Binding AlarmPriority.ForeColour, Converter={StaticResource PriorityBrush}}"/>
<Label Margin="4,0,4,0" Grid.Row="3" Grid.Column="0" Foreground="{Binding AlarmPriority.ForeColour, Converter={StaticResource PriorityBrush}}">Comment</Label>
<Label Margin="4,0,4,0" Grid.Row="3" Grid.Column="1" HorizontalAlignment="Right" Content="{Binding Comment}" Foreground="{Binding AlarmPriority.ForeColour, Converter={StaticResource PriorityBrush}}"/>
</Grid>
</Expander>
</Border>
</HierarchicalDataTemplate>
<!-- *****************************************************************************************************************
PLC TreeView item
***************************************************************************************************************** -->
<HierarchicalDataTemplate DataType="{x:Type PAM:MonitoredPLC}" ItemsSource="{Binding Areas}">
<Border Margin="0" BorderBrush="{Binding AlarmPriority.BackColour, Converter={StaticResource PriorityBrush}}"
Background="{Binding AlarmPriority.BackColour, Converter={StaticResource PriorityBrush}}"
>
<Border.Style>
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=OPCAlarmTriggered}" Value="True">
<Setter Property="BorderThickness" Value="5"/>
<Setter Property="CornerRadius" Value="3,3,3,3"/>
<DataTrigger.EnterActions>
<BeginStoryboard x:Name="FlashBorderPLC" Storyboard="{StaticResource FlashBorder}"/>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="FlashBorderPLC"/>
</DataTrigger.ExitActions>
</DataTrigger>
<DataTrigger Binding="{Binding Path=OPCAlarmTriggered}" Value="False">
<Setter Property="BorderThickness" Value="1"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<Expander Template="{StaticResource RevealExpanderTemp}"
OverridesDefaultStyle="True"
Header="{Binding Name}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
>
<Expander.Background>
<LinearGradientBrush ColorInterpolationMode="ScRgbLinearInterpolation" StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="{Binding AlarmPriority.BackColour, Converter={StaticResource PriorityBrush}}" Offset="0"/>
<GradientStop Color="DarkKhaki" Offset="0.75"/>
</LinearGradientBrush>
</Expander.Background>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Margin="4,0,4,0" Foreground="{Binding AlarmPriority.ForeColour, Converter={StaticResource PriorityBrush}}" Grid.Row="0" Grid.Column="0">Areas</Label>
<Label Margin="4,0,4,0" Foreground="{Binding AlarmPriority.ForeColour, Converter={StaticResource PriorityBrush}}" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Right" Content="{Binding NumberOfAreas}" />
<Label Margin="4,0,4,0" Foreground="{Binding AlarmPriority.ForeColour, Converter={StaticResource PriorityBrush}}" Grid.Row="1" Grid.Column="0">Monitored Alarms</Label>
<Label Margin="4,0,4,0" Foreground="{Binding AlarmPriority.ForeColour, Converter={StaticResource PriorityBrush}}" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Content="{Binding NumberOfMonitoredAlarms}" />
<Label Margin="4,0,4,0" Foreground="{Binding AlarmPriority.ForeColour, Converter={StaticResource PriorityBrush}}" Grid.Row="2" Grid.Column="0">Device</Label>
<Label Margin="4,0,4,0" Foreground="{Binding AlarmPriority.ForeColour, Converter={StaticResource PriorityBrush}}" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Right" Content="{Binding Device}" />
<Label Margin="4,0,4,0" Foreground="{Binding AlarmPriority.ForeColour, Converter={StaticResource PriorityBrush}}" Grid.Row="3" Grid.Column="0">Model</Label>
<Label Margin="4,0,4,0" Foreground="{Binding AlarmPriority.ForeColour, Converter={StaticResource PriorityBrush}}" Grid.Row="3" Grid.Column="1" HorizontalAlignment="Right" Content="{Binding Model}" />
</Grid>
</Expander>
</Border>
</HierarchicalDataTemplate>
<!-- *****************************************************************************************************************
Area TreeView item
***************************************************************************************************************** -->
<HierarchicalDataTemplate DataType="{x:Type PAM:MonitoredArea}" ItemsSource="{Binding Alarms}">
<Border Margin="0" BorderBrush="{Binding AlarmPriority.BackColour, Converter={StaticResource PriorityBrush}}"
Background="{Binding AlarmPriority.BackColour, Converter={StaticResource PriorityBrush}}">
<Border.Style>
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=OPCAlarmTriggered}" Value="True">
<Setter Property="BorderThickness" Value="5"/>
<Setter Property="CornerRadius" Value="3,3,3,3"/>
<DataTrigger.EnterActions>
<BeginStoryboard x:Name="FlashBorderAREA" Storyboard="{StaticResource FlashBorder}"/>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="FlashBorderAREA"/>
</DataTrigger.ExitActions>
</DataTrigger>
<DataTrigger Binding="{Binding Path=OPCAlarmTriggered}" Value="False">
<Setter Property="BorderThickness" Value="1"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<Expander Template="{StaticResource RevealExpanderTemp}"
OverridesDefaultStyle="True"
Header="{Binding OPCArea.DBArea.fldDescription}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Margin="4,0,4,0" Foreground="{Binding AlarmPriority.ForeColour, Converter={StaticResource PriorityBrush}}" Grid.Row="0" Grid.Column="0">Monitored Alarms</Label>
<Label Margin="4,0,4,0" Foreground="{Binding AlarmPriority.ForeColour, Converter={StaticResource PriorityBrush}}" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Right" Content="{Binding NumberOfMonitoredAlarms}" />
</Grid>
</Expander>
</Border>
</HierarchicalDataTemplate>
<!-- *****************************************************************************************************************
Alarm TreeView item
***************************************************************************************************************** -->
<DataTemplate DataType="{x:Type PAM:MonitoredAlarm}">
<Border Name="AlarmBorder"
BorderBrush="{Binding AlarmPriority.BackColour, Converter={StaticResource PriorityBrush}}"
Background="{Binding AlarmPriority.BackColour, Converter={StaticResource PriorityBrush}}"
>
<Border.Style>
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=OPCAlarmTriggered}" Value="True">
<Setter Property="BorderThickness" Value="5"/>
<Setter Property="CornerRadius" Value="3,3,3,3"/>
<DataTrigger.EnterActions>
<BeginStoryboard x:Name="FlashBorder" Storyboard="{StaticResource FlashBorder}"/>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="FlashBorder"/>
</DataTrigger.ExitActions>
</DataTrigger>
<DataTrigger Binding="{Binding Path=OPCAlarmTriggered}" Value="False">
<Setter Property="BorderThickness" Value="1"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<Expander Template="{StaticResource RevealExpanderTemp}"
OverridesDefaultStyle="True"
Header="{Binding Description}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Width="400"
>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Margin="4,0,4,0" Foreground="{Binding AlarmPriority.ForeColour, Converter={StaticResource PriorityBrush}}" Grid.Row="0" Grid.Column="0">Current Value</Label>
<Label Margin="4,0,4,0" Foreground="{Binding AlarmPriority.ForeColour, Converter={StaticResource PriorityBrush}}" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Right" Content="{Binding OPCAlarm.OPCValue}" />
<Label Margin="4,0,4,0" Foreground="{Binding AlarmPriority.ForeColour, Converter={StaticResource PriorityBrush}}" Grid.Row="1" Grid.Column="0">Priority</Label>
<Label Margin="4,0,4,0" Foreground="{Binding AlarmPriority.ForeColour, Converter={StaticResource PriorityBrush}}" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Content="{Binding AlarmPriority.DBPriority.fldName}" />
<Label Margin="4,0,4,0" Foreground="{Binding AlarmPriority.ForeColour, Converter={StaticResource PriorityBrush}}" Grid.Row="3" Grid.Column="1" HorizontalAlignment="Right" Content="{Binding TagName}" />
<Label Margin="4,0,4,0" Foreground="{Binding AlarmPriority.ForeColour, Converter={StaticResource PriorityBrush}}" Grid.Row="4" Grid.Column="0">Address</Label>
<Label Margin="4,0,4,0" Foreground="{Binding AlarmPriority.ForeColour, Converter={StaticResource PriorityBrush}}" Grid.Row="4" Grid.Column="1" HorizontalAlignment="Right" Content="{Binding Address}" />
<Label Margin="4,0,4,0" Foreground="{Binding AlarmPriority.ForeColour, Converter={StaticResource PriorityBrush}}" Grid.Row="5" Grid.Column="0">Scan rate</Label>
<Label Margin="4,0,4,0" Foreground="{Binding AlarmPriority.ForeColour, Converter={StaticResource PriorityBrush}}" Grid.Row="5" Grid.Column="1" HorizontalAlignment="Right" Content="{Binding ScanRate}" />
<Label Margin="4,0,4,0" Foreground="{Binding AlarmPriority.ForeColour, Converter={StaticResource PriorityBrush}}" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Right" Content="{Binding LastActive}" />
<Label Margin="4,0,4,0" Foreground="{Binding AlarmPriority.ForeColour, Converter={StaticResource PriorityBrush}}" Grid.Row="3" Grid.Column="0">Activity</Label>
<Label Margin="4,0,4,0" Foreground="{Binding AlarmPriority.ForeColour, Converter={StaticResource PriorityBrush}}" Grid.Row="3" Grid.Column="1" HorizontalAlignment="Right" Content="{Binding Activity}" />
<Label Margin="4,0,4,0" Foreground="{Binding AlarmPriority.ForeColour, Converter={StaticResource PriorityBrush}}" Grid.Row="4" Grid.Column="0">Comment</Label>
<Label Margin="4,0,4,0" Foreground="{Binding AlarmPriority.ForeColour, Converter={StaticResource PriorityBrush}}" Grid.Row="4" Grid.Column="1" HorizontalAlignment="Right" Content="{Binding DBMonitoredAlarm.fldComment}" />
</Grid>
</Expander>
</Border>
</DataTemplate>
</TreeView.Resources>
</TreeView>
答案 0 :(得分:1)
好的,我通过将treenodes中显示的数据重组为“行”集合来解决这个问题,其中每行最多可容纳10个值。然后将此集合绑定到数据网格(最多可包含10列),该数据网格显示在树视图中的数据模板中。
并非完全完美,但它符合我的需要。