Quantcast
Channel: OxyPlot (moved to GitHub)
Viewing all articles
Browse latest Browse all 2061

New Post: Checkable legend

$
0
0
Hi,
I found a solution that matched quite well my needs some time ago, following there is a simplified extract of my XAML code; essentially there is a graph and a stack panel with the checkboxes used as legend, all the "magic" is done by XAML binding, unfortunately I was not able to customize the bindings to the checkbox name to avoid repeating the code in the style of each series so I had to copy/paste the Style Triggers (I have about 25 series for one graph and 10 for another graph in the same page).
The properties bound to get data are List<DataPoint> for the Line and StairStep Series, while I created a new struct "AreaDataPoint" which is basically an extension of the DataPoint one with a "Y2" property to have the second values for the Y axys so in that case I have a List<AreaDataPoint> for the AreaSeries source items.
In the example you can also find a trick I used to hide all the AreaSeries with just one checkbox giving them different style colors, hope it will be useful :)
Disclaimer: I copied/pasted pieces of my code renaming all the styles, properties and so on because of NDA agreements so I'm not sure this code compiles, please use it as a sample idea not as a working solution (i.e. plot and axes styles are not included because they're simply dimensions and colors).


<Style x:Key="cbSeriesCheckboxes" TargetType="{x:Type CheckBox}" >
<Setter Property="MinHeight" Value="16" />
<Setter Property="IsEnabled" Value="True" />
</Style>

<Style x:Key="AreaSeriesSampleStyle" TargetType="{x:Type oxy:AreaSeries}">
<Setter Property="LineStyle" Value="Solid" />
<Setter Property="StrokeThickness" Value="1" />
<Setter Property="DataFieldY2" Value="Y2" />
<Setter Property="DataFieldX2" Value="X" />
<Setter Property="Visibility" Value="Collapsed" />
<Setter Property="Title" Value="{Binding ElementName=cbAreaSeriesSample, Path=Content}" />
<Style.Triggers>
    <MultiDataTrigger>
        <MultiDataTrigger.Conditions>
            <Condition Binding="{Binding ElementName=cbAreaSeriesSample, Path=IsChecked}" Value="True"/>
            <Condition Binding="{Binding ElementName=cbAreaSeriesSample, Path=IsVisible}" Value="True"/>
        </MultiDataTrigger.Conditions>
        <Setter Property="Visibility" Value="Visible" />
    </MultiDataTrigger>
</Style.Triggers>
<Style.Triggers>
    <Trigger Property="Tag" Value="0">
        <Setter Property="Fill" Value="#4490EE90" />
        <Setter Property="Color" Value="LightGreen" />
    </Trigger>
    <Trigger Property="Tag" Value="1">
        <Setter Property="Fill" Value="#44FFD700" />
        <Setter Property="Color" Value="Gold" />
    </Trigger>
    <Trigger Property="Tag" Value="2">
        <Setter Property="Fill" Value="#44FFA500" />
        <Setter Property="Color" Value="Orange" />
    </Trigger>
    <Trigger Property="Tag" Value="3">
        <Setter Property="Fill" Value="#445F9EA0" />
        <Setter Property="Color" Value="CadetBlue" />
    </Trigger>
</Style.Triggers>
</Style>
<Style x:Key="cbAreaSeriesSample" TargetType="{x:Type CheckBox}" BasedOn="{StaticResource cbSeriesCheckboxes}">
<Setter Property="Foreground" Value="Green" />
<Setter Property="Background" Value="WhiteSmoke" />
</Style>

<Style x:Key="StepSeriesSampleStyle" TargetType="{x:Type my:StairStepSeries}">
<Setter Property="Color" Value="Blue" />
<Setter Property="Title" Value="{Binding ElementName=cbStepSeriesSample, Path=Content}" />
<Style.Triggers>
    <MultiDataTrigger>
        <MultiDataTrigger.Conditions>
            <Condition Binding="{Binding ElementName=cbStepSeriesSample, Path=IsChecked}" Value="True"/>
            <Condition Binding="{Binding ElementName=cbStepSeriesSample, Path=IsVisible}" Value="True"/>
        </MultiDataTrigger.Conditions>
        <Setter Property="Visibility" Value="Visible" />
    </MultiDataTrigger>
