admin管理员组

文章数量:1028435

记一次自定义基因分类图实现(二)

前言

最近,心情略差,各种烦心事。总是提不起力气写点啥,但是上周写了一,这周还是把二写了吧,内容没那么多,但是总是自己的一些分享,记录。总得有个宣泄口~,发现不打游戏了,之后 的确没有什么好的爱好能够吸引我的注意力,这几年满脑子都是搞钱两个字,入迷了!

正文

上期讲了怎么实现分类关系,下一步就是实现中间扩展,首先两个需求,需要横向纵向无限扩展,第二点,需要跟随列宽,同步到中心数据。

思路:

用两个ItemsControl来表示横向列名和纵向列名,中间部分用两个itemsControl来生成数据主内容,因为策略要保证中间部分宽度 跟顶部宽度一致,所以中间数据表线竖后横。灵魂画手

图片

所以我们准备一个这样的数据结构,作为中间基类

代码语言:csharp复制
 public class BaseClusterModel
 {
     /// <summary>
     /// 级别
     /// </summary>
     public int Level { get; set; }
     /// <summary>
     /// 每个元素宽度
     /// </summary>
     internal double Width { get; set; }
     /// <summary>
     /// 每个元素高度
     /// </summary>
     internal double Height { get; set; }
     /// <summary>
     /// 父级唯一标识
     /// </summary>
     public string ParentUid { get; set; }
     /// <summary>
     /// 标识
     /// </summary>
     public string Uid { get; set; }

 }

基于基类demo,做了一次扩展,扩展中间类为,

代码语言:csharp复制
 public class TestCluster : BaseClusterModel, INotifyPropertyChanged
   {
       private double showHeight;
       private double showWidth;

       public double ShowWidth
       {
           get => showWidth;
           set
           {
               showWidth = value;
               RaiseOnPropertyChanged();
           }
       }
       public double ShowHeight
       {
           get => showHeight;
           set
           {
               showHeight = value;
               RaiseOnPropertyChanged();
           }
       }
       public string Name { get; set; }
       public List<TestCluster> Children { get; set; } = new List<TestCluster>();

       public event PropertyChangedEventHandler PropertyChanged;
       public void RaiseOnPropertyChanged([CallerMemberName] string name = "")
       {
           PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
       }
   }

通过ShowWidth和来同步宽度,可以通过behavior实现宽度变化绑定

代码语言:csharp复制
 public class NoticeSizeChangedBehavior : Behavior<UIElement>
  {
      protected override void OnAttached()
      {
          base.OnAttached();
          var element = (AssociatedObject as FrameworkElement);
          if (element != null)
              element.SizeChanged += Element_SizeChanged;
      }

      protected override void OnDetaching()
      {
          base.OnDetaching();

          var element = (AssociatedObject as FrameworkElement);
          if (element != null)
              element.SizeChanged -= Element_SizeChanged;

      }


      // Using a DependencyProperty as the backing store for OvservedWidth.  This enables animation, styling, binding, etc...
      public static readonly DependencyProperty OvservedWidthProperty =
          DependencyProperty.Register("OvservedWidth", typeof(double), typeof(NoticeSizeChangedBehavior), new PropertyMetadata(0d));

      public static readonly DependencyProperty OvseredHeightProperty =
        DependencyProperty.Register("OvseredHeight", typeof(double), typeof(NoticeSizeChangedBehavior), new PropertyMetadata(0d));
      public double OvseredHeight
      {
          get { return (double)GetValue(OvseredHeightProperty); }
          set { SetValue(OvseredHeightProperty, value); }
      }
      public double OvservedWidth
      {
          get { return (double)GetValue(OvservedWidthProperty); }
          set { SetValue(OvservedWidthProperty, value); }
      }
      private void Element_SizeChanged(object sender, SizeChangedEventArgs e)
      {
          OvservedWidth = (sender as FrameworkElement).ActualWidth;
          OvseredHeight = (sender as FrameworkElement).ActualHeight;
      }
  }

这样我们就可以保证变化了。

现在我们还有一个问题,怎么在主内容滚动相应方向的,另一个方向的标题冻结。

我们可以通过两个ScrollBar和绑定来实现,看效果,

这样我们基本就实现完成了,最后总布局代码贴上

