CODEWITHSUNDEEP
c#wpfplotlegenddynamic-data-display
cis
cis

Reputation: 93

Legend outside the plot

do you know how can I put the Legend outside the plot area? (Both in code and in xaml)

Thank you for your help!

cis

Upvotes: 1

Views: 604

Answers (2)

olhptr
olhptr

Reputation: 87

Maybe the answer came a little late, but I also ran into this problem.

This is the style of Microsoft.Research.DynamicDataDisplay.Plotter.cs:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
                    xmlns:local="clr-namespace:Microsoft.Research.DynamicDataDisplay"
                    xmlns:common="clr-namespace:Microsoft.Research.DynamicDataDisplay.Common">
  <Style x:Key="defaultPlotterStyle" TargetType="{x:Type local:Plotter}">
    <Setter Property="Control.Background" Value="White"/>
    <Setter Property="Control.BorderBrush" Value="Black"/>
  </Style>
  <ControlTemplate x:Key="defaultPlotterTemplate" TargetType="{x:Type local:Plotter}">
    <common:NotifyingGrid Name="PART_ContentsGrid" Background="{TemplateBinding Control.Background}">
      <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition/>
        <RowDefinition Height="auto"/>
      </Grid.RowDefinitions>
      <common:NotifyingStackPanel Name="PART_HeaderPanel" Orientation="Vertical" Grid.Row="0"/>
      <common:NotifyingGrid Name="PART_MainGrid" Row="1">
        <Grid.RowDefinitions>
          <RowDefinition Height="auto"/>
          <RowDefinition/>
          <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="auto"/>
          <ColumnDefinition/>
          <ColumnDefinition Width="auto"/>
        </Grid.ColumnDefinitions>
        <common:NotifyingGrid Name="PART_CentralGrid" Column="1" Row="1" ClipToBounds="true" Background="Transparent"/>
        <common:NotifyingCanvas Name="PART_MainCanvas" Grid.Column="1" Grid.Row="1" ClipToBounds="true"/>
        <Rectangle Name="PART_ContentBorderRectangle" Grid.Column="1" Grid.Row="1"
                   Stroke="{TemplateBinding Control.BorderBrush}"
                   StrokeThickness="{TemplateBinding Control.BorderThickness}"/>
        <common:NotifyingStackPanel Name="PART_LeftPanel" Grid.Column="0" Grid.Row="1" Orientation="Horizontal"/>
        <common:NotifyingStackPanel Name="PART_RightPanel" Grid.Column="2" Grid.Row="1" Orientation="Horizontal"/>
        <common:NotifyingStackPanel Name="PART_BottomPanel" Grid.Column="1" Grid.Row="2" Orientation="Vertical"/>
        <common:NotifyingStackPanel Name="PART_TopPanel" Grid.Column="1" Grid.Row="0" Orientation="Vertical"/>
      </common:NotifyingGrid>
      <common:NotifyingCanvas Name="PART_ParallelCanvas" Grid.Column="1" Grid.Row="1"/>
      <common:NotifyingStackPanel Name="PART_FooterPanel" Orientation="Vertical" Grid.Row="2"/>
    </common:NotifyingGrid>
  </ControlTemplate>
</ResourceDictionary>

So, the trick is you have to modify the legend's parent and its parent properties, to move the desired elements to the right place in the right size.

PART_CentralGrid element contains the Legend item.

I did the following:

legendGrandparent.Width = plotter.Width - 100;
legendGrandparent.HorizontalAlignment = HorizontalAlignment.Left;
legendParent.ClipToBounds = false;
legend.LegendLeft = plotter.Width - 125;

where legendGrandparent is the PART_MainGrid and legendParent is the PART_CentralGrid.

Before:

Before

After:

After

Upvotes: 0

Jason Higgins
Jason Higgins

Reputation: 1526

There is no implementation in the current D3 library to move the legend outside the plotter. The most that can be done is to move the legend to a different place in the plotter by editing the Legend.xaml.cs file in the source code. You will have to change the dependency properties in the code-behind to move the legend around the area of your plotter.

If you want to put your legend outside the plotter, you will have to recreate the Legend.xaml to make it independent of the plotter, but still receive the same information it needs to create the legend. If you do manage to do that, please post it here as an answer!

Upvotes: 0

Related Questions