We Keep Coding

Incorrect calculation of values after removing an element from ChartValues

My application calculates points by a given formula. With a small interval, new points are added to the chart. With the slider I can adjust the values of these points.
For optimization purposes, unnecessary points begin to be deleted from the list. But after deletion, the value of the next point starts to be calculated incorrectly when you move the slider.
Before points deleting (gif)
After points deleting (gif)
How can this problem be solved?
Class:
using System.Windows;
using LiveCharts;
using LiveCharts.Wpf;
using LiveCharts.Defaults;
using System.Windows.Media;
using System.Threading.Tasks;
using System;
using System.Threading;
namespace TestChartApp
{
public partial class MainWindow : Window
{
SeriesCollection series = new SeriesCollection();
ChartValues<ObservableValue> observableValues = new ChartValues<ObservableValue>();
LineSeries lineSeries = new LineSeries
{
Stroke = Brushes.Blue,
Fill = Brushes.Transparent,
PointGeometry = null
};
double currentStep = 0;
public MainWindow()
{
InitializeComponent();
lineSeries.Values = observableValues;
series.Add(lineSeries);
myChart.Series = series;
myChart.DataTooltip = null;
myChart.Hoverable = false;
Task.Factory.StartNew(AddValues);
}
private void AddValues()
{
Application.Current.Dispatcher.Invoke(() =>
{
ObservableValue value = new ObservableValue(sAmplitude.Value * Math.Sin(2 * Math.PI * 0.25 * currentStep));
currentStep += 0.06;
observableValues.Add(value);
if (observableValues.Count > 100)
{
SetAxisLimits(observableValues.Count);
}
if (observableValues.Count > 150)
{
observableValues.RemoveAt(0);
}
});
Thread.Sleep(35);
Task.Factory.StartNew(AddValues);
}
private void SetAxisLimits(double value)
{
Axis axis = myChart.AxisX[0];
axis.MinValue += value - axis.MaxValue;
axis.MaxValue = value;
}
private void ChangeObservableValues()
{
int j = 0;
for (double i = 0.0; j < observableValues.Count; i += 0.06)
{
observableValues[j++].Value = sAmplitude.Value * Math.Sin(2 * Math.PI * 0.25 * i);
}
}
private void sAmplitude_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
if (lineSeries.Values != null)
{
ChangeObservableValues();
}
}
}
}
XAML:
<Window x:Class="TestChartApp.MainWindow"
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:local="clr-namespace:TestChartApp"
xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
mc:Ignorable="d"
Title="MainWindow" Height="600" Width="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.8*"/>
<RowDefinition Height="0.2*"/>
</Grid.RowDefinitions>
<lvc:CartesianChart x:Name="myChart" DisableAnimations="True">
<lvc:CartesianChart.AxisX>
<lvc:Axis MaxValue="100" MinValue="0" Labels="" Unit="1">
<lvc:Axis.Separator>
<lvc:Separator Step="20">
<lvc:Separator.Stroke>
<SolidColorBrush Color="Gray" />
</lvc:Separator.Stroke>
</lvc:Separator>
</lvc:Axis.Separator>
</lvc:Axis>
</lvc:CartesianChart.AxisX>
<lvc:CartesianChart.AxisY>
<lvc:Axis MaxValue="100" MinValue="-100" Labels="">
<lvc:Axis.Separator>
<lvc:Separator>
<lvc:Separator.Stroke>
<SolidColorBrush Color="Gray" />
</lvc:Separator.Stroke>
</lvc:Separator>
</lvc:Axis.Separator>
</lvc:Axis>
</lvc:CartesianChart.AxisY>
</lvc:CartesianChart>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Slider x:Name="sAmplitude" HorizontalAlignment="Stretch" Margin="30 30 30 0" Grid.Row="1" VerticalAlignment="Top" Maximum="100" Value="50" LargeChange="10" ValueChanged="sAmplitude_ValueChanged"/>
</Grid>
</Grid>
</Window>

It looks like you are calculating the wrong values when updating the old data.
ChangeObservableValues is calculating its own currentSteps value, always starting from 0, which is wrong as the original value for the current data point is bigger :
originalCurrentStepsOfCurrentDataPoint =
absoluteCurrentDataPointPosition * 0.06.
To allow easier refactoring and also to eliminate a potential error source, the value 0.06 should be a constant field or read-only property.
private const double Step = 0.06;
private void ChangeObservableValues()
{
// Because the collection only contains the latest 150 values,
// we can calculate the absolute position using the collection's Count
var restoredCurrentStep =
this.currentStep - this.observableValues.Count * MainWindow.Step;
for (int index = 0; index < observableValues.Count; index++)
{
observableValues[index].Value =
sAmplitude.Value * Math.Sin(2 * Math.PI * 0.25 * restoredCurrentStep);
restoredCurrentStep += MainWindow.Step;
}
}

Attach Mouse Events to Rect WPF

