WPF树视图,带有水平包装的叶子项目
新加入WPF的我正尝试使用TreeView,它提供的灵活性给我留下了难以置信的印象 到目前为止,我的每个treeview项目都实现了一个扩展器,这是显示每个项目更详细信息并让标题仅显示摘要的好方法。但是,这不适合叶项目,并且浪费了屏幕空间——我的treeview中的每个叶项目(其中有许多)显示的数据量相对较小 我想要为叶项目实现的是水平包装,而不是垂直列表。设想显示一个网格或(stackpanel),每个项目都显示在其自己的单元格/区域中,并根据可用水平空间的指示环绕到下面的行上 比如说WPF树视图,带有水平包装的叶子项目,wpf,treeview,treeviewitem,Wpf,Treeview,Treeviewitem,新加入WPF的我正尝试使用TreeView,它提供的灵活性给我留下了难以置信的印象 到目前为止,我的每个treeview项目都实现了一个扩展器,这是显示每个项目更详细信息并让标题仅显示摘要的好方法。但是,这不适合叶项目,并且浪费了屏幕空间——我的treeview中的每个叶项目(其中有许多)显示的数据量相对较小 我想要为叶项目实现的是水平包装,而不是垂直列表。设想显示一个网格或(stackpanel),每个项目都显示在其自己的单元格/区域中,并根据可用水平空间的指示环绕到下面的行上 比如说 Lev
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(这是我已经独立实现的)的文章,也是一个很好的例子。这在某种程度上实现了我想要的,但没有实现项目的包装
我的背景深植于WinForms中,并且由于缺乏WPF经验而受到限制(我喜欢迄今为止学到的东西)。我想做的事可行吗
我不是要一个样板,剪切和粘贴的解决方案,只是一些我可以探索的指针/资源/意见
顺便说一句,由于我公司的吝啬本质,任何解决方案都必须是免费的
多谢各位
以下是到目前为止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>
可编程逻辑控制器
监控报警
地址
评论
地区
监控报警
装置
模型