代码语言:xml复制
  <Window x:Class="ClusteringPlot.MainWindow"
        xmlns=";
        xmlns:x=";
        xmlns:d=";
        xmlns:mc=";
        xmlns:local="clr-namespace:ClusteringPlot"
        xmlns:series="clr-namespace:EasyPlot.Series;assembly=EasyPlot"
        xmlns:behavior="clr-namespace:EasyPlot.Behaviors;assembly=EasyPlot"
         xmlns:i="; xmlns:converters="clr-namespace:ClusteringPlot.Converters"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <converters:ScrollValueConverter x:Key="ScrollValueConverter"></converters:ScrollValueConverter>
        <converters:ScrollBarMaximumConverter x:Key="ScrollBarMaximumConverter"></converters:ScrollBarMaximumConverter>
        <converters:ScrollBarVisibilityConverter x:Key="ScrollBarVisibilityConverter"></converters:ScrollBarVisibilityConverter>
    </Window.Resources>
    <Grid Margin="5">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="0.2*"></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.2*"></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Border  Grid.Column="1" Margin="0,0,0,0"  x:Name="paramBorder"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ClipToBounds="True">
                <Canvas  >
                    <ItemsControl x:Name="root1" Height="{Binding Path=ActualHeight,ElementName=paramBorder}"  Grid.Column="1">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <series:ClusterPanel  MaxLevel="3" Orientation="Horizontal"></series:ClusterPanel>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Border Background="Green" MinWidth="50" MinHeight="20" Margin="5">
                                    <i:Interaction.Behaviors>
                                        <behavior:NoticeSizeChangedBehavior OvservedWidth="{Binding ShowWidth, Mode=TwoWay}" />
                                    </i:Interaction.Behaviors>
                                    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
                                        <TextBlock  Foreground="White" Text="{Binding Name}"></TextBlock>
                                        <TextBlock  Foreground="White" Text="{Binding Level}"></TextBlock>
                                    </StackPanel>
                                </Border>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>

                        <ItemsControl.RenderTransform>
                            <TranslateTransform X="{Binding ElementName=HorizontalBar,Path=Value, Converter={StaticResource ScrollValueConverter}}" />
                        </ItemsControl.RenderTransform>
                    </ItemsControl>
                </Canvas>
            </Border>
            <Border Grid.Column="0" Grid.Row="1"  Margin="0,0,0,0"  x:Name="verBorder"  VerticalAlignment="Stretch" ClipToBounds="True">
                <Canvas >
                    <ItemsControl x:Name="root" Grid.Row="1" Width="{Binding Path=ActualWidth,ElementName=verBorder}">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <series:ClusterPanel  MaxLevel="3" Orientation="Vertical"></series:ClusterPanel>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Border Background="Green" MinWidth="50" MinHeight="20" Margin="5">
                                    <i:Interaction.Behaviors>
                                        <behavior:NoticeSizeChangedBehavior OvseredHeight="{Binding ShowHeight, Mode=TwoWay}" />
                                    </i:Interaction.Behaviors>
                                    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
                                        <TextBlock Foreground="White" Text="{Binding Name}"></TextBlock>
                                        <TextBlock Foreground="White"  Text="{Binding Level}"></TextBlock>
                                    </StackPanel>
                                </Border>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                        <ItemsControl.RenderTransform>
                            <TranslateTransform Y="{Binding ElementName=VerticalBar,Path=Value, Converter={StaticResource ScrollValueConverter}}" />
                        </ItemsControl.RenderTransform>
                    </ItemsControl>
                </Canvas>
            </Border>
            <Border  x:Name="ContentBorder" Grid.Column="1" Grid.Row="1" Margin="0,0,0,0" BorderThickness="0,0,0,0" BorderBrush="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ClipToBounds="True">
                <Canvas   >
                    <ItemsControl Grid.Column="1" Grid.Row="1" x:Name="ContentItemsControl">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel Orientation="Horizontal"></StackPanel>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <ItemsControl ItemsSource="{Binding Children}">
                                    <ItemsControl.ItemsPanel>
                                        <ItemsPanelTemplate>
                                            <StackPanel Orientation="Vertical"></StackPanel>
                                        </ItemsPanelTemplate>
                                    </ItemsControl.ItemsPanel>
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                                            <Border Background="Yellow" MinWidth="50" MinHeight="20" Margin="5" Width="{Binding DataContext.ShowWidth,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=ItemsControl},Mode=OneWay,UpdateSourceTrigger=PropertyChanged}" Height="20">
                                                <TextBlock Text="{Binding Name}"></TextBlock>
                                            </Border>
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                </ItemsControl>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                        <ItemsControl.RenderTransform>
                            <TranslateTransform X="{Binding ElementName=HorizontalBar,Path=Value, Converter={StaticResource ScrollValueConverter}}"