I have the following program that creates Rectangle using Rect object. I want to attach Mouse events to newly created Rect. How can I do that? Please help. Here's the code below.
XAML
<Window x:Class="TestDrawing.MainWindow"
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:local="clr-namespace:TestDrawing"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid Margin="12">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<Canvas>
<Button x:Name="BtnAddRectangle" Content="Add Rectngle" Click="BtnAddRectangle_Click" Height="20"/>
</Canvas>
</StackPanel>
<Canvas Name="canvas">
</Canvas>
</Grid>
CS
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace TestDrawing
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
bool drag = false;
Point startPoint;
public MainWindow()
{
InitializeComponent();
}
// this creates and adds rectangles dynamically
private void BtnAddRectangle_Click(object sender, RoutedEventArgs e)
{
DrawingVisual drawingVisual = new DrawingVisual();
// Retrieve the DrawingContext in order to create new drawing content.
DrawingContext drawingContext = drawingVisual.RenderOpen();
// Create a rectangle and draw it in the DrawingContext.
Rect rect = new Rect(new Size(150, 100));
drawingContext.DrawRectangle(Brushes.LightBlue, null,rect);
drawingContext.Close();
canvas.Children.Add(new VisualHost { Visual = drawingVisual });
foreach (UIElement child in canvas.Children)
{
//Not working
child.MouseDown += rectangle_MouseDown;
child.MouseMove += rectangle_MouseMove;
}
}
private void rectangle_MouseDown(object sender, MouseButtonEventArgs e)
{
// start dragging
drag = true;
// save start point of dragging
startPoint = Mouse.GetPosition(canvas);
}
private void rectangle_MouseMove(object sender, MouseEventArgs e)
{
// if dragging, then adjust rectangle position based on mouse movement
if (drag)
{
Rectangle draggedRectangle = sender as Rectangle;
Point newPoint = Mouse.GetPosition(canvas);
double left = Canvas.GetLeft(draggedRectangle);
double top = Canvas.GetTop(draggedRectangle);
Canvas.SetLeft(draggedRectangle, left + (newPoint.X - startPoint.X));
Canvas.SetTop(draggedRectangle, top + (newPoint.Y - startPoint.Y));
startPoint = newPoint;
}
}
private void rectangle_MouseUp(object sender, MouseButtonEventArgs e)
{
// stop dragging
drag = false;
}
}
public class VisualHost : UIElement
{
public Visual Visual { get; set; }
protected override int VisualChildrenCount
{
get { return Visual != null ? 1 : 0; }
}
protected override Visual GetVisualChild(int index)
{
return Visual;
}
}
}

Here's a quote from the MSDN page on Using DrawingVisual Objects:
The DrawingVisual is a lightweight drawing class that is used to render shapes, images, or text. This class is considered lightweight because it does not provide layout or event handling, which improves its performance. For this reason, drawings are ideal for backgrounds and clip art.
If you need event handling, why not just use the existing Rectangle class? Your existing code can be easily changed to use this class instead of your custom VisualHost.
private void BtnAddRectangle_Click(object sender, RoutedEventArgs e)
{
Rectangle rect = new Rectangle() { Fill = Brushes.LightBlue, Width = 150, Height = 100 };
canvas.Children.Add(rect);
foreach (UIElement child in canvas.Children)
{
child.MouseDown += rectangle_MouseDown;
child.MouseMove += rectangle_MouseMove;
}
}

Refreshing canvas

I have a question about refreshing canvas. There is .Refresh() or .Clear() in WinForms.But what about WPF?
I watched some methods how to do it, but it didn't help me at all.
The situation is that my canvas contains textBox and Button. When I click button I can draw some ellipses.
And I need to clear these ellipses after my every click on button but without clearing textBox and Button from this Canvas!
My WPF Xaml:
<Window x:Class="draw.CreateEllipse"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Create" Height="768" Width="1024" WindowStartupLocation="CenterScreen" Name="Create" Closed="Create_Closed">
<Canvas Name="can" Background="White" MouseDown="can_MouseDown">
<TextBox Name="txbNumber" Height="34" Canvas.Left="797" TextWrapping="Wrap" Text="5" Canvas.Top="76" Width="209" FontSize="18"/>
<Button Name="btnCreate" Content="Create" Canvas.Left="797" Canvas.Top="130" Width="209" Height="66" FontSize="18" Click="btnCreate_Click"/>
</Canvas>
My C# :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
namespace draw
{
/// <summary>
/// Логика взаимодействия для CreateGraph.xaml
/// </summary>
public partial class Create : Window
{
public Create()
{
InitializeComponent();
}
int n, i;
Ellipse[] v;
Rectangle rect = new Rectangle();
SolidColorBrush solidcolor = new SolidColorBrush();
private void btnCreate_Click(object sender, RoutedEventArgs e)
{
n = Convert.ToInt16(txbNumber.Text);
v = new Ellipse[n];
//can.Children.Clear();
}
private void Create_Closed(object sender, EventArgs e)
{
Application.Current.Shutdown();
}
private void can_MouseDown(object sender, MouseButtonEventArgs e)
{
solidcolor.Color = Colors.Transparent;
//Ellipse myEllipse = new Ellipse();
SolidColorBrush mySolidColorBrush = new SolidColorBrush();
for (i = 0; i < n; i++)
{
v[i] = new Ellipse();
mySolidColorBrush.Color = Colors.Transparent;
v[i].Fill = mySolidColorBrush;
v[i].StrokeThickness = 2;
v[i].Stroke = Brushes.Black;
v[i].Width = 75;
v[i].Height = 75;
v[i].Margin = new Thickness(e.GetPosition(can).X, e.GetPosition(can).Y, 0, 0);
can.Children.Add(v[i]);
}
if (n <= 0)
return;
n--;
}
}
}

