<telerik:RadDiagram x:Name="diagram1" GraphSource="{Binding GraphSource, Mode=TwoWay}"
ShapeTemplate="{StaticResource ShapeTemplate}" SelectionMode="Extended" />
控件样式绑定资源文件(核心关键词StaticResource),所以不能重复Graph,当我重新绑定数据时,只能获取到数据,但是控件样式不发生变化
解决方案:
删除之前的控件,重新new一个,然后从资源文件中获取 模板列赋值
gdDiagram.Children.Clear();
// 新建一个RadDiagram替换之前的
Telerik.Windows.Controls.RadDiagram diagram = new Telerik.Windows.Controls.RadDiagram();
diagram.SelectionMode = (Telerik.Windows.Diagrams.Core.SelectionMode)SelectionMode.Extended;
diagram.GraphSource = viewModel.GraphSource;
diagram.ShapeTemplate = this.Resources["ShapeTemplate"] as DataTemplate;
gdDiagram.Children.Add(diagram);
遇到的问题:(在前台)
1. 添加silverlight资源字典:ResourcesSL.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:scr="clr-namespace:CRS.Common" xmlns:viewModel="clr-namespace:CRS.OrgChart.VM" xmlns:tools="clr-namespace:Telerik.Windows.Diagrams.Core;assembly=Telerik.Windows.Diagrams.Core" xmlns:primitives="clr-namespace:Telerik.Windows.Controls.Diagrams.Primitives;assembly=Telerik.Windows.Controls.Diagrams" mc:Ignorable="d" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" xmlns:sp="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" > <Style TargetType="telerik:RadDiagram"> <Setter Property="AllowCopy" Value="False" /> <Setter Property="AllowCut" Value="False" /> <Setter Property="AllowDelete" Value="False" /> <Setter Property="AllowPaste" Value="False" /> <Setter Property="IsConnectorsManipulationEnabled" Value="False" /> <Setter Property="IsEditable" Value="False" /> <Setter Property="IsResizingEnabled" Value="False" /> <Setter Property="IsRotationEnabled" Value="False" /> <Setter Property="IsSnapEnabled" Value="False" /> <Setter Property="ActiveTool" Value="PointerTool" /> </Style> <viewModel:ViewModel x:Key="ViewModel" /> <viewModel:BackgroundSelector x:Key="BackgroundSelector"> <viewModel:BackgroundSelector.TopBrush> <SolidColorBrush Color="#FF9F9E9E" /> </viewModel:BackgroundSelector.TopBrush> <viewModel:BackgroundSelector.TopChild1Brush> <SolidColorBrush Color="#FFF7C300" /> </viewModel:BackgroundSelector.TopChild1Brush> <viewModel:BackgroundSelector.TopChild3Brush> <SolidColorBrush Color="#FF15ACA9" /> </viewModel:BackgroundSelector.TopChild3Brush> <viewModel:BackgroundSelector.TopChild2Brush> <SolidColorBrush Color="#FFE33A33" /> </viewModel:BackgroundSelector.TopChild2Brush> </viewModel:BackgroundSelector> <telerik:BooleanToVisibilityConverter x:Key="Converter" /> <Storyboard x:Key="Collapse"> <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0" BeginTime="0:0:0" Duration="0:0:0.5" /> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0:0:0.5"> <DiscreteObjectKeyFrame.Value> <Visibility>Collapsed</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Key="Show"> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0:0:0"> <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" BeginTime="0:0:0" Duration="0:0:0.5" /> </Storyboard> <Style TargetType="telerik:RadDiagramShape"> <Setter Property="Position" Value="{Binding Position, Mode=TwoWay}" /> <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" /> <Setter Property="Padding" Value="0" /> </Style> <Style TargetType="telerik:RadDiagramConnection"> <Setter Property="Visibility" Value="{Binding Visibility, Mode=TwoWay}" /> <Setter Property="SourceConnectorPosition" Value="Bottom" /> <Setter Property="TargetConnectorPosition" Value="Top" /> <Setter Property="BorderBrush" Value="#FF9F9E9E" /> <Setter Property="ContentTemplate"> <Setter.Value> <DataTemplate /> </Setter.Value> </Setter> </Style> <Style TargetType="TextBlock" x:Key="TextBlockNameStyle"> <Setter Property="FontFamily" Value="Segoe UI Light" /> <Setter Property="FontSize" Value="19" /> <Setter Property="Foreground" Value="#FFFFFFFF" /> <Setter Property="TextWrapping" Value="Wrap" /> <Setter Property="HorizontalAlignment" Value="Left" /> </Style> <Style TargetType="TextBlock" x:Key="TextBlockStyle"> <Setter Property="FontFamily" Value="Segoe UI" /> <Setter Property="FontSize" Value="11" /> <Setter Property="Foreground" Value="#FF333333" /> </Style> <Style TargetType="TextBlock" x:Key="TextBlockPositionStyle" BasedOn="{StaticResource TextBlockStyle}"> <Setter Property="FontWeight" Value="Bold" /> <Setter Property="Margin" Value="0 5 0 0" /> </Style> <Style TargetType="telerik:RadToggleButton" x:Key="RadToggleButtonStyle"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="telerik:RadToggleButton"> <Grid Background="Transparent" Cursor="Hand"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal" /> <VisualState x:Name="MouseOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="path1" Storyboard.TargetProperty="Fill"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <SolidColorBrush Color="#FF333333" /> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="path2" Storyboard.TargetProperty="Fill"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <SolidColorBrush Color="#FF333333" /> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Pressed" /> </VisualStateGroup> <VisualStateGroup x:Name="CheckStates"> <VisualState x:Name="Checked"> <Storyboard> <DoubleAnimation Storyboard.TargetName="arrow" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle" To="180" Duration="0:0:0.2" /> </Storyboard> </VisualState> <VisualState x:Name="Unchecked"> <Storyboard> <DoubleAnimation Storyboard.TargetName="arrow" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle" To="0" Duration="0:0:0.2" /> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Grid Height="9" Margin="0,2,0,0" Width="8" x:Name="arrow" RenderTransformOrigin="0.5,0.5"> <Path x:Name="path1" Data="M8,0.14471819 L8,1.999831 L4,4.2555118 L0,1.9998311 L0,0.1447183 L4,2.400399 z" Fill="White" Margin="0,4,0,0" Stretch="Fill" StrokeThickness="2" UseLayoutRounding="False" /> <Path x:Name="path2" Data="M8,0.14471819 L8,1.999831 L4,4.2555118 L0,1.9998311 L0,0.1447183 L4,2.400399 z" Fill="White" Margin="0,0,0,4" Stretch="Fill" StrokeThickness="2" UseLayoutRounding="False" /> <Grid.RenderTransform> <RotateTransform Angle="0" /> </Grid.RenderTransform> </Grid> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> <DataTemplate x:Key="ShapeTemplate"> <Grid Background="{Binding Branch, Converter={StaticResource BackgroundSelector}}" Width="200" Height="74"> <ToolTipService.ToolTip> <ToolTip Background="#ededed" BorderBrush="Transparent" Padding="0"> <ToolTip.Effect> <DropShadowEffect BlurRadius="10" ShadowDepth="4" Opacity="0.8" Color="Black" /> </ToolTip.Effect> <Grid Width="230" Height="160" Background="#c4c4c4" Margin="2"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Image Width="61" VerticalAlignment="Top" Height="70" Source="{Binding ImagePath}" Stretch="Fill" Margin="2" /> <StackPanel VerticalAlignment="Top" HorizontalAlignment="Left" Grid.Column="1" Margin="5 0 0 0"> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Name}" Style="{StaticResource TextBlockNameStyle}" /> </StackPanel> <TextBlock Text="{Binding JobPosition}" Margin="0 5 0 0" Style="{StaticResource TextBlockPositionStyle}" /> <TextBlock Text="Seattle" Margin="0 5 0 0" Style="{StaticResource TextBlockStyle}" /> </StackPanel> <Image Source="/CRS;component/OrgChart/Assets/tooltip_info_back.png" Grid.Row="1" Grid.ColumnSpan="2" Stretch="Fill" /> <StackPanel Grid.Row="1" Grid.ColumnSpan="2" Margin="40 3 0 0"> <TextBlock Text="{Binding Email}" Margin="0 5 0 7" Style="{StaticResource TextBlockStyle}" /> <TextBlock Text="{Binding Phone}" Margin="0 5 0 7" Style="{StaticResource TextBlockStyle}" /> <TextBlock Text="Seattle, 607 20th Ave. E., Apt, 24A" Margin="0 5 0 0" Style="{StaticResource TextBlockStyle}" /> </StackPanel> </Grid> </ToolTip> </ToolTipService.ToolTip> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Image Width="61" Height="70" Source="{Binding ImagePath}" Stretch="Fill" Margin="2" /> <StackPanel VerticalAlignment="Top" HorizontalAlignment="Left" Grid.Column="1" Margin="5 0 0 0"> <TextBlock Text="{Binding JobPosition}" Margin="0 5 0 0" Style="{StaticResource TextBlockPositionStyle}" /> <TextBlock Text="{Binding Name}" Width="80" Style="{StaticResource TextBlockNameStyle}" /> </StackPanel> <telerik:RadToggleButton Visibility="{Binding HasChildren, Converter={StaticResource Converter}}" Command="{Binding ToggleVisibilityCommand, Source={StaticResource ViewModel}}" CommandParameter="{Binding}" Grid.Column="2" VerticalAlignment="Top" Width="15" Height="15" Margin="0 5 5 0" Style="{StaticResource RadToggleButtonStyle}" /> </Grid> </DataTemplate> <Style TargetType="primitives:ConnectorControl" x:Key="ConnectorStyle"> <Setter Property="Visibility" Value="Collapsed" /> </Style> </ResourceDictionary>
2.功能界面:
<scr:BasePage x:Class="CRS.StrategicManage.DecisionMaking" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:scr="clr-namespace:CRS.Common" mc:Ignorable="d" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" xmlns:sp="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" Title="决策链管理" Loaded="BasePage_Loaded"> <Grid x:Name="LayoutRoot"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"></ColumnDefinition> <ColumnDefinition Width="4"></ColumnDefinition> <ColumnDefinition Width="*"></ColumnDefinition> </Grid.ColumnDefinitions> <Grid Width="200"> <Grid.RowDefinitions> <RowDefinition Height="Auto"></RowDefinition> <RowDefinition Height="*"></RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"></ColumnDefinition> <ColumnDefinition Width="Auto"></ColumnDefinition> <ColumnDefinition Width="*"></ColumnDefinition> </Grid.ColumnDefinitions> <telerik:RadTreeView x:Name="rtvOrg" Grid.Row="1" Grid.ColumnSpan="3" VerticalAlignment="Top" SelectionMode="Single" TabIndex="0"/> </Grid> <sp:GridSplitter Grid.Column="1" Width="2" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" Background="#BFBFBF" Margin="1 0"></sp:GridSplitter> <Grid Grid.Column="2" Background="Transparent" DataContext="{StaticResource ViewModel}" x:Name="gdDiagram"> </Grid> </Grid> </scr:BasePage>
3. 后台实现
using CRS.Common; using CRS.CRS_Service; using CRS.OrgChart; using CRS.OrgChart.ViewModels; using CRS.OrgChart.VM; using System; using System.Diagnostics; using System.Linq; using System.Windows; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Media.Imaging; using Telerik.Windows.Controls; namespace CRS.StrategicManage { public partial class DecisionMaking : BasePage { CRS_Service.CRSServiceClient service = new CRS_Service.CRSServiceClient(); OrgLayoutAlgorithm orgLayoutAlgorithm = new OrgLayoutAlgorithm(); private ViewModel viewModel; Storyboard collapse, show; RadTreeViewItem org = null; public DecisionMaking() { #region 加载资源 ResourceDictionary newRD = new ResourceDictionary(); newRD.Source = new Uri("/crs;component/StrategicManage/ResourcesSL.xaml", UriKind.Relative); this.Resources.MergedDictionaries.Add(newRD); #endregion InitializeComponent(); this.viewModel = this.Resources["ViewModel"] as ViewModel; this.collapse = this.Resources["Collapse"] as Storyboard; this.show = this.Resources["Show"] as Storyboard; this.viewModel.NodeVisibilityChanged += this.ViewModel_NodeVisibilityChanged; } private void BasePage_Loaded(object sender, RoutedEventArgs e) { service.GetOrgCompleted += Service_GetOrgCompleted; service.GetOrgAsync(); } /// <summary> /// 异步获取角色信息 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void Service_GetOrgCompleted(object sender, CRS_Service.GetOrgCompletedEventArgs e) { try { this.rtvOrg.Items.Clear(); RadTreeViewItem newItem; foreach (organization i in e.Result.OrderBy(m => m.ID).ToList()) { newItem = new RadTreeViewItem(); newItem.Header = i.OrgName; newItem.Tag = i.ID; newItem.FontSize = 13; newItem.DefaultImageSrc = new BitmapImage(new Uri("/CRS;Component/Images/org.png", UriKind.Relative)); newItem.Foreground = new SolidColorBrush(Colors.Black); newItem.Margin = new Thickness(0, 1, 0, 0); newItem.IsExpanded = true; newItem.Click += newItem_Click; rtvOrg.Items.Add(newItem); } rtvOrg.SelectedItem = org = (RadTreeViewItem)rtvOrg.Items[0]; ShowChart(); } catch (Exception) { throw; } finally { service.GetOrgCompleted -= Service_GetOrgCompleted; } } /// <summary> /// 单击 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void newItem_Click(object sender, Telerik.Windows.RadRoutedEventArgs e) { try { org = (RadTreeViewItem)sender; ShowChart(); } catch (Exception ex) { RadWindow.Alert(ex.Message); } } private void Diagram_SizeChanged(object sender, SizeChangedEventArgs e) { RadDiagram d = (RadDiagram)sender; this.orgLayoutAlgorithm.Layout(d); d.AutoFit(); } /// <summary> /// 子节点是否可见 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void ViewModel_NodeVisibilityChanged(object sender, VisibilityChangedEventArgs e) { RadDiagram diagramControl = (RadDiagram)gdDiagram.Children[0]; Node node = sender as Node; var container = diagramControl.ContainerGenerator.ContainerFromItem(node) as Telerik.Windows.Controls.RadDiagramShape; Debug.Assert(container != null); if (e.IsVisible) container.Visibility = System.Windows.Visibility.Visible; else container.Visibility = System.Windows.Visibility.Collapsed; } public void ShowChart() { if (org != null) (this.Resources["ViewModel"] as ViewModel).OrgCategory = org.Tag.ToString(); gdDiagram.Children.Clear(); // 新建一个RadDiagram替换之前的 Telerik.Windows.Controls.RadDiagram diagram = new Telerik.Windows.Controls.RadDiagram(); diagram.SelectionMode = (Telerik.Windows.Diagrams.Core.SelectionMode)SelectionMode.Extended; diagram.GraphSource = viewModel.GraphSource; diagram.ShapeTemplate = this.Resources["ShapeTemplate"] as DataTemplate; gdDiagram.Children.Add(diagram); diagram.SizeChanged += this.Diagram_SizeChanged; } } }