Y="{Binding ElementName=VerticalBar,Path=Value, Converter={StaticResource ScrollValueConverter}}" />
                        </ItemsControl.RenderTransform>
                    </ItemsControl>
                </Canvas>
            </Border>
            <!--主内容横向滚动-->
            <ScrollBar  x:Name="HorizontalBar" Opacity="0.5"  Grid.Row="1" Grid.Column="1" 
     Background="Transparent"
Orientation="Horizontal"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom"
ViewportSize="{Binding ElementName=ContentBorder, Path=ActualWidth}"
Minimum="0.0"
Value="0"
         Margin="0,0,0,0"
Cursor="Arrow" 
>
                <ScrollBar.Maximum>
                    <MultiBinding Mode="OneWay" Converter="{StaticResource ScrollBarMaximumConverter}">
                        <MultiBinding.Bindings>
                            <Binding ElementName="ContentBorder" Path="ActualWidth" />
                            <Binding ElementName="ContentItemsControl" Path="ActualWidth" />
                        </MultiBinding.Bindings>
                    </MultiBinding>
                </ScrollBar.Maximum>
                <ScrollBar.Visibility>
                    <MultiBinding Mode="OneWay" Converter="{StaticResource ScrollBarVisibilityConverter}">
                        <MultiBinding.Bindings>
                            <Binding ElementName="ContentBorder" Path="ActualWidth" />
                            <Binding ElementName="ContentItemsControl" Path="ActualWidth" />
                        </MultiBinding.Bindings>
                    </MultiBinding>
                </ScrollBar.Visibility>
                <ScrollBar.Triggers>
                    <EventTrigger RoutedEvent="MouseEnter"  
                   SourceName="HorizontalBar">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation  
                     Storyboard.TargetName="HorizontalBar"  
                     Storyboard.TargetProperty="Opacity"  
                     To="1"  
                     Duration="0:0:1"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="MouseLeave"  
                   SourceName="HorizontalBar">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation  
                     Storyboard.TargetName="HorizontalBar"  
                     Storyboard.TargetProperty="Opacity"  
                     To="0.3"  
                     Duration="0:0:1"/>
                            </Storyboard>
                        </BeginStoryboard>

                    </EventTrigger>
                </ScrollBar.Triggers>
            </ScrollBar>
            <!--主内容纵向滚动-->
            <ScrollBar  x:Name="VerticalBar" Grid.Row="1" Grid.Column="1" 
Orientation="Vertical"
HorizontalAlignment="Right"
VerticalAlignment="Stretch"
             Opacity="0.5"
ViewportSize="{Binding ElementName=ContentBorder, Path=ActualHeight}"
Minimum="0.0"
Value="0"
Cursor="Arrow"
>
                <ScrollBar.Maximum>
                    <MultiBinding Mode="OneWay" Converter="{StaticResource ScrollBarMaximumConverter}">
                        <MultiBinding.Bindings>
                            <Binding ElementName="ContentBorder" Path="ActualHeight" />
                            <Binding ElementName="ContentItemsControl" Path="ActualHeight" />
                        </MultiBinding.Bindings>
                    </MultiBinding>
                </ScrollBar.Maximum>
                <ScrollBar.Visibility>
                    <MultiBinding Mode="OneWay" Converter="{StaticResource ScrollBarVisibilityConverter}">
                        <MultiBinding.Bindings>
                            <Binding ElementName="ContentBorder" Path="ActualHeight" />
                            <Binding ElementName="ContentItemsControl" Path="ActualHeight" />
                        </MultiBinding.Bindings>
                    </MultiBinding>
                </ScrollBar.Visibility>
            </ScrollBar>
        </Grid>
    </Grid>
</Window>

完整代码:

完结 撒花~  匆忙写好 希望大家轻喷