you can separate your elements with this code:
var can2 = can.Children.OfType<Ellipse>();
above code select all of Ellipses in your Canvas "can".
and you can remove them from your Canvas Like this:
foreach (var element in can2)
{
can.Children.Remove(element);
}
Now you have no ellipse in your Canvas.
Hope this helps you.

Clipping Using Ellipse and binding it inside my user control in Windows RT

I have an image and I am clipping the mouse area using an Ellipse in which I am quite successful.
But I want that ellipse to be a part of my user control and the user control should move along with my finger and the clipping Ellipse should be inside the user control .
The complete project can be downloaded from here
My UserControl'sXAML is
<UserControl
x:Class="App78.Magnifier"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App78"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Height="230"
Width="170">
<Grid Height="230" Width="170">
<Path Data="M25.533,0C15.457,0,7.262,8.199,7.262,18.271c0,9.461,13.676,19.698,17.63,32.338 c0.085,0.273,0.34,0.459,0.626,0.457c0.287-0.004,0.538-0.192,0.619-0.467c3.836-12.951,17.666-22.856,17.667-32.33 C43.803,8.199,35.607,0,25.533,0z M25.533,32.131c-7.9,0-14.328-6.429-14.328-14.328c0-7.9,6.428-14.328,14.328-14.328 c7.898,0,14.327,6.428,14.327,14.328C39.86,25.702,33.431,32.131,25.533,32.131z"
Fill="#FFF4F4F5"
Stretch="Fill"
Stroke="Black"
UseLayoutRounding="False"
Height="227"
Width="171" ></Path>
<Ellipse x:Name="MagnifierEllipse" x:FieldModifier="public" Opacity="1" Visibility="Visible" HorizontalAlignment="Left" VerticalAlignment="Top" IsHitTestVisible="False" Width="150" Height="150" Stroke="White" StrokeThickness="3" Margin="11,8,0,0" >
<Ellipse.RenderTransform>
<TranslateTransform x:Name="MagnifierTransform" x:FieldModifier="public"/>
</Ellipse.RenderTransform>
<Ellipse.Fill>
<ImageBrush
ImageSource="http://blog.al.com/space-news/2009/04/iss015e22574.jpg"
Stretch="None"
AlignmentX="Left"
AlignmentY="Top">
<ImageBrush.Transform>
<TransformGroup>
<TranslateTransform x:FieldModifier="public"
x:Name="PositionTransform"/>
<ScaleTransform x:FieldModifier="public"
x:Name="ZoomTransform"/>
<TranslateTransform x:FieldModifier="public"
x:Name="CenterTransform" />
</TransformGroup>
</ImageBrush.Transform>
</ImageBrush>
</Ellipse.Fill>
</Ellipse>
</Grid>
</UserControl>
My MainPage.XAML is
<Page
x:Class="App78.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App78"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid
x:Name="LayoutGrid"
Margin="0,0"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
Holding="LayoutGrid_Holding"
PointerMoved="LayoutGrid_OnPointerMoved"
PointerWheelChanged="LayoutGrid_OnPointerWheelChanged">
<Image
x:Name="BigImage"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Stretch="Uniform"
Source="http://blog.al.com/space-news/2009/04/iss015e22574.jpg" />
<!--<Ellipse
x:Name="MagnifierEllipse"
Opacity="1"
Visibility="Collapsed"
HorizontalAlignment="Left"
VerticalAlignment="Top"
IsHitTestVisible="False"
Width="150"
Height="150"
Stroke="White"
StrokeThickness="3"
Margin="-100">
<Ellipse.RenderTransform>
<TranslateTransform
x:Name="MagnifierTransform"/>
</Ellipse.RenderTransform>
<Ellipse.Fill>
<ImageBrush
ImageSource="http://blog.al.com/space-news/2009/04/iss015e22574.jpg"
Stretch="None"
AlignmentX="Left"
AlignmentY="Top">
<ImageBrush.Transform>
<TransformGroup>
<TranslateTransform
x:Name="PositionTransform"/>
<ScaleTransform
x:Name="ZoomTransform"/>
<TranslateTransform
x:Name="CenterTransform" />
</TransformGroup>
</ImageBrush.Transform>
</ImageBrush>
</Ellipse.Fill>
</Ellipse>-->
<local:Magnifier x:Name="MagnifierTip" Visibility="Visible" />
</Grid>
</Page>
Please see the commented section of Ellipse , If I uncomment , I clearly get a Ellipse that is doing the clip.
My main requirenment is to get the Ellipse inside the user control , please refer the video for more clarification
My MainPage.XAML.CS has the following code
using System;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Imaging;
namespace App78
{
public sealed partial class MainPage : Page
{
private double zoomScale = 2;
private double pointerX = 0;
private double pointerY = 0;
private const double MinZoomScale = .25;
private const double MaxZoomScale = 32;
public MainPage()
{
this.InitializeComponent();
var bi = (BitmapImage)BigImage.Source;
bi.ImageOpened += bi_ImageOpened;
this.SizeChanged += MainPage_SizeChanged;
}
void MainPage_SizeChanged(object sender, Windows.UI.Xaml.SizeChangedEventArgs e)
{
this.UpdateImageLayout();
}
void bi_ImageOpened(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
this.UpdateImageLayout();
}
private void UpdateImageLayout()
{
var bi = (BitmapImage)BigImage.Source;
if (bi.PixelWidth < this.LayoutGrid.ActualWidth &&
bi.PixelHeight < this.LayoutGrid.ActualHeight)
{
this.BigImage.Stretch = Stretch.None;
}
else
{
this.BigImage.Stretch = Stretch.Uniform;
}
this.UpdateMagnifier();
}
private void LayoutGrid_OnPointerMoved(object sender, PointerRoutedEventArgs e)
{
// MagnifierTip.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
var point = e.GetCurrentPoint(this.LayoutGrid);
this.pointerX = point.Position.X;
this.pointerY = point.Position.Y;
this.UpdateMagnifier();
}
private void UpdateMagnifier()
{
var bi = (BitmapImage)BigImage.Source;
double offsetX = 0;
double offsetY = 0;
double imageScale = 1;
var imageRatio = (double)bi.PixelWidth / bi.PixelHeight;
var gridRatio = this.LayoutGrid.ActualWidth / this.LayoutGrid.ActualHeight;
if (bi.PixelWidth < this.LayoutGrid.ActualWidth &&
bi.PixelHeight < this.LayoutGrid.ActualHeight)
{
offsetX = 0.5 * (this.LayoutGrid.ActualWidth - bi.PixelWidth);
offsetY = 0.5 * (this.LayoutGrid.ActualHeight - bi.PixelHeight);
//imageScale = 1; - remains
}
else if (imageRatio < gridRatio)
{
offsetX = 0.5 * (this.LayoutGrid.ActualWidth - imageRatio * this.LayoutGrid.ActualHeight);
offsetY = 0;
imageScale = BigImage.ActualHeight / bi.PixelHeight;
}
else
{
offsetX = 0;
offsetY = 0.5 * (this.LayoutGrid.ActualHeight - this.LayoutGrid.ActualWidth / imageRatio);
imageScale = BigImage.ActualWidth / bi.PixelWidth;
}
MagnifierTip.MagnifierTransform.X = this.pointerX;
MagnifierTip.MagnifierTransform.Y = this.pointerY;
MagnifierTip.PositionTransform.X = (-this.pointerX + offsetX) / imageScale;
MagnifierTip.PositionTransform.Y = (-this.pointerY + offsetY) / imageScale;
MagnifierTip. ZoomTransform.ScaleX = imageScale * zoomScale;
MagnifierTip.ZoomTransform.ScaleY = imageScale * zoomScale;
MagnifierTip.CenterTransform.X = MagnifierTip.MagnifierEllipse.ActualWidth / 2 - MagnifierTip.MagnifierEllipse.StrokeThickness / 2;
MagnifierTip.CenterTransform.Y = MagnifierTip.MagnifierEllipse.ActualHeight / 2 - MagnifierTip.MagnifierEllipse.StrokeThickness / 2;
}
private void LayoutGrid_OnPointerWheelChanged(object sender, PointerRoutedEventArgs e)
{
if (e.GetCurrentPoint(this.LayoutGrid).Properties.MouseWheelDelta > 0)
{
zoomScale = Math.Max(MinZoomScale, Math.Min(MaxZoomScale, zoomScale * 1.2));
}
else
{
zoomScale = Math.Max(MinZoomScale, Math.Min(MaxZoomScale, zoomScale / 1.2));
}
this.UpdateMagnifier();
}
private void LayoutGrid_Holding(object sender, HoldingRoutedEventArgs e)
{
// MagnifierTip.Visibility = Windows.UI.Xaml.Visibility.Visible;
}
}
}

