Develop Reference

Cover an image with black and reveal parts of the image using mouse

So I am creating a "Map Viewer" for a program I am working on. Basically I want to display a map and have it resize the image to fit in the grid. For this I am using Viewbox to hold the image and resize it. I was attempting to use this code to reveal the map but it does not center the circle on the mouse and it does not retain the revealed portions of the map (it ONLY reveals where the mouse is and not where it has been).
Here is the XAML:
<Viewbox x:Name="MapHolder" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="1" Grid.RowSpan="7" Margin="25,5,25,15">
<Image x:Name="SelectedMap" Source="/wizard_dungeon.jpg" Stretch="Uniform" MouseMove="SelectedMap_MouseMove" >
<Image.OpacityMask>
<VisualBrush Stretch="None" >
<VisualBrush.Visual>
<Ellipse Width="400" Height="400" StrokeThickness="1" Fill="Black"/>
</VisualBrush.Visual>
<VisualBrush.RelativeTransform>
<TransformGroup>
<TranslateTransform x:Name="OpacityFilterTransform" X="1" Y="1"/>
</TransformGroup>
</VisualBrush.RelativeTransform>
</VisualBrush>
</Image.OpacityMask>
</Image>
</Viewbox>
And the code-behind:
private void SelectedMap_MouseMove(object sender, MouseEventArgs e)
{
var position = e.GetPosition(this);
var height = MapHolder.ActualHeight;
var width = MapHolder.ActualWidth;
// with the position values, interpolate a TranslateTransform for the opacity mask
var transX = position.X / width;
var transY = position.Y / height;
OpacityFilterTransform.X = transX - 0.5;
OpacityFilterTransform.Y = transY - 0.5;
}
I want there to basically be a Image under a Black screen and I can erase the black screen to reveal the image in the areas I have erased.

Rectangle is not being drawn

I am trying to make a drawing program in WPF but I ran into some problems.
I can succesfully draw lines (yeeey) but I also want the ability to fill out space (my method is stacking alot of recntagles with the same starting point).
but when I switch my radiobutton from "line" to "fill" it doesnt draw anything.
-- drawing (boolean) is used to create the starting point of filling
Code
private void cnvs_MouseMove(object sender, MouseEventArgs e)
{
if (e.LeftButton == MouseButtonState.Pressed && linemode.IsChecked == true)
{
Line line = new Line();
drawing = true;
line.Stroke = currentbrush;
line.X1 = currentPoint.X - 9;
line.Y1 = currentPoint.Y - 9;
line.X2 = e.GetPosition(this).X - 9;
line.Y2 = e.GetPosition(this).Y - 9;
currentPoint = e.GetPosition(this);
cnvs.Children.Add(line);
} else if (cnvs.IsFocused == true)
{
if (!drawing) rectbeggining = e.GetPosition(this);
drawing = true;
Rectangle rect = new Rectangle();
rect.Stroke = currentbrush;
rect.StrokeThickness = 1;
rect.Height = (Math.Abs(e.GetPosition(this).Y) - Math.Abs(rectbeggining.Y));
rect.Width = (rectbeggining.X - e.GetPosition(this).X);
Canvas.SetLeft(rect, e.GetPosition(this).X);
Canvas.SetTop(rect, Math.Abs(e.GetPosition(this).Y));
cnvs.Children.Add(rect);
}
if(e.LeftButton == MouseButtonState.Released) drawing = false;
}
Xaml
<Grid>
<Border Name="CanvasBorder" BorderBrush="Black" BorderThickness="2" Margin="8,8,207,9"/>
<Canvas HorizontalAlignment="Left" Height="972" Margin="10,10,0,0" VerticalAlignment="Top" Width="1493" MouseDown="Canvas_MouseDown" MouseMove="cnvs_MouseMove" Name="cnvs">
<Canvas.Background>
<SolidColorBrush Color="White" Opacity="0"/>
</Canvas.Background>
</Canvas>
<ComboBox Name="selectcolor" Margin="1510,10,10,945" SelectedItem="Black" SelectionChanged="selectcolor_SelectionChanged" SelectedIndex="7">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Rectangle Fill="{Binding Name}" Width="16" Height="16" Margin="0,2,5,2" />
<TextBlock Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<Button Content="Reset" HorizontalAlignment="Left" Margin="1510,939,0,0" VerticalAlignment="Top" Width="192" Click="Button_Click" Height="44"/>
<RadioButton GroupName="selectedMode" Name="linemode" Content="Line" HorizontalAlignment="Left" Margin="1510,232,0,0" VerticalAlignment="Top" IsChecked="True"/>
<RadioButton GroupName="selectedMode" Name="fillmode" Content="Fill" HorizontalAlignment="Left" Margin="1510,247,0,0" VerticalAlignment="Top"/>
<Label Content="Mode:" HorizontalAlignment="Left" Margin="1510,206,0,0" VerticalAlignment="Top"/>
</Grid>