记一次自定义基因分类图实现(二)

前言

最近,心情略差,各种烦心事。总是提不起力气写点啥,但是上周写了一,这周还是把二写了吧,内容没那么多,但是总是自己的一些分享,记录。总得有个宣泄口~,发现不打游戏了,之后 的确没有什么好的爱好能够吸引我的注意力,这几年满脑子都是搞钱两个字,入迷了!

正文

上期讲了怎么实现分类关系,下一步就是实现中间扩展,首先两个需求,需要横向纵向无限扩展,第二点,需要跟随列宽,同步到中心数据。

思路:

用两个ItemsControl来表示横向列名和纵向列名,中间部分用两个itemsControl来生成数据主内容,因为策略要保证中间部分宽度 跟顶部宽度一致,所以中间数据表线竖后横。灵魂画手

图片

所以我们准备一个这样的数据结构,作为中间基类

代码语言:csharp复制
 public class BaseClusterModel
 {
     /// <summary>
     /// 级别
     /// </summary>
     public int Level { get; set; }
     /// <summary>
     /// 每个元素宽度
     /// </summary>
     internal double Width { get; set; }
     /// <summary>
     /// 每个元素高度
     /// </summary>
     internal double Height { get; set; }
     /// <summary>
     /// 父级唯一标识
     /// </summary>
     public string ParentUid { get; set; }
     /// <summary>
     /// 标识
     /// </summary>
     public string Uid { get; set; }

 }

基于基类demo,做了一次扩展,扩展中间类为,

代码语言:csharp复制
 public class TestCluster : BaseClusterModel, INotifyPropertyChanged
   {
       private double showHeight;
       private double showWidth;

       public double ShowWidth
       {
           get => showWidth;
           set
           {
               showWidth = value;
               RaiseOnPropertyChanged();
           }
       }
       public double ShowHeight
       {
           get => showHeight;
           set
           {
               showHeight = value;
               RaiseOnPropertyChanged();
           }
       }
       public string Name { get; set; }
       public List<TestCluster> Children { get; set; } = new List<TestCluster>();

       public event PropertyChangedEventHandler PropertyChanged;
       public void RaiseOnPropertyChanged([CallerMemberName] string name = "")
       {
           PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
       }
   }

通过ShowWidth和来同步宽度,可以通过behavior实现宽度变化绑定

代码语言:csharp复制
 public class NoticeSizeChangedBehavior : Behavior<UIElement>
  {
      protected override void OnAttached()
      {
          base.OnAttached();
          var element = (AssociatedObject as FrameworkElement);
          if (element != null)
              element.SizeChanged += Element_SizeChanged;
      }

      protected override void OnDetaching()
      {
          base.OnDetaching();

          var element = (AssociatedObject as FrameworkElement);
          if (element != null)
              element.SizeChanged -= Element_SizeChanged;

      }


      // Using a DependencyProperty as the backing store for OvservedWidth.  This enables animation, styling, binding, etc...
      public static readonly DependencyProperty OvservedWidthProperty =
          DependencyProperty.Register("OvservedWidth", typeof(double), typeof(NoticeSizeChangedBehavior), new PropertyMetadata(0d));

      public static readonly DependencyProperty OvseredHeightProperty =
        DependencyProperty.Register("OvseredHeight", typeof(double), typeof(NoticeSizeChangedBehavior), new PropertyMetadata(0d));
      public double OvseredHeight
      {
          get { return (double)GetValue(OvseredHeightProperty); }
          set { SetValue(OvseredHeightProperty, value); }
      }
      public double OvservedWidth
      {
          get { return (double)GetValue(OvservedWidthProperty); }
          set { SetValue(OvservedWidthProperty, value); }
      }
      private void Element_SizeChanged(object sender, SizeChangedEventArgs e)
      {
          OvservedWidth = (sender as FrameworkElement).ActualWidth;
          OvseredHeight = (sender as FrameworkElement).ActualHeight;
      }
  }

这样我们就可以保证变化了。

现在我们还有一个问题,怎么在主内容滚动相应方向的,另一个方向的标题冻结。

我们可以通过两个ScrollBar和绑定来实现,看效果,

这样我们基本就实现完成了,最后总布局代码贴上