I think you need to get your MagnifierTransform to the "root" Grid of your Magnifier UserControl.
Also the CenterTransform doesn't seem to be needed in my opinion.
The other last change is in the MainPage, making the User Control aligned to Top/Left so that the TranslateTransforms make sense.
Just as a bonus, I got the updated project here , also with pointer pressed/released events to show/hide the magnifier. Be warned that "Holding" doesn't work with most mouse devices. Source: link
I also added comments on my changes (comments start with DV:).
It's not perfect and there's obviously still a lot for you to implement but hopefully this is what you needed.
For whoever doesn't want to download the project I'll leave the updated code here:
MainPage.xaml
<Page
x:Class="App78.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App78"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid
x:Name="LayoutGrid"
Margin="0,0"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
Holding="LayoutGrid_Holding"
PointerMoved="LayoutGrid_OnPointerMoved"
PointerWheelChanged="LayoutGrid_OnPointerWheelChanged"
PointerPressed="LayoutGrid_OnPointerPressed"
PointerReleased="LayoutGrid_OnPointerReleased">
<Image
x:Name="BigImage"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Stretch="Uniform"
Source="http://blog.al.com/space-news/2009/04/iss015e22574.jpg" />
<local:Magnifier VerticalAlignment="Top" HorizontalAlignment="Left" x:Name="MagnifierTip" Visibility="Collapsed" />
</Grid>
</Page>
MainPage.xaml.cs
using System;
using System.Diagnostics;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Imaging;
namespace App78
{
public sealed partial class MainPage : Page
{
private double zoomScale = 2;
private double pointerX = 0;
private double pointerY = 0;
private const double MinZoomScale = .25;
private const double MaxZoomScale = 32;
public MainPage()
{
this.InitializeComponent();
var bi = (BitmapImage)BigImage.Source;
bi.ImageOpened += bi_ImageOpened;
this.SizeChanged += MainPage_SizeChanged;
}
void MainPage_SizeChanged(object sender, Windows.UI.Xaml.SizeChangedEventArgs e)
{
this.UpdateImageLayout();
}
void bi_ImageOpened(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
this.UpdateImageLayout();
}
private void UpdateImageLayout()
{
var bi = (BitmapImage)BigImage.Source;
if (bi.PixelWidth < this.LayoutGrid.ActualWidth &&
bi.PixelHeight < this.LayoutGrid.ActualHeight)
{
this.BigImage.Stretch = Stretch.None;
}
else
{
this.BigImage.Stretch = Stretch.Uniform;
}
this.UpdateMagnifier();
}
private void LayoutGrid_OnPointerMoved(object sender, PointerRoutedEventArgs e)
{
//DV: If pointer is not in contact we can ignore it
if (!e.Pointer.IsInContact) { return; }
var point = e.GetCurrentPoint(this.LayoutGrid);
this.pointerX = point.Position.X;
this.pointerY = point.Position.Y;
this.UpdateMagnifier();
}
private void UpdateMagnifier()
{
var bi = (BitmapImage)BigImage.Source;
double offsetX = 0;
double offsetY = 0;
double imageScale = 1;
var imageRatio = (double)bi.PixelWidth / bi.PixelHeight;
var gridRatio = this.LayoutGrid.ActualWidth / this.LayoutGrid.ActualHeight;
if (bi.PixelWidth < this.LayoutGrid.ActualWidth &&
bi.PixelHeight < this.LayoutGrid.ActualHeight)
{
offsetX = 0.5 * (this.LayoutGrid.ActualWidth - bi.PixelWidth);
offsetY = 0.5 * (this.LayoutGrid.ActualHeight - bi.PixelHeight);
//imageScale = 1; - remains
}
else if (imageRatio < gridRatio)
{
offsetX = 0.5 * (this.LayoutGrid.ActualWidth - imageRatio * this.LayoutGrid.ActualHeight);
offsetY = 0;
imageScale = BigImage.ActualHeight / bi.PixelHeight;
}
else
{
offsetX = 0;
offsetY = 0.5 * (this.LayoutGrid.ActualHeight - this.LayoutGrid.ActualWidth / imageRatio);
imageScale = BigImage.ActualWidth / bi.PixelWidth;
}
//DV: This is probably not need anymore
//MagnifierTip.MagnifierTransform.X = this.pointerX;
//MagnifierTip.MagnifierTransform.Y = this.pointerY;
MagnifierTip.PositionTransform.X = (-this.pointerX + offsetX) / imageScale;
MagnifierTip.PositionTransform.Y = (-this.pointerY + offsetY) / imageScale;
//DV: I haven't tested the Scaling/Zoom
MagnifierTip.ZoomTransform.ScaleX = imageScale * zoomScale;
MagnifierTip.ZoomTransform.ScaleY = imageScale * zoomScale;
MagnifierTip.CenterTransform.X = MagnifierTip.MagnifierEllipse.ActualWidth / 2 - MagnifierTip.MagnifierEllipse.StrokeThickness / 2;
MagnifierTip.CenterTransform.Y = MagnifierTip.MagnifierEllipse.ActualHeight / 2 - MagnifierTip.MagnifierEllipse.StrokeThickness / 2;
//DV: I added a GlobalGrid Transform which translates every children
MagnifierTip.MagnifierTransformGrid.X = this.pointerX - (MagnifierTip.ActualWidth / 2);
MagnifierTip.MagnifierTransformGrid.Y = this.pointerY - (MagnifierTip.ActualHeight); ;
}
private void LayoutGrid_OnPointerWheelChanged(object sender, PointerRoutedEventArgs e)
{
if (e.GetCurrentPoint(this.LayoutGrid).Properties.MouseWheelDelta > 0)
{
zoomScale = Math.Max(MinZoomScale, Math.Min(MaxZoomScale, zoomScale * 1.2));
}
else
{
zoomScale = Math.Max(MinZoomScale, Math.Min(MaxZoomScale, zoomScale / 1.2));
}
this.UpdateMagnifier();
}
//DV: Holding usually only works with touch https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.uielement.holding.aspx?f=255&MSPPError=-2147217396
private void LayoutGrid_Holding(object sender, HoldingRoutedEventArgs e)
{
//
}
//DV: pointer pressed supports both mouse and touch but fires immeadiatley. You'll have to figure out a delay strategy or using holding for touch and right click for mouse
private void LayoutGrid_OnPointerPressed(object sender, PointerRoutedEventArgs e)
{
MagnifierTip.Visibility = Windows.UI.Xaml.Visibility.Visible;
}
//DV: pointer released supports both mouse and touch.
private void LayoutGrid_OnPointerReleased(object sender, PointerRoutedEventArgs e)
{
MagnifierTip.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
}
}
}
Magnifier.xaml
<UserControl
x:Class="App78.Magnifier"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App78"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Height="230"
Width="170">
<Grid Height="230" Width="170">
<!-- DV: This is the global transform I added -->
<Grid.RenderTransform>
<TransformGroup>
<TranslateTransform x:Name="MagnifierTransformGrid" x:FieldModifier="public"/>
</TransformGroup>
</Grid.RenderTransform>
<Ellipse Opacity="1" Visibility="Visible" Fill="{ThemeResource ApplicationPageBackgroundThemeBrush}" HorizontalAlignment="Center" VerticalAlignment="Top" IsHitTestVisible="False" Width="135" Height="128" StrokeThickness="3" Margin="0,17,0,0" />
<Ellipse x:Name="MagnifierEllipse" x:FieldModifier="public" Opacity="1" Visibility="Visible" HorizontalAlignment="Left" VerticalAlignment="Top" IsHitTestVisible="False" Width="150" Height="150" Stroke="White" StrokeThickness="3" Margin="11,8,0,0" >
<Ellipse.Fill>
<ImageBrush
ImageSource="http://blog.al.com/space-news/2009/04/iss015e22574.jpg"
Stretch="None"
AlignmentX="Left"
AlignmentY="Top">
<ImageBrush.Transform>
<TransformGroup>
<TranslateTransform x:FieldModifier="public"
x:Name="CenterTransform"/>
<TranslateTransform x:FieldModifier="public"
x:Name="PositionTransform"/>
<ScaleTransform x:FieldModifier="public"
x:Name="ZoomTransform"/>
</TransformGroup>
</ImageBrush.Transform>
</ImageBrush>
</Ellipse.Fill>
</Ellipse>
<Path Data="M25.533,0C15.457,0,7.262,8.199,7.262,18.271c0,9.461,13.676,19.698,17.63,32.338 c0.085,0.273,0.34,0.459,0.626,0.457c0.287-0.004,0.538-0.192,0.619-0.467c3.836-12.951,17.666-22.856,17.667-32.33 C43.803,8.199,35.607,0,25.533,0z M25.533,32.131c-7.9,0-14.328-6.429-14.328-14.328c0-7.9,6.428-14.328,14.328-14.328 c7.898,0,14.327,6.428,14.327,14.328C39.86,25.702,33.431,32.131,25.533,32.131z"
Fill="#FFF4F4F5"
Stretch="Fill"
Stroke="Black"
UseLayoutRounding="False"
Height="227"
Width="171" ></Path>
</Grid>
</UserControl>