I'm working on the map editor for generalstaff at the moment. You pick between line or area types of terrain, draw and when you finish a stroke it's processed.
Unless I've misunderstood your purpose that sounds pretty much like you're doing.
I essentially have an inkcanvas on top of a canvas.
It's rather more complicated than that. I bind viewmodels to an itemscontrol which has a canvas as it's itemspresenter and template data into the pieces of terrain.
I can bore at length on this stuff.
I use inkcanvas because it gives you smoother results than drawing directly on a canvas. I started off using a canvas like that but you get jiggly bits..
The strokeschanged event is used to tell when a stroke on the inkcanvas has finished.
Each stroke has a styluspointcollection StylusPoints and you can iterate through that to get the points.
Once you have the points, you can build a polygon.
I do that by templating and I bind the Points property of a Polygon to a Pointcollection from a viewmodel.
A polygon has a Fill property which you can set or bind to a solidcolorbrush.
And in that way you can draw any shape you like, then fill it with one colour.

How to apply Render Transform to mouse position

I'm making a ploting application. Because I want same behaviour as math plots I apply following transformation to canvas with data points:
<UserControl.Resources>
<TransformGroup x:Key="CanvasTransform">
<TranslateTransform X="30" Y="30"/>
<ScaleTransform ScaleX="1" ScaleY="-1" CenterX=".5" CenterY=".5" />
</TransformGroup>
</UserControl.Resources>
Here is the transformation used:
<ListBox>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<Canvas>
<Canvas.RenderTransformOrigin>
<Point X="0.5" Y="0.5"/>
</Canvas.RenderTransformOrigin>
<Canvas.RenderTransform>
<Binding Source="{StaticResource CanvasTransform}"/>
</Canvas.RenderTransform>
</Canvas>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
So far so good. The problem is with adding points to plot. Because the mouse click event is returning position in window coordinates it's no use. The point is added at wrong location, because it's transformed after adding.
e.g. Canvas is 400 units high. I click in top left corner mouse location is [X=10, Y=10] this point is added to the plot and rendered. The render transform then use the [10,10] point and calculates it's new position: [X=40,Y=360] (window coordinates).
It means that I click in top corner and the point appears in bottom corner. Which is in fact correct behavior.
My question is, how to apply the render transform manually before storing the point, so the point will appear under mouse.
So far I have tried following:
var trans = Resources["CanvasTransform"] as TransformGroup;
var mouse = e.GetPosition(this); // mouse position relative to canvas
var newPoint = trans.Transform(mouse);
But after this transformation newPoint has following coordinates [40,-39]. Again I know why is the result as it is. The origin of the transform is [0,0] and the translation is 29 probably due to rounding error.
Now I can take this new point and manualy change the values - subtract 30 from X coord and then add Canvas.ActualHeight to Y coordinate, which will fix the position.
But then what's the point?
My question is: is it possible to apply the RenderTransform in same fashion as the rendere is doing it, to avoid fiddling with coordinates manualy?