代码语言:xml复制
  <Window x:Class="ClusteringPlot.MainWindow"
        xmlns=";
        xmlns:x=";
        xmlns:d=";
        xmlns:mc=";
        xmlns:local="clr-namespace:ClusteringPlot"
        xmlns:series="clr-namespace:EasyPlot.Series;assembly=EasyPlot"
        xmlns:behavior="clr-namespace:EasyPlot.Behaviors;assembly=EasyPlot"
         xmlns:i="; xmlns:converters="clr-namespace:ClusteringPlot.Converters"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <converters:ScrollValueConverter x:Key="ScrollValueConverter"></converters:ScrollValueConverter>
        <converters:ScrollBarMaximumConverter x:Key="ScrollBarMaximumConverter"></converters:ScrollBarMaximumConverter>
        <converters:ScrollBarVisibilityConverter x:Key="ScrollBarVisibilityConverter"></converters:ScrollBarVisibilityConverter>
    </Window.Resources>
    <Grid Margin="5">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="0.2*"></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.2*"></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Border  Grid.Column="1" Margin="0,0,0,0"  x:Name="paramBorder"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ClipToBounds="True">
                <Canvas  >
                    <ItemsControl x:Name="root1" Height="{Binding Path=ActualHeight,ElementName=paramBorder}"  Grid.Column="1">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <series:ClusterPanel  MaxLevel="3" Orientation="Horizontal"></series:ClusterPanel>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Border Background="Green" MinWidth="50" MinHeight="20" Margin="5">
                                    <i:Interaction.Behaviors>
                                        <behavior:NoticeSizeChangedBehavior OvservedWidth="{Binding ShowWidth, Mode=TwoWay}" />
                                    </i:Interaction.Behaviors>
                                    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
                                        <TextBlock  Foreground="White" Text="{Binding Name}"></TextBlock>
                                        <TextBlock  Foreground="White" Text="{Binding Level}"></TextBlock>
                                    </StackPanel>
                                </Border>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>

                        <ItemsControl.RenderTransform>
                            <TranslateTransform X="{Binding ElementName=HorizontalBar,Path=Value, Converter={StaticResource ScrollValueConverter}}" />
                        </ItemsControl.RenderTransform>
                    </ItemsControl>
                </Canvas>
            </Border>
            <Border Grid.Column="0" Grid.Row="1"  Margin="0,0,0,0"  x:Name="verBorder"  VerticalAlignment="Stretch" ClipToBounds="True">
                <Canvas >
                    <ItemsControl x:Name="root" Grid.Row="1" Width="{Binding Path=ActualWidth,ElementName=verBorder}">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <series:ClusterPanel  MaxLevel="3" Orientation="Vertical"></series:ClusterPanel>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Border Background="Green" MinWidth="50" MinHeight="20" Margin="5">
                                    <i:Interaction.Behaviors>
                                        <behavior:NoticeSizeChangedBehavior OvseredHeight="{Binding ShowHeight, Mode=TwoWay}" />
                                    </i:Interaction.Behaviors>
                                    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
                                        <TextBlock Foreground="White" Text="{Binding Name}"></TextBlock>
                                        <TextBlock Foreground="White"  Text="{Binding Level}"></TextBlock>
                                    </StackPanel>
                                </Border>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                        <ItemsControl.RenderTransform>
                            <TranslateTransform Y="{Binding ElementName=VerticalBar,Path=Value, Converter={StaticResource ScrollValueConverter}}" />
                        </ItemsControl.RenderTransform>
                    </ItemsControl>
                </Canvas>
            </Border>
            <Border  x:Name="ContentBorder" Grid.Column="1" Grid.Row="1" Margin="0,0,0,0" BorderThickness="0,0,0,0" BorderBrush="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ClipToBounds="True">
                <Canvas   >
                    <ItemsControl Grid.Column="1" Grid.Row="1" x:Name="ContentItemsControl">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel Orientation="Horizontal"></StackPanel>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <ItemsControl ItemsSource="{Binding Children}">
                                    <ItemsControl.ItemsPanel>
                                        <ItemsPanelTemplate>
                                            <StackPanel Orientation="Vertical"></StackPanel>
                                        </ItemsPanelTemplate>
                                    </ItemsControl.ItemsPanel>
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                                            <Border Background="Yellow" MinWidth="50" MinHeight="20" Margin="5" Width="{Binding DataContext.ShowWidth,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=ItemsControl},Mode=OneWay,UpdateSourceTrigger=PropertyChanged}" Height="20">
                                                <TextBlock Text="{Binding Name}"></TextBlock>
                                            </Border>
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                </ItemsControl>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                        <ItemsControl.RenderTransform>
                            <TranslateTransform X="{Binding ElementName=HorizontalBar,Path=Value, Converter={StaticResource ScrollValueConverter}}"