Setting an XAML Window always on top (but no TopMost property)

I am developing an application based on OptiTrack SDK (from NaturalPoint). I need to run the application window as "Always on Top". The window is designed in XAML and is controled in the class "CameraView" but it does not seem to include a "TopMost" property or equivalent. Attached are the code of "CameraView.xaml.cs" and the code of "CameraView.xaml" that are part of OptiTrack SDK (NaturalPoint) called "Single_Camera_CSharp_.NET_3.0".
One could expect the class CameraView to contain properties or members to set the position of the window on the screen or to set it to TopMost but as far as searched I found nothing. I wonder what I should do.
Thank you,
Brian
================
"CameraView.xaml.cs"
using System;
using System.IO;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Navigation;
using System.Drawing.Imaging;
using System.Drawing.Drawing2D;
using System.Windows.Threading;
namespace TestProject
{
public partial class CameraView
{
private const int NP_OPTION_OBJECT_COLOR_OPTION = 3;
private const int NP_OPTION_VIDEO_TYPE = 48;
private const int NP_OPTION_NUMERIC_DISPLAY_ON = 71;
private const int NP_OPTION_NUMERIC_DISPLAY_OFF = 72;
private const int NP_OPTION_FETCH_RLE = 73;
private const int NP_OPTION_FETCH_GRAYSCALE = 74;
private const int NP_OPTION_FRAME_DECIMATION = 52;
private const int NP_OPTION_INTENSITY = 50;
private const int NP_OPTION_SEND_EMPTY_FRAMES = 41;
private const int NP_OPTION_THRESHOLD = 5;
private const int NP_OPTION_EXPOSURE = 46;
private const int NP_OPTION_SEND_FRAME_MASK = 73;
private const int NP_OPTION_TEXT_OVERLAY_OPTION = 74;
// public delegate void OnCameraViewCreate(CameraView camera);
// public static OnCameraViewCreate onCameraViewCreate;
private System.Drawing.Bitmap raw = new System.Drawing.Bitmap(353, 288, System.Drawing.Imaging.PixelFormat.Format32bppArgb);
private int mFrameCounter;
private int mDisplayCounter;
private DispatcherTimer timer1 = new DispatcherTimer();
private bool mVideoFrameAvailable = false;
private int mNumeric = -1;
private bool mGreyscale = false;
private bool mOverlay = true;
public CameraView()
{
this.InitializeComponent();
timer1.Interval = new TimeSpan(0, 0, 0, 0, 10);
timer1.Tick += new EventHandler(timer1_Tick);
}
public int Numeric
{
get { return mNumeric; }
set
{
mNumeric = value % 100;
if (mNumeric >= 0)
{
if (Camera != null)
Camera.SetOption(NP_OPTION_NUMERIC_DISPLAY_ON, value % 100);
}
}
}
private bool CameraRunning = false;
private OptiTrack.NPCamera mCamera;
public OptiTrack.NPCamera Camera
{
get { return mCamera; }
set
{
if (mCamera == value) return; //== Don't do anything if you're assigning the same camera ==
if (mCamera != null)
{
//== Shut the selected camera down ==<<
if (CameraRunning)
{
CameraRunning = false;
mCamera.Stop();
mCamera.FrameAvailable -= FrameAvailable;
}
}
mCamera = value;
if (mCamera == null)
{
mNumeric = -1;
}
else
{
serialLabel.Content = "Camera "+mCamera.SerialNumber.ToString(); //mNumeric.ToString();
}
}
}
private void FrameAvailable(OptiTrack.NPCamera Camera)
{
mFrameCounter++;
try
{
OptiTrack.NPCameraFrame frame = Camera.GetFrame(0);
int id = frame.Id;
if (CameraRunning)
{
GetFrameData(Camera, frame);
}
frame.Free();
}
catch (Exception)
{
int r = 0;
r++;
}
}
private void GetFrameData(OptiTrack.NPCamera camera, OptiTrack.NPCameraFrame frame)
{
BitmapData bmData = raw.LockBits(new System.Drawing.Rectangle(0, 0, raw.Width, raw.Height),
ImageLockMode.ReadWrite, System.Drawing.Imaging.PixelFormat.Format32bppArgb);
int stride = bmData.Stride;
System.IntPtr bufferPtr = bmData.Scan0;
unsafe
{
byte* buffer = (byte*)(void*)bufferPtr;
camera.GetFrameImage(frame, bmData.Width, bmData.Height, bmData.Stride, 32, ref buffer[0]);
}
raw.UnlockBits(bmData);
mVideoFrameAvailable = true;
}
private void timer1_Tick(object sender, EventArgs e)
{
if (CameraRunning && mVideoFrameAvailable)
{
mVideoFrameAvailable = false;
cameraImage.Source = Img(raw);
mDisplayCounter++;
}
}
private System.Windows.Media.ImageSource Img(System.Drawing.Bitmap img)
{
System.Drawing.Imaging.BitmapData bmData = img.LockBits(new System.Drawing.Rectangle(0, 0, img.Width, img.Height),
System.Drawing.Imaging.ImageLockMode.ReadWrite, System.Drawing.Imaging.PixelFormat.Format32bppPArgb);
System.Windows.Media.Imaging.BitmapSource bitmap = System.Windows.Media.Imaging.BitmapSource.Create(
img.Width, img.Height, 96, 96, PixelFormats.Bgra32,
System.Windows.Media.Imaging.BitmapPalettes.WebPalette,
bmData.Scan0, bmData.Stride * bmData.Height, bmData.Stride);
img.UnlockBits(bmData);
return bitmap;
}
private void startStopButton_Click(object sender, RoutedEventArgs e)
{
if (CameraRunning)
StopCamera();
else
StartCamera();
}
public void StartCamera()
{
if (Camera != null)
{
mFrameCounter = 0;
mDisplayCounter = 0;
Camera.FrameAvailable += FrameAvailable;
Camera.SetOption(NP_OPTION_VIDEO_TYPE, 0);
Camera.SetOption(NP_OPTION_FRAME_DECIMATION, 1);
Camera.SetOption(NP_OPTION_INTENSITY, 0);
Camera.SetOption(NP_OPTION_EXPOSURE, 10);
Camera.SetOption(NP_OPTION_THRESHOLD, 50);
Camera.SetOption(NP_OPTION_OBJECT_COLOR_OPTION, 0);
SetOverlayOption();
SetGreyscaleOption();
timer1.Start();
Camera.Start();
CameraRunning = true;
this.Numeric = mNumeric;
startStopButton.Content = "Stop Camera";
}
}
private void SetGreyscaleOption()
{
if(mGreyscale)
Camera.SetOption(NP_OPTION_VIDEO_TYPE, 1);
else
Camera.SetOption(NP_OPTION_VIDEO_TYPE, 0);
}
private void SetOverlayOption()
{
if(mOverlay)
Camera.SetOption(NP_OPTION_TEXT_OVERLAY_OPTION, 255);
else
Camera.SetOption(NP_OPTION_TEXT_OVERLAY_OPTION, 0);
}
public void StopCamera()
{
if (Camera != null)
{
Camera.Stop();
timer1.Stop();
CameraRunning = false;
Camera.FrameAvailable -= FrameAvailable;
Camera.SetOption(NP_OPTION_NUMERIC_DISPLAY_OFF, 0);
startStopButton.Content = "Start Camera";
}
}
private void greyscaleButton_Click(object sender, RoutedEventArgs e)
{
if(mGreyscale)
mGreyscale = false;
else
mGreyscale = true;
SetGreyscaleOption();
}
private void OverlayButton_Click(object sender, RoutedEventArgs e)
{
if(mOverlay)
mOverlay = false;
else
mOverlay = true;
SetOverlayOption();
}
private void exposureSlider_ValueChanged(object sender, RoutedEventArgs e)
{
if (mCamera!=null)
{
mCamera.SetOption(NP_OPTION_EXPOSURE, (int) this.exposureSlider.Value);
}
}
private void thresholdSlider_ValueChanged(object sender, RoutedEventArgs e)
{
if (mCamera != null)
{
mCamera.SetOption(NP_OPTION_THRESHOLD, (int)this.thresholdSlider.Value);
}
}
private void optionsButton_Click(object sender, RoutedEventArgs e)
{
if (!propertyPanel.IsVisible)
propertyPanel.Visibility = Visibility.Visible;
else
propertyPanel.Visibility = Visibility.Collapsed;
}
}
}
================
"CameraView.xaml"
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="TestProject.CameraView"
x:Name="CameraView1"
Width="Auto" Height="Auto"
xmlns:d="http://schemas.microsoft.com/expression/blend/2006"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
>
<Grid x:Name="LayoutRoot" Width="Auto" Height="Auto">
<Grid.Background>
<x:Null/>
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="113.904"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="26.667"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Margin="0,0,0,0" Grid.ColumnSpan="2">
<Rectangle RadiusX="1.25" RadiusY="1.25" Margin="0,0,0,0" VerticalAlignment="Stretch">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.492,0.149" StartPoint="0.492,0.843">
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#FF23283F" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.Stroke>
<LinearGradientBrush EndPoint="0.291,-4.231" StartPoint="1.668,18.025">
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<Rectangle RadiusX="3.333" RadiusY="3.333" Opacity="0.13" Margin="0,0,0,13">
<Rectangle.Fill>
<SolidColorBrush Color="#FFFFFFFF"/>
</Rectangle.Fill>
<Rectangle.Stroke>
<x:Null/>
</Rectangle.Stroke>
</Rectangle>
</Grid>
<Image Margin="0,0,0,0" x:Name="cameraImage" Grid.ColumnSpan="2" Grid.Row="1"/>
<Label x:Name="serialLabel" FontSize="10" FontWeight="Bold" Foreground="#FFDEDADA" Content="Camera 10024" HorizontalAlignment="Right" Margin="0,0,4,0" VerticalAlignment="Top" Grid.Column="1">
<Label.BitmapEffect>
<OuterGlowBitmapEffect GlowColor="#FF000000" GlowSize="4" Opacity="0.7"/>
</Label.BitmapEffect>
</Label>
<WrapPanel Margin="3,3,3,3">
<Button HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="startStopButton" Width="100" Height="Auto" BorderThickness="0,0,0,0" Content="Start Camera" Click="startStopButton_Click"/>
<Button x:Name="optionsButton" Width="61.474" Height="Auto" BorderThickness="0,0,0,0" Content="Options" Click="optionsButton_Click"/>
</WrapPanel>
<Grid Visibility="Visible" d:LayoutOverrides="HorizontalAlignment, VerticalAlignment" HorizontalAlignment="Right" Margin="0,0,16,16" x:Name="propertyPanel" VerticalAlignment="Bottom" Width="169.237" Height="81.455" Grid.ColumnSpan="2" Grid.Row="1">
<Rectangle Stroke="#FFFFFFFF" StrokeThickness="3" Margin="0,0,0,0">
<Rectangle.BitmapEffect>
<DropShadowBitmapEffect/>
</Rectangle.BitmapEffect>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FF1E212F" Offset="0"/>
<GradientStop Color="#FF313551" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Slider HorizontalAlignment="Stretch" Margin="62.633,5,4.681,0" x:Name="exposureSlider" VerticalAlignment="Top" Width="Auto" Height="Auto" Orientation="Horizontal" Maximum="255" ValueChanged="exposureSlider_ValueChanged"/>
<Label x:Name="serialLabel_Copy" FontSize="10" FontWeight="Bold" Foreground="#FFDEDADA" Content="Exposure" HorizontalAlignment="Left" Margin="3.853,3.853,0,0" VerticalAlignment="Top" Width="57.352">
<Label.BitmapEffect>
<OuterGlowBitmapEffect GlowColor="#FF000000" GlowSize="4" Opacity="0.7"/>
</Label.BitmapEffect>
</Label>
<Label x:Name="serialLabel_Copy1" FontSize="10" FontWeight="Bold" Foreground="#FFDEDADA" Content="Threshold" d:LayoutOverrides="Height" HorizontalAlignment="Left" Margin="3.853,27.691,0,0" VerticalAlignment="Top" Width="59.829">
<Label.BitmapEffect>
<OuterGlowBitmapEffect GlowColor="#FF000000" GlowSize="4" Opacity="0.7"/>
</Label.BitmapEffect>
</Label>
<Slider x:Name="thresholdSlider" Width="Auto" Orientation="Horizontal" Maximum="253" d:LayoutOverrides="Height, Margin" Margin="62.633,27.691,4.681,0" VerticalAlignment="Top" Minimum="54" Value="54" ValueChanged="thresholdSlider_ValueChanged"/>
<Button x:Name="greyScaleButton" Width="75.333" Content="Greyscale" Click="greyscaleButton_Click" HorizontalAlignment="Left" Height="21" d:LayoutOverrides="Height" Margin="8,53.761,0,0" VerticalAlignment="Top"/>
<Button x:Name="Overlay" Height="21" Content="Overlay" Click="OverlayButton_Click" d:LayoutOverrides="Height" HorizontalAlignment="Right" Margin="0,53.761,8,0" VerticalAlignment="Top" Width="64"/>
</Grid>
</Grid>
</UserControl>

The Topmost property exists on the Window class: http://msdn.microsoft.com/en-us/library/system.windows.window.topmost.aspx.
Your CameraView class is derived from UserControl, which is a kind of control that sits inside a Window (or other container such as a Page, but that's not important here). UserControl doesn't have a Topmost property because it doesn't appear independently on the desktop.
Host your CameraView in a Window and set the Window.Topmost:
<!-- MyWindow.xaml -->
<Window ...
xmlns:local="clr-namespace:TestProject"
Topmost="True">
<local:CameraView />
</Window>
where the ellipses represent the default gunk like x:Class and WPF xmlns declarations that Visual Studio creates for you.

In the UserControl code behind, you can get a reference to the window that is hosting it, then set the Topmost property. Example,
Window parent = Window.GetWindow(this);
parent.Topmost = true;

This is UserControl. You can set TopMost property for Windows only