CenterX=".5" CenterY=".5" in ScaleTransform is unnecessary. All it does is adds a tiny translate transform (half-pixel).
To get source position from transformed position, you need to use inverse transformation (Inverse property of Transform). This is where X-30 error comes from.
To change transformation origin, you need to, first, subtract half canvas size, then transform, then add half canvas size.
var origin = new Point(lstItems.ActualWidth / 2, lstItems.ActualHeight / 2);
var transform = ((TransformGroup)Resources["CanvasTransform"]).Clone();
transform.Children.Insert(0, new TranslateTransform(-origin.X, -origin.Y));
transform.Children.Add(new TranslateTransform(origin.X, origin.Y));
_transform = transform.Inverse;
Complete sample:
MainWindow.xaml
<Window x:Class="So21501609WpfMouseRenderTransform.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" SizeToContent="WidthAndHeight">
<Control.Resources>
<TransformGroup x:Key="CanvasTransform">
<TranslateTransform X="30" Y="30"/>
<ScaleTransform ScaleX="1" ScaleY="-1" CenterX=".5" CenterY=".5"/>
</TransformGroup>
<Style TargetType="TextBlock">
<Setter Property="Background" Value="SkyBlue"/>
</Style>
</Control.Resources>
<ItemsControl x:Name="lstItems" MouseDown="LstItems_OnMouseDown" Width="400" Height="400" Background="Transparent">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas>
<Canvas.RenderTransformOrigin>
<Point X="0.5" Y="0.5"/>
</Canvas.RenderTransformOrigin>
<Canvas.RenderTransform>
<Binding Source="{StaticResource CanvasTransform}"/>
</Canvas.RenderTransform>
</Canvas>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Items>
<TextBlock Canvas.Left="10" Canvas.Top="10" Text="10 10"/>
<TextBlock Canvas.Left="10" Canvas.Top="300" Text="10 300"/>
<TextBlock Canvas.Left="300" Canvas.Top="300" Text="300 300"/>
<TextBlock Canvas.Left="300" Canvas.Top="10" Text="300 10"/>
</ItemsControl.Items>
</ItemsControl>
</Window>
MainWindow.xaml.cs
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
namespace So21501609WpfMouseRenderTransform
{
public partial class MainWindow
{
private GeneralTransform _transform;
public MainWindow ()
{
InitializeComponent();
Loaded += OnLoaded;
}
private void OnLoaded (object sender, RoutedEventArgs routedEventArgs)
{
var origin = new Point(lstItems.ActualWidth / 2, lstItems.ActualHeight / 2);
var transform = ((TransformGroup)Resources["CanvasTransform"]).Clone();
transform.Children.Insert(0, new TranslateTransform(-origin.X, -origin.Y));
transform.Children.Add(new TranslateTransform(origin.X, origin.Y));
_transform = transform.Inverse;
}
private void LstItems_OnMouseDown (object sender, MouseButtonEventArgs e)
{
Point pos = _transform.Transform(e.GetPosition(lstItems));
var item = new TextBlock { Text = pos.ToString() };
Canvas.SetLeft(item, pos.X);
Canvas.SetTop(item, pos.Y);
lstItems.Items.Add(item);
}
}
}

Select Item in Wrappanel or list based on X and Y cordinates

I have a wrap panel with images in it. I am using a pointing device and can get X and Y coordinates on screen. I would like to use the X and Y coordinates to select a particular item in the WrapPanel or List.
<WrapPanel HorizontalAlignment="Center" VerticalAlignment="Top" Grid.Row="1" Name="ImageWrap">
<ContentControl Style="{StaticResource imageContainerStyle}">
<Image Stretch="Uniform" Source="/Images/Texture01.jpg" />
</ContentControl>
<ContentControl Style="{StaticResource imageContainerStyle}">
<Image Stretch="Uniform" Source="/Images/Texture02.jpg" />
</ContentControl>
<ContentControl Style="{StaticResource imageContainerStyle}">
<Image Stretch="Uniform" Source="/Images/Texture03.jpg" />
</ContentControl>
</WrapPanel>
C# code which I am trying to use. But isn't working
Point mousePosition = new Point(xPosition, yPosition);
Point localPoint = this.ImageWrap.PointToScreen(mousePosition);
Please provide me with suggestions.

You may use the panel's InputHitTest method. It will return the element at the given position (in coordinates relative to the panel), or null, as long as you don't set the panel's Background property.
Point screenPosition = new Point(xPosition, yPosition);
Point panelPosition = ImageWrap.PointFromScreen(screenPosition); // not PointToScreen
IInputElement element = ImageWrap.InputHitTest(panelPosition);
if (element is Image)
{
...
}

