1
WPF의 새로운 기능 TreeView를 사용하여 손을 잡으려 고 노력하고 있으며 유연성에 놀라움을 금치 못합니다.가로로 감싼 리프 항목이 포함 된 WPF Treeview
지금까지 각 treeview 항목은 각 항목에 대한 세부 정보를 표시하고 머리글을 요약하여 표시하는 데 좋은 방법 인 확장기를 구현합니다. 그러나 이것은 리프 항목에 적합하지 않고 화면 공간이 낭비합니다. 트리 뷰에 각 리프 항목 (그 중 많은 수)이 비교적 적은 양의 데이터를 보여줍니다.
리프 항목에 구현하려는 항목은 세로 목록과 달리 가로 줄 바꿈입니다. 그리드 또는 (스택 패널)이 표시되고 각 항목이 사용 가능한 가로 공간에 따라 아래 행에 배치되는 자체 셀/영역에 표시된다고 상상해보십시오. 나는 (내가 이미 독립적으로 구현 한 것입니다) TreeGrid에 대해 읽은 또한 우수한 http://www.codeproject.com/Articles/17025/Custom-TreeView-Layout-in-WPF 예 - 예를
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| ....
나는 이것에 대한 나이를 검색 한에 대한
. 이것은 내가 원하는 것을 수행하기 위해 어딘가로 간다. 그러나 항목의 줄 바꿈을 구현하지는 않는다.
내 배경이 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>
흥미로운 도전 과제. 나는 당신이 이것을 위해'TreeViewItem'을 retemplate해야 할 것이라고 생각합니다. 우리가 작업 할 수있는 기존 XAML이 있습니까? 그렇다면 여기에 게시하십시오 –
Re-templating - 동일한 결론에 도달 했으므로 codeproject가 구현 한 것입니다. 월요일에 작업 할 때까지 기다려야하는 xaml이 없습니다. 그러나 계층 적 데이터 템플릿 (각 레벨 중 하나, 그리드가 포함 된 확장기)에 이어 마지막 데이터 템플릿이옵니다. 여기에는 단순히 리프 노드 당 확장기가 포함됩니다. OPC 제어/시스템 (OPC Control/System)에 대해 설명하고 있습니다. 인터페이스는 OPC 서버/장치 목록을 표시 할 것이며 각 리프는 알람을 나타냅니다. 수십 개가 될 수 있습니다. 그래서 .. (글자가 부족하기 때문에 계속됩니다.) –
화면 크기를 최대화하면이 잎들은 설명 된 방식으로 표시됩니다. 사용자는 하나를 클릭하여 더 많은 정보를 얻을 수 있습니다. 아이디어는이 인터페이스가 최소한의 사용자 인터페이스에 최대 정보를 전달한다는 것입니다. 그러나 저의 삶에 대해 저는 이것이 어떻게 이전에 구현되었는지에 대한 예를 찾을 수 없습니다. 나는 누군가가 나를 위해이 문제를 해결할 것을 기대하지는 않는다. 나는 올바른 방향으로 도움이 될만한 지식을주기 위해서이다. –