WPF Chart - Examples
SciChart WPF ships with hundreds of WPF Chart Examples which you can browse, play with, view the source-code and even export each WPF Chart Example to a stand-alone Visual Studio solution. All of this is possible with the new and improved SciChart WPF Examples Suite, which ships as part of the SciChart WPF SDK.
This 3D Chart demo shows how to control the light direction on the SciChart3DSurface using Viewport3D methods.
The Viewport3D is attached to the SciChart3DSurface.Viewport3D property and may be used to customize the presentation of the 3D Scene.
Tip!
Click “LD” – light direction button on the left to switch between main light modes. You can also change X,Y,Z light direction properties to see how the viewport of the 3D Chart changes.
The C#/WPF source code for the WPF 3D Customize Scene Lightning example is included below (Scroll down!).
Did you know you can also view the source code from one of the following sources as well?
- Clone the SciChart.WPF.Examples from Github.
- Or, view source in the SciChart WPF Examples suite.
- Also the SciChart WPF Trial contains the full source for the examples (link below).
Customize3DSceneLighting.xaml
View source code<UserControl x:Class="SciChart.Examples.Examples.Charts3D.Customize3DChart.Customize3DSceneLighting"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:s3D="http://schemas.abtsoftware.co.uk/scichart3D"
xmlns:ext="http://schemas.abtsoftware.co.uk/scichart/exampleExternals"
mc:Ignorable="d"
d:DesignHeight="450"
d:DesignWidth="800">
<UserControl.Resources>
<s3D:SolidColorBrushPalette x:Key="SolidHeightColorMap" Fill="#228B22" />
</UserControl.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ext:SciChart3DInteractionToolbar TargetSurface="{Binding Source={x:Reference Name=sciChart}}" >
<ext:FlyoutMenuButton Style="{StaticResource FlyoutMenuButtonStyle}"
Content="LD"
FontSize="12"
Padding="0">
<ext:FlyoutMenuButton.PopupContent>
<StackPanel Orientation="Vertical" MinWidth="150">
<TextBlock FontSize="12" Text="Main Light Mode" />
<ComboBox x:Name="lightModeComboBox" Margin="4" SelectionChanged="LightMode_OnSelectionChanged">
<ComboBox.Resources>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="White"/>
</Style>
</ComboBox.Resources>
</ComboBox>
<StackPanel x:Name="lightSlidersPanel">
<StackPanel.Style>
<Style TargetType="{x:Type StackPanel}">
<Setter Property="Opacity" Value="1"/>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.3"/>
</Trigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
<TextBlock FontSize="12" Text="Light Direction X"/>
<Slider Minimum="-1.0" Maximum="1.0" x:Name="lightSliderX" Value="0.5" Margin="4" ValueChanged="LightSlider_OnValueChanged"/>
<TextBlock FontSize="12" Text="Light Direction Y"/>
<Slider Minimum="-1.0" Maximum="1.0" x:Name="lightSliderY" Value="-0.25" Margin="4" ValueChanged="LightSlider_OnValueChanged"/>
<TextBlock FontSize="12" Text="Light Direction Z"/>
<Slider Minimum="-1.0" Maximum="1.0" x:Name="lightSliderZ" Value="-0.5" Margin="4" ValueChanged="LightSlider_OnValueChanged"/>
</StackPanel>
</StackPanel>
</ext:FlyoutMenuButton.PopupContent>
</ext:FlyoutMenuButton>
</ext:SciChart3DInteractionToolbar>
<s3D:SciChart3DSurface x:Name="sciChart" Grid.Column="1" WorldDimensions="200,200,200" Rendered="SciChart_OnRendered">
<s3D:SciChart3DSurface.Camera>
<s3D:Camera3D Target="0,100,0" Radius="450" OrbitalPitch="25"/>
</s3D:SciChart3DSurface.Camera>
<s3D:SciChart3DSurface.RenderableSeries>
<s3D:FreeSurfaceRenderableSeries3D x:Name="sphereMesh"
DrawMeshAs="SolidMesh"
LightingFactor="0.95"
MeshColorPalette="{StaticResource SolidHeightColorMap}"
Shininess="7.0"
SpecularStrength="0.6"/>
</s3D:SciChart3DSurface.RenderableSeries>
<s3D:SciChart3DSurface.XAxis>
<s3D:NumericAxis3D VisibleRange="-7,7" AutoRange="Never" />
</s3D:SciChart3DSurface.XAxis>
<s3D:SciChart3DSurface.YAxis>
<s3D:NumericAxis3D VisibleRange="-7,7" AutoRange="Never" />
</s3D:SciChart3DSurface.YAxis>
<s3D:SciChart3DSurface.ZAxis>
<s3D:NumericAxis3D VisibleRange="-7,7" AutoRange="Never" />
</s3D:SciChart3DSurface.ZAxis>
</s3D:SciChart3DSurface>
<Border Grid.Column="1"
Background="#555"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Margin="10"
BorderThickness="1"
BorderBrush="White"
CornerRadius="2"
Opacity="0.4"
MinWidth="240">
<Grid TextElement.Foreground="White" >
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="Margin" Value="10,5"/>
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Text="Main Light Mode" FontWeight="Bold"/>
<TextBlock x:Name="labelLightMode" Grid.Row="0" Grid.Column="1"/>
<Border Background="White" Height="1" Grid.Row="1" Margin="3,5" Grid.ColumnSpan="2"/>
<TextBlock Text="Light Direction X:" Grid.Row="2" FontWeight="Bold"/>
<TextBlock x:Name="labelLightX" Grid.Row="2" Grid.Column="1"/>
<TextBlock Text="Light Direction Y:" Grid.Row="3" FontWeight="Bold"/>
<TextBlock x:Name="labelLightY" Grid.Row="3" Grid.Column="1"/>
<TextBlock Text="Light Direction Z:" Grid.Row="4" FontWeight="Bold"/>
<TextBlock x:Name="labelLightZ" Grid.Row="4" Grid.Column="1"/>
<Border Background="White" Height="1" Grid.Row="5" Margin="3,5" Grid.ColumnSpan="2"/>
<TextBlock Text="Camera Direction X:" Grid.Row="6" FontWeight="Bold"/>
<TextBlock x:Name="labelCameraX" Grid.Row="6" Grid.Column="1"/>
<TextBlock Text="Camera Direction Y:" Grid.Row="7" FontWeight="Bold"/>
<TextBlock x:Name="labelCameraY" Grid.Row="7" Grid.Column="1"/>
<TextBlock Text="Camera Direction Z:" Grid.Row="8" FontWeight="Bold"/>
<TextBlock x:Name="labelCameraZ" Grid.Row="8" Grid.Column="1"/>
</Grid>
</Border>
</Grid>
</UserControl>Customize3DSceneLighting.xaml.cs
View source code// *************************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2022. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales: sales@scichart.com
//
// Customize3DSceneLighting.xaml.cs is part of the SCICHART® Examples. Permission is hereby granted
// to modify, create derivative works, distribute and publish any part of this source
// code whether for commercial, private or personal use.
//
// The SCICHART® examples are distributed in the hope that they will be useful, but
// without any warranty. It is provided "AS IS" without warranty of any kind, either
// expressed or implied.
// *************************************************************************************
using System;
using System.Windows;
using System.Windows.Controls;
using SciChart.Charting3D;
using SciChart.Charting3D.Model;
using Viewport3D = SciChart.Charting3D.Viewport3D;
namespace SciChart.Examples.Examples.Charts3D.Customize3DChart
{
public partial class Customize3DSceneLighting : UserControl
{
public Customize3DSceneLighting()
{
InitializeComponent();
lightModeComboBox.ItemsSource = Enum.GetValues(typeof(MainLightMode));
lightModeComboBox.SelectedItem = MainLightMode.CameraForward;
int countU = 40;
int countV = 40;
var meshDataSeries = new EllipsoidDataSeries3D<double>(countU, countV)
{
SeriesName = "Sphere Mesh",
A = 6,
B = 6,
C = 6
};
for (var u = 0; u < countU; u++)
{
for (int v = 0; v < countV; v++)
{
meshDataSeries[v, u] = 0.5;
}
}
sphereMesh.DataSeries = meshDataSeries;
}
private void LightSlider_OnValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
if (sciChart?.Viewport3D is Viewport3D viewport)
{
var vector = viewport.GetMainLightDirection();
vector.x = (float) lightSliderX.Value;
vector.y = (float) lightSliderY.Value;
vector.z = (float) lightSliderZ.Value;
viewport.SetMainLightDirection(vector);
}
}
private void LightMode_OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (lightModeComboBox.SelectedItem is MainLightMode lightMode)
{
lightSlidersPanel.IsEnabled = lightMode == MainLightMode.GlobalSpace;
if (sciChart?.Viewport3D is Viewport3D viewport)
{
viewport.SetMainLightMode(lightMode);
if (lightMode == MainLightMode.GlobalSpace)
{
var vector = viewport.GetMainLightDirection();
vector.x = (float) lightSliderX.Value;
vector.y = (float) lightSliderY.Value;
vector.z = (float) lightSliderZ.Value;
viewport.SetMainLightDirection(vector);
}
}
}
}
private void SciChart_OnRendered(object sender, EventArgs e)
{
if (sciChart.Viewport3D is Viewport3D viewport)
{
var lightMode = viewport.GetMainLightMode();
labelLightMode.Text = lightMode.ToString();
var cameraDirection = viewport.CameraController.Target - viewport.CameraController.Position;
cameraDirection.Normalize();
labelCameraX.Text = cameraDirection.X.ToString("F2");
labelCameraY.Text = cameraDirection.Y.ToString("F2");
labelCameraZ.Text = cameraDirection.Z.ToString("F2");
if (lightMode == MainLightMode.CameraForward)
{
labelLightX.Text = labelCameraX.Text;
labelLightY.Text = labelCameraY.Text;
labelLightZ.Text = labelCameraZ.Text;
}
else if (lightMode == MainLightMode.GlobalSpace)
{
var vector = viewport.GetMainLightDirection();
labelLightX.Text = vector.x.ToString("F2");
labelLightY.Text = vector.y.ToString("F2");
labelLightZ.Text = vector.z.ToString("F2");
}
}
}
}
}