How to rotate an image within a StackPanel or Grid in Silverlight

I have an image control sits inside a Grid control. I already have a button to enable zoom-in to this image. After zoom-in, the Horizontal/vertical scroll bars are displayed. And then I rotate the image contained grid, the image and the grid scroll bar are messed up. How should I incorporate both zoom-in and rotate for the image control? The following are the code that I am using in my project.
The image control zoom-in code I used (x is the image control):
if ((x as Image) != null) { x.Height = x.Height * 1.3; x.Width = x.Width * 1.3; }
The rotation code I used (x is the image control):
if ((x as Image) != null)
{
RotateTransform rotate = new RotateTransform(); rotate.Angle = rotateAngle;
rotate.CenterX = x.Width / 2;
rotate.CenterY = x.Height / 2;
x.RenderTransform = rotate;
};
The XAML is:
<ScrollViewer x:Name="scrollViewer" Height="480" Width="615"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto">
<ScrollViewer.Content>
<Grid x:Name="ImageGrid">
<StackPanel x:Name="ImageStackPanel">
<Image Source="..." VerticalAlignment="Center" Width="220" Height="170" ></Image>
</StackPanel>
</Grid>
</ScrollViewer.Content>
</ScrollViewer>
Does anybody have any existing code snippet that I can borrow to resolve this trick?

I think you need to use TransformGroup to use more than one transform at the time:
ScaleTransform myScaleTransform = new ScaleTransform();
myScaleTransform.ScaleY = 3;
RotateTransform myRotateTransform = new RotateTransform();
myRotateTransform.Angle = 45;
// Create a TransformGroup to contain the transforms
// and add the transforms to it.
TransformGroup myTransformGroup = new TransformGroup();
myTransformGroup.Children.Add(myScaleTransform);
myTransformGroup.Children.Add(myRotateTransform);
// Associate the transforms to the image.
x.RenderTransform = myTransformGroup;

This may work for your needs:
<Image x:Name="image" Source="myImageSource" Stretch="Uniform"
HorizontalAlignment="Center" VerticalAlignment="Center"
RenderTransformOrigin="0.5, 0.5">
<Image.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="Rotate"/>
<ScaleTransform x:Name="Scale" />
</TransformGroup>
</Image.RenderTransform>
</Image>
code behind:
Rotate.Angle = 45;
Scale = 0.25;

You may be missing the LayoutTransformer from the Silverlight Toolkit, and the AnimationMediator from one of the Toolkit developers.
With the LayoutTransformer you can set its content to anything, not just images, and apply any transformation with it, and as opposed to the usual RenderTransform, it will affect layout and actual sizes.
I have a similar scenario and I use it like this:
<Grid>
<fs:AnimationMediator x:Name="RotateMediator" LayoutTransformer="{Binding ElementName=LayoutTransformer}" AnimationValue="{Binding Angle, ElementName=RotateTransform, Mode=TwoWay}" />
<fs:AnimationMediator x:Name="ScaleXMediator" LayoutTransformer="{Binding ElementName=LayoutTransformer}" AnimationValue="{Binding ScaleX, ElementName=ScaleTransform, Mode=TwoWay}" />
<fs:AnimationMediator x:Name="ScaleYMediator" LayoutTransformer="{Binding ElementName=LayoutTransformer}" AnimationValue="{Binding ScaleY, ElementName=ScaleTransform, Mode=TwoWay}" />
<tkt:LayoutTransformer x:Name="LayoutTransformer" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<tkt:LayoutTransformer.LayoutTransform>
<TransformGroup>
<RotateTransform x:Name="RotateTransform" />
<ScaleTransform x:Name="ScaleTransform" />
</TransformGroup>
</tkt:LayoutTransformer.LayoutTransform>
<Image x:Name="MyImage" Source="mysource.png" Width="600" Height="800" />
</tkt:LayoutTransformer>
</Grid>
Because of the lack of MultiBinding you'd probably additionally have to manually handle the input value (from Slider controls etc) changed events and then set the AnimationValues of RotateMediator etc accordingly.