</Style.Triggers>
</Style>
<Style x:Key="cbStepSeriesSample" TargetType="{x:Type CheckBox}" BasedOn="{StaticResource cbSeriesCheckboxes}">
<Setter Property="Foreground" Value="Blue" />
<Setter Property="Background" Value="WhiteSmoke" />
</Style>

<Style x:Key="LineSeriesSampleStyle" TargetType="{x:Type oxy:LineSeries}" >
<Setter Property="LineStyle" Value="Solid" />
<Setter Property="StrokeThickness" Value="3" />
<Setter Property="Visibility" Value="Collapsed" />
<Setter Property="CanTrackerInterpolatePoints" Value="False" />
<Setter Property="Color" Value="Brown" />
<Setter Property="Title" Value="{Binding ElementName=cbLineSeriesSample, Path=Content}" />
<Style.Triggers>
    <MultiDataTrigger>
        <MultiDataTrigger.Conditions>
            <Condition Binding="{Binding ElementName=cbLineSeriesSample, Path=IsChecked}" Value="True"/>
            <Condition Binding="{Binding ElementName=cbLineSeriesSample, Path=IsVisible}" Value="True"/>
        </MultiDataTrigger.Conditions>
        <Setter Property="Visibility" Value="Visible" />
    </MultiDataTrigger>
</Style.Triggers>
</Style>
<Style x:Key="cbLineSeriesSample" TargetType="{x:Type CheckBox}" BasedOn="{StaticResource cbSeriesCheckboxes}">
<Setter Property="Foreground" Value="Brown" />
<Setter Property="Background" Value="WhiteSmoke" />
</Style>




<StackPanel x:Name="Graphs" Orientation="Vertical">
<oxy:Plot x:Name="TopPlot" Style="{StaticResource Plot}" MinHeight="380" Height="400" >
    <oxy:Plot.Axes>
        <oxy:DateTimeAxis Style="{StaticResource DateTimeAxis}"/>
        <oxy:LinearAxis Style="{StaticResource LinearAxis}"/> 
    </oxy:Plot.Axes>
    <oxy:AreaSeries Style="{StaticResource AreaSeriesSampleStyle}" ItemsSource="{Binding AreaSeriesData0}" Tag="0"/>
    <oxy:AreaSeries Style="{StaticResource AreaSeriesSampleStyle}" ItemsSource="{Binding AreaSeriesData1}" Tag="1"/>
    <oxy:AreaSeries Style="{StaticResource AreaSeriesSampleStyle}" ItemsSource="{Binding AreaSeriesData2}" Tag="2"/>
    <oxy:AreaSeries Style="{StaticResource AreaSeriesSampleStyle}" ItemsSource="{Binding AreaSeriesData3}" Tag="3"/>
    <my:StairStepSeries Style="{StaticResource StepSeriesSampleStyle}" ItemsSource="{Binding StepSeriesSampleData}"/>
    <oxy:LineSeries Style="{StaticResource LineSeriesSampleStyle}" ItemsSource="{Binding LineSeriesSampleData}"/>
</oxy:Plot>
</StackPanel>

<StackPanel>
<CheckBox x:Name="cbAreaSeriesSample" Style="{StaticResource cbAreaSeriesSample}" Content="Area Series" />
<CheckBox x:Name="cbStepSeriesSample" Style="{StaticResource cbStepSeriesSample}" Content="StairStep Series" IsChecked="True"/>
<CheckBox x:Name="cbLineSeriesSample" Style="{StaticResource cbLineSeriesSample}" Content="Line Series" IsChecked="False"  />
</StackPanel>

Viewing all articles
Browse latest Browse all 2061

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>