Y="{Binding ElementName=VerticalBar,Path=Value, Converter={StaticResource ScrollValueConverter}}" />
                        </ItemsControl.RenderTransform>
                    </ItemsControl>
                </Canvas>
            </Border>
            <!--主内容横向滚动-->
            <ScrollBar  x:Name="HorizontalBar" Opacity="0.5"  Grid.Row="1" Grid.Column="1" 
     Background="Transparent"
Orientation="Horizontal"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom"
ViewportSize="{Binding ElementName=ContentBorder, Path=ActualWidth}"
Minimum="0.0"
Value="0"
         Margin="0,0,0,0"
Cursor="Arrow" 
>
                <ScrollBar.Maximum>
                    <MultiBinding Mode="OneWay" Converter="{StaticResource ScrollBarMaximumConverter}">
                        <MultiBinding.Bindings>
                            <Binding ElementName="ContentBorder" Path="ActualWidth" />
                            <Binding ElementName="ContentItemsControl" Path="ActualWidth" />
                        </MultiBinding.Bindings>
                    </MultiBinding>
                </ScrollBar.Maximum>
                <ScrollBar.Visibility>
                    <MultiBinding Mode="OneWay" Converter="{StaticResource ScrollBarVisibilityConverter}">
                        <MultiBinding.Bindings>
                            <Binding ElementName="ContentBorder" Path="ActualWidth" />
                            <Binding ElementName="ContentItemsControl" Path="ActualWidth" />
                        </MultiBinding.Bindings>
                    </MultiBinding>
                </ScrollBar.Visibility>
                <ScrollBar.Triggers>
                    <EventTrigger RoutedEvent="MouseEnter"  
                   SourceName="HorizontalBar">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation  
                     Storyboard.TargetName="HorizontalBar"  
                     Storyboard.TargetProperty="Opacity"  
                     To="1"  
                     Duration="0:0:1"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="MouseLeave"  
                   SourceName="HorizontalBar">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation  
                     Storyboard.TargetName="HorizontalBar"  
                     Storyboard.TargetProperty="Opacity"  
                     To="0.3"  
                     Duration="0:0:1"/>
                            </Storyboard>
                        </BeginStoryboard>

                    </EventTrigger>
                </ScrollBar.Triggers>
            </ScrollBar>
            <!--主内容纵向滚动-->
            <ScrollBar  x:Name="VerticalBar" Grid.Row="1" Grid.Column="1" 
Orientation="Vertical"
HorizontalAlignment="Right"
VerticalAlignment="Stretch"
             Opacity="0.5"
ViewportSize="{Binding ElementName=ContentBorder, Path=ActualHeight}"
Minimum="0.0"
Value="0"
Cursor="Arrow"
>
                <ScrollBar.Maximum>
                    <MultiBinding Mode="OneWay" Converter="{StaticResource ScrollBarMaximumConverter}">
                        <MultiBinding.Bindings>
                            <Binding ElementName="ContentBorder" Path="ActualHeight" />
                            <Binding ElementName="ContentItemsControl" Path="ActualHeight" />
                        </MultiBinding.Bindings>
                    </MultiBinding>
                </ScrollBar.Maximum>
                <ScrollBar.Visibility>
                    <MultiBinding Mode="OneWay" Converter="{StaticResource ScrollBarVisibilityConverter}">
                        <MultiBinding.Bindings>
                            <Binding ElementName="ContentBorder" Path="ActualHeight" />
                            <Binding ElementName="ContentItemsControl" Path="ActualHeight" />
                        </MultiBinding.Bindings>
                    </MultiBinding>
                </ScrollBar.Visibility>
            </ScrollBar>
        </Grid>
    </Grid>
</Window>

完整代码:

完结 撒花~  匆忙写好 希望大家轻喷

本文标签: 记一次自定义基因分类图实现(二)