I really want to create my own map control in WPF because the only one that would be suitable for my requirements would be the Google Maps JavaScript API because it can do almost anything I need but that is only for web and mobile and I have tried the Bing and ESRI maps but they can't do what I want.
I have started a little experiment project to see if I can load the tiles when zooming and it kind of works, here is the code:
<ScrollViewer Margin="10" PanningMode="Both" HorizontalScrollBarVisibility="Visible">
<Canvas x:Name="lyrTiles" Height="3000" Width="3000"/>
</ScrollViewer>
<Grid x:Name="lyrControl" Margin="10">
<Button x:Name="moveUp" Content="U" HorizontalAlignment="Left" Margin="35,10,0,0" VerticalAlignment="Top" Width="20" Height="20"/>
<Button x:Name="moveRight" Content="R" HorizontalAlignment="Left" Margin="55,30,0,0" VerticalAlignment="Top" Width="20" Height="20"/>
<Button x:Name="moveDown" Content="D" HorizontalAlignment="Left" Margin="35,50,0,0" VerticalAlignment="Top" Width="20" Height="20"/>
<Button x:Name="moveLeft" Content="L" HorizontalAlignment="Left" Margin="15,30,0,0" VerticalAlignment="Top" Width="20" Height="20"/>
<Button x:Name="zoomIn" Content="ZI" HorizontalAlignment="Left" Margin="35,81,0,0" VerticalAlignment="Top" Width="20" Height="20"/>
<Button x:Name="zoomOut" Content="ZO" HorizontalAlignment="Left" Margin="35,311,0,0" VerticalAlignment="Top" Width="20" Height="20"/>
<Slider x:Name="zoomSlider" HorizontalAlignment="Left" Margin="35,106,0,0" VerticalAlignment="Top" Orientation="Vertical" Height="200" Width="20" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Interval="1"/>
<Button x:Name="typeHybrid" Content="Hybrid" HorizontalAlignment="Right" Margin="0,10,65,0" VerticalAlignment="Top" Width="50" Height="15" Padding="0,-1,0,0" FontSize="10"/>
<Button x:Name="typeTerrain" Content="Terrain" HorizontalAlignment="Right" Margin="0,10,10,0" VerticalAlignment="Top" Width="50" Height="15" Padding="0,-1,0,0" FontSize="10"/>
<Button x:Name="typeSatellite" Content="Satellite" HorizontalAlignment="Right" Margin="0,10,120,0" VerticalAlignment="Top" Width="50" Height="15" Padding="0,-1,0,0" FontSize="10"/>
<Button x:Name="typeRoad" Content="Road" HorizontalAlignment="Right" Margin="0,10,175,0" VerticalAlignment="Top" Width="50" Height="15" Padding="0,-1,0,0" FontSize="10"/>
<Label x:Name="copyright" Content="Map data ©2014 Google" HorizontalAlignment="Right" VerticalAlignment="Bottom" Padding="0" Width="200" FontSize="10" FontFamily="Calibri" FontWeight="Bold"/>
</Grid>
<Canvas x:Name="lyrActive" Margin="10,10,27,28" MouseWheel="lyrActive_MouseWheel" Background="#00000000"/>
public int zoomLevel = 0;
public int zoomWidth = 2;
public MainWindow()
{
InitializeComponent();
Image i = new Image(); i.Width = 250; i.Height = 250; i.Margin = new Thickness(0, 0, 0, 0);
i.Source = new BitmapImage(new Uri("https://a.tiles.mapbox.com/v3/examples.map-9ijuk24y/0/0/0.png"));
lyrTiles.Children.Add(i);
}
private void lyrActive_MouseWheel(object sender, MouseWheelEventArgs e)
{
if (e.Delta > 0)
{
lyrTiles.Children.Clear();
zoomLevel += 1; zoomWidth = zoomWidth + zoomWidth / 2;
for (int x = 0; x < zoomWidth; x++)
{
for (int y = 0; y < zoomWidth; y++)
{
lyrTiles.Children.Add(new Image()
{
Margin = new Thickness(250 * x, 250 * y, 0, 0),
Source = new BitmapImage(new Uri("https://a.tiles.mapbox.com/v3/examples.map-9ijuk24y/" + zoomLevel + "/" + x + "/" + y + ".png"))
});
}
}
}
}
private void ScrollViewer_MouseWheel(object sender, MouseWheelEventArgs e)
{
if (e.Delta > 0)
{
lyrTiles.Children.Clear();
zoomLevel += 1; zoomWidth = zoomWidth + zoomWidth / 2;
for (int x = 0; x < zoomWidth; x++)
{
for (int y = 0; y < zoomWidth; y++)
{
lyrTiles.Children.Add(new Image()
{
Margin = new Thickness(250 * x, 250 * y, 0, 0),
Source = new BitmapImage(new Uri("https://a.tiles.mapbox.com/v3/examples.map-9ijuk24y/" + zoomLevel + "/" + x + "/" + y + ".png"))
});
}
}
}
}
Is this the correct way I should be rendering the tiles? I know I have to remove ones that are not visible but this is just a very very simple project to see what I can actually do to make a map. How can I start to make this work better?
Also, I think that the biggest and most important thing will be the coordinates because they are used from everything from locating the centre of the map so it can download the correct tiles to placing markers at specific locations. How can I do this, do I need some sort of huge latitude and longitude axis?
Here's a number of projects that might save you some work:
OpenSource:
http://www.codeproject.com/Articles/238551/WPF-Map-App-WPF-meets-Google-Geocoding-Static-Maps
http://xamlmapcontrol.codeplex.com/
http://greatmaps.codeplex.com/
http://wpfsharpmapcontrols.codeplex.com/
Commercial:
http://thinkgeo.com/map-suite-developer-gis/wpf-edition/
http://resources.arcgis.com/en/help/runtime-wpf/concepts/index.html#//017000000031000000
https://www.carmenta.com/en/products/carmenta-engine/overview
http://www.componentsource.com/products/componentart-maps-for-wpf/index-gbp.html
If you don't mind using Bing:
http://msdn.microsoft.com/en-us/library/hh750210.aspx
http://visualstudiomagazine.com/Articles/2012/04/01/Map-Your-Apps.aspx?Page=1
Related
In my project i'm drawing lines on canvas using this code.
List<Line> DrawingLines = new List<Line>();
DrawingLines.Add(new Line() { X1 = X(200), X2 = X(500), Y1 = Y(50), Y2 = Y(50), Stroke = Brushes.Blue });
DrawingLines.Add(new Line() { X1 = X(500), X2 = X(600), Y1 = Y(50), Y2 = Y(100), Stroke = Brushes.Green });
DrawingLines.Add(new Line() { X1 = X(600), X2 = X(200), Y1 = Y(100), Y2 = Y(100), Stroke = Brushes.Red });
DrawingLines.Add(new Line() { X1 = X(200), X2 = X(200), Y1 = Y(100), Y2 = Y(50), Stroke = Brushes.Black });
foreach (Line line in DrawingLines)
{
ph.Children.Add(line);
}
What i want, but i dont know if thats possible is to have a textbox with some informations on point A(x1,y1) and also on point B(x2,y2) for every line i make.
Here is my Xaml code
<StackPanel Background="White" Width="Auto">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Canvas x:Name="ph" Height="449" Width="623" Panel.ZIndex="1" Grid.Row="0">
<Image Height="449" Width="623" Grid.Row="0" x:Name="LogPHImage" MouseLeftButtonDown="MouseLeftButtonDown_Click" MouseMove="LogPHImage_MouseMove" Source="../UserControls/PHgraph.png" HorizontalAlignment="Center" VerticalAlignment="Top"/>
</Canvas>
<Border BorderThickness="1" BorderBrush="LightGray" Grid.Row="1">
<StackPanel Orientation="Horizontal">
<Label Width="70" Content="X Coordinates"/>
<TextBox x:Name="xgrid" Width="70" HorizontalAlignment="Left" Background="DarkGray"/>
<Label Width="80" HorizontalAlignment="Left">Y Coordinates</Label>
<TextBox x:Name="ygrid" Width="70" HorizontalAlignment="Left" Background="DarkGray"/>
<Label Width="80" HorizontalAlignment="Left" Content="Entalpy (kJ/kg)"/>
<TextBox x:Name="entalpy" Width="70" HorizontalAlignment="Left" Background="DarkGray"/>
<Label Width="80" HorizontalAlignment="Left" Content="Pressure bara"/>
<TextBox x:Name="pressure" Width="70" HorizontalAlignment="Left" Background="DarkGray"/>
</StackPanel>
</Border>
</Grid>
</StackPanel>
Hope you guys can help me :)
Thanks
You can add TextBlocks at specific positions in a Canvas by setting the Canvas.Left and Canvas.Top attached properties:
foreach (Line line in DrawingLines)
{
ph.Children.Add(line);
var tb1 = new TextBlock { Text = "A" };
Canvas.SetLeft(tb1, line.X1);
Canvas.SetTop(tb1, line.Y1);
ph.Children.Add(tb1);
var tb2 = new TextBlock { Text = "B" };
Canvas.SetLeft(tb2, line.X2);
Canvas.SetTop(tb2, line.Y2);
ph.Children.Add(tb2);
}
Add arbitrary offsets to X1, Y1, X2, Y2 for a proper alignment.
i tried this Answer and implement it to my code, and here is my code :
XAML
<Window x:Class="DSLayout.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:tk="http://schemas.xceed.com/wpf/xaml/toolkit"
xmlns:local="clr-namespace:DSLayout"
Title="MainWindow" Height="720" Width="1280" ResizeMode="NoResize">
<Window.Resources>
<local:BrushColorConverter x:Key="BrushColorConverter"/>
</Window.Resources>
<Grid>
<Border BorderBrush="Silver" BorderThickness="1" Name="borderHeader" Margin="12,12,12,636" />
<Border BorderBrush="Silver" BorderThickness="1" Name="borderEditor" Margin="12,69,850,12">
<Canvas>
<Border BorderBrush="Silver" BorderThickness="1" Canvas.Left="24" Canvas.Top="20" Height="59" Name="border1" Width="355"></Border>
<Canvas Height="59" Canvas.Left="26" Canvas.Top="20"></Canvas>
<TextBlock Name="textBlock1" Text="Color Palette" Height="31" Width="197" FontSize="22" Canvas.Left="40" Canvas.Top="34" />
<tk:ColorPicker x:Name="ColorPalette" ColorMode="ColorCanvas"
SelectedColor="{Binding ElementName=Layout,
Path=Background,
Converter={StaticResource BrushColorConverter}}"
Canvas.Left="243" Canvas.Top="34" Height="31" />
<Button Grid.Row="1" Content="Add Image" Click="AddButtonClick" Canvas.Left="24" Canvas.Top="100" Height="43" Width="104" />
<Border BorderBrush="Silver" BorderThickness="1" Canvas.Left="24" Canvas.Top="227" Height="350" Name="border3" Width="355">
<Canvas>
<TextBlock Canvas.Left="15" Canvas.Top="27" Height="23" Name="textBlock2" Text="X-Pos " FontSize="16" Width="53" />
<TextBlock Canvas.Left="174" Canvas.Top="27" FontSize="16" Height="23" Name="textBlock3" Text="Y-Pos " Width="53" />
<Label Name="posX" Height="23" Width="83" Canvas.Left="74" Canvas.Top="27" />
<Label Name="posY" Canvas.Left="233" Canvas.Top="27" Height="23" Width="83" />
<TextBlock Canvas.Left="15" Canvas.Top="68" FontSize="16" Height="23" Name="textBlock4" Text="Width" Width="53" />
<TextBlock Canvas.Left="174" Canvas.Top="68" FontSize="16" Height="23" Name="textBlock5" Text="Height" Width="53" />
<Label Name="imgHeight" Canvas.Left="74" Canvas.Top="68" Height="23" Width="83" />
<Label Name="imgWidth" Canvas.Left="233" Canvas.Top="68" Height="23" Width="83" />
<!--<TextBlock Canvas.Left="15" Canvas.Top="169" FontSize="16" Height="23" Name="textBlock4" Text="Height" Width="53" />
<TextBlock Canvas.Left="174" Canvas.Top="169" FontSize="16" Height="23" Name="textBlock5" Text="Width" Width="53" />
<TextBox Canvas.Left="74" Canvas.Top="169" Height="23" Name="textBox3" Width="83" />
<TextBox Canvas.Left="233" Canvas.Top="169" Height="23" Name="textBox4" Width="83" />-->
</Canvas>
</Border>
</Canvas>
</Border>
<Border BorderBrush="Silver" BorderThickness="1" Name="borderLayout" Margin="446,69,12,12">
<Canvas x:Name="Layout" Background="White" AllowDrop="True" ClipToBounds="True"
MouseLeftButtonDown="MouseLeftButtonDown"
MouseLeftButtonUp="MouseLeftButtonUp"
MouseMove="MouseMove">
</Canvas>
</Border>
</Grid>
CS
namespace DSLayout
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
public int imgX { get; set; }
public int imgY { get; set; }
private void AddButtonClick(object sender, RoutedEventArgs e)
{
var dialog = new Microsoft.Win32.OpenFileDialog();
dialog.Filter =
"Image Files (*.jpg; *.png; *.jpeg; *.gif; *.bmp)|*.jpg; *.png; *.jpeg; *.gif; *.bmp";
if ((bool)dialog.ShowDialog())
{
var bitmap = new BitmapImage(new Uri(dialog.FileName));
var image = new Image { Source = bitmap };
this.imgX = bitmap.PixelWidth;
this.imgY = bitmap.PixelWidth;
Canvas.SetLeft(image, 0);
Canvas.SetTop(image, 0);
Layout.Children.Add(image);
imgHeight.Content = bitmap.PixelHeight;
imgWidth.Content = bitmap.PixelWidth;
}
}
private Image draggedImage;
private Point mousePosition;
private void MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
var image = e.Source as Image;
if (image != null && Layout.CaptureMouse())
{
mousePosition = e.GetPosition(Layout);
draggedImage = image;
Panel.SetZIndex(draggedImage, 1);
}
}
private void MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
if (draggedImage != null)
{
Layout.ReleaseMouseCapture();
Panel.SetZIndex(draggedImage, 0);
draggedImage = null;
}
}
private void MouseMove(object sender, MouseEventArgs e)
{
if (draggedImage != null)
{
var position = e.GetPosition(Layout);
var offset = position - mousePosition;
mousePosition = position;
if (mousePosition.X > 0 && mousePosition.Y > 0)
{
Canvas.SetLeft(draggedImage, Canvas.GetLeft(draggedImage) + offset.X);
Canvas.SetTop(draggedImage, Canvas.GetTop(draggedImage) + offset.Y);
}
posX.Content = Canvas.GetLeft(draggedImage);
posY.Content = Canvas.GetTop(draggedImage);
}
}
}
}
so i tried using the ClipToBound="True" but it'll missing if i drag to outside the canvas. so i tried to limit it using if (mousePosition.X > 0 && mousePosition.Y > 0) works but not that i want because it will go outside the canvas if i drag it to the left and i drag from the right point of the image.
my idea is to make the draggedImage to be my cursor so with if (mousePosition.X > 0 && mousePosition.Y > 0) it will prevent draggedImage to go outside the canvas. is that possible to do that?
or any simple idea to solve this?
EDIT :
i tried using this code but it works but its not really good because when i drag it out side the canvas it'll move like bouncy from pos -1 to 0.
if (Canvas.GetLeft(draggedImage) <= 0)
{
Canvas.SetLeft(draggedImage, 0);
}
if (Canvas.GetTop(draggedImage) <= 0)
{
Canvas.SetTop(draggedImage, 0);
}
if (Canvas.GetLeft(draggedImage) + this.imgX >= 800)
{
Canvas.SetLeft(draggedImage, 800 - this.imgX);
}
if (Canvas.GetTop(draggedImage) +this.imgY >= 600)
{
Canvas.SetTop(draggedImage, 600 - this.imgY);
}
When you drag an item you change it's X and Y position by specifying Canvas's attached properties Canvas.Left and Canvas.Top. So it is easy to ensure that the dragged element does not get dragged outside it's panel.
double canvasSize = 800;
double newLeft = Canvas.GetLeft(draggedImage) + offset.X;
double newTop = Canvas.GetTop(draggedImage) + offset.Y;
if (newLeft < 0)
newLeft = 0;
else if (newLeft + draggedImage.ActualWidth > canvasSize)
newLeft = canvasSize - draggedImage.ActualWidth;
if (newTop < 0)
newTop = 0;
else if (newTop + draggedImage.ActualHeight > canvasSize)
newTop = canvasSize - draggedImage.ActualHeight;
Canvas.SetLeft(draggedImage, newLeft);
Canvas.SetTop(draggedImage, newTop);
This will check if the element you drag is going outside of the Canvas.
I would like to create a scratch card effect on the Windows Phone. However my current solution seem sluggish and the scratch effect look weird(refer to the screenshot below). The experience is very poor as compared to those that i had seen on iOS.
Would appreciate if someone could guide me toward it. Below are my current code.
<Grid Width="Auto" Height="Auto" Background="Black">
<Viewbox Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid Height="60" Width="60" Background="White">
<InkPresenter x:Name="inkP" Width="60" Height="60">
<InkPresenter.Background>
<ImageBrush Stretch="Fill" ImageSource="/Assets/image.png"/>
</InkPresenter.Background>
<Grid Height="60" Width="60">
<TextBlock x:Name="lblsecretText" HorizontalAlignment="Center" TextWrapping="Wrap" Text="LOL" VerticalAlignment="Center" Width="60" Foreground="Black" TextAlignment="Center" FontSize="5.333"/>
</Grid>
</InkPresenter>
</Grid>
</Viewbox>
</Grid>
Stroke s;
int mycol = 0;
public MainPage()
{
InitializeComponent();
inkP.MouseMove += new MouseEventHandler(inkP_MouseMove);
for (int i = 0; i < 60; i++)
{
for (int l = 0; l < 60; l++)
{
Stroke bigStroke = new Stroke();
bigStroke.StylusPoints.Add(new StylusPoint(i, l));
inkP.Strokes.Add(bigStroke);
}
}
}
StylusPoint _lastPoint;
void inkP_MouseMove(object sender, MouseEventArgs e)
{
StylusPointCollection pointErasePoints = e.StylusDevice.GetStylusPoints(inkP);
pointErasePoints.Insert(0, new StylusPoint(e.GetPosition(inkP).X, e.GetPosition(inkP).Y));
//Compare collected stylus points with the ink presenter strokes and store the intersecting strokes.
StrokeCollection hitStrokes = inkP.Strokes.HitTest(pointErasePoints);
if (hitStrokes.Count > 0)
{
foreach (Stroke hitStroke in hitStrokes)
{
inkP.Strokes.Remove(hitStroke);
}
}
_lastPoint = pointErasePoints[pointErasePoints.Count - 1];
}
Your strokes are beeing removed point by point.
You can adjust this by changing your MainPage constructor to:
public MainPage()
{
InitializeComponent();
inkP.MouseMove += new MouseEventHandler(inkP_MouseMove);
for (int i = 0; i < 60; i++)
{
Stroke bigStroke = new Stroke();
for (int l = 0; l < 60; l++)
{
bigStroke.StylusPoints.Add(new StylusPoint(i, l));
}
inkP.Strokes.Add(bigStroke);
}
}
This will add the strokes line by line.
When you remove them, they will be removed line by line.
I have a Grid which scaled/zoomed with ScaleTransform by slider. At runtime many UIElements are added to this Grid.
I want to show some tooltips, but not scaled! How should I do that?
For the example: Grid has scaleX and scaleY 2, so I set new ScaleTransform(0.5, 0.5), but didn't help. It seems that the most similar value is 0.740.. Why?
Even Grid's LayoutTransform.Inverse is set to scale values 0.5.
XAML:
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Height="Auto" Width="Auto" Name="graphScrollViewer" ScrollChanged="graphScrollViewer_ScrollChanged">
<Grid Margin="0,0,0,0" Name="graphGrid" Width="Auto" Height="Auto" ScrollViewer.IsDeferredScrollingEnabled="True" MouseLeftButtonDown="graphGrid_MouseLeftButtonDown" MouseLeftButtonUp="graphGrid_MouseLeftButtonUp" MouseMove="graphGrid_MouseMove">
<Grid.LayoutTransform>
<ScaleTransform ScaleX="{Binding ElementName=sldZoom, Path=Value}" ScaleY="{Binding ElementName=sldZoom, Path=Value}" />
</Grid.LayoutTransform>
</Grid>
</ScrollViewer>
<Slider Minimum="0.1" Maximum="20" Value="1" x:Name="sldZoom" Panel.ZIndex="10" Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,20,20" Height="23" Width="100" ValueChanged="sldZoom_ValueChanged"/>
Code-behind:
(method of Rectangle (MouseEnter event) dynamically added to grid)
private void rect_MouseEnter(object sender, MouseEventArgs e)
{
RectToolTip = new TextBlock();
RectToolTip.HorizontalAlignment = HorizontalAlignment.Left;
RectToolTip.VerticalAlignment = VerticalAlignment.Top;
RectToolTip.TextAlignment = TextAlignment.Center;
RectToolTip.Height = this.HeaderTwoHeight + 1;
RectToolTip.Text = " " + (RectsTasks[(sender as Rectangle)]).Info + " ";
RectToolTip.Background = this.ToolTipBackground;
RectToolTip.Foreground = this.ToolTipFontColor;
RectToolTipBorder = new Border();
RectToolTipBorder.Child = RectToolTip;
RectToolTipBorder.BorderThickness = new Thickness(this.ToolTipBorderThickness);
RectToolTipBorder.BorderBrush = this.ToolTipBorderColor;
RectToolTipBorder.Margin = new Thickness(e.GetPosition((graphGrid)).X + 10, e.GetPosition((graphGrid)).Y + 10, 0, 0);
RectToolTipBorder.VerticalAlignment = System.Windows.VerticalAlignment.Top;
RectToolTipBorder.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;
graphGrid.Children.Add(RectToolTipBorder);
RectToolTipBorder.LayoutTransform = RectToolTip.LayoutTransform = new ScaleTransform(????);
Grid.SetZIndex(RectToolTip, 20);
Grid.SetZIndex(RectToolTipBorder, 20);
}
You need to assign the inverse transform to the child element, so that the child will stay intact.
RectToolTipBorder.LayoutTransform = graphGrid.LayoutTransform.Inverse as Transform;
I'm working on a project which is a basic WPF "Paint" app. I have three options, draw an Ellipse, draw a Line, or draw a 'shape' (a line where closed sections are filled in). These three options are represented with radio buttons. I have up to this part working. Here's an example screenshot:
http://i.stack.imgur.com/naPyI.jpg
Basically what I need to do now is, when the user changes the sliders for R, G, B, and A (opacity / alpha), a small preview area showing the new color should be updated, and that color should be set as the line or fill color, depending on which group of sliders is changed. All of this needs to be done with data binding.
I'm not really sure as to to best approach this problem. Should I have individual values for each slider (RGBA) and pass those values into Color.FromArgb(R,G,B,A)??
EDIT: Here is my code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
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;
using System.ComponentModel;
namespace WpfPaint
{
public partial class MainWindow : Window, INotifyPropertyChanged
{
public bool start = false;
public Ellipse myEllipse;
public Polyline myLine;
public Line myRegLine = new Line();
public double xPos;
public double yPos;
public MainWindow()
{
InitializeComponent();
MyCanvas.Children.Add(myRegLine);
}
private void MyCanvas_PreviewMouseDown(object sender, MouseButtonEventArgs e)
{
if (this.ellipse.IsChecked ?? false)
{
if (start)
{
start = !start;
myEllipse = null;
}
else
{
start = true;
myEllipse = new Ellipse();
xPos = e.GetPosition(MyCanvas).X;
yPos = e.GetPosition(MyCanvas).Y;
MyCanvas.Children.Add(myEllipse);
myEllipse.StrokeThickness = 5;
if (comboBox2.Text == "Red")
{
myEllipse.Fill = Brushes.Red;
fillR.Value = 255;
fillG.Value = 0;
fillB.Value = 0;
}
else if (comboBox2.Text == "Green")
{
myEllipse.Fill = Brushes.Green;
fillR.Value = 0;
fillG.Value = 255;
fillB.Value = 0;
}
else if (comboBox2.Text == "Blue")
{
myEllipse.Fill = Brushes.Blue;
fillR.Value = 0;
fillG.Value = 0;
fillB.Value = 255;
}
if (comboBox1.Text == "Red")
{
myEllipse.Stroke = Brushes.Red;
lineR.Value = 255;
lineG.Value = 0;
lineB.Value = 0;
}
else if (comboBox1.Text == "Green")
{
myEllipse.Stroke = Brushes.Green;
lineR.Value = 0;
lineG.Value = 255;
lineB.Value = 0;
}
else if (comboBox1.Text == "Blue")
{
myEllipse.Stroke = Brushes.Blue;
lineR.Value = 0;
lineG.Value = 0;
lineB.Value = 255;
}
}
}
else
{
switch (e.ClickCount)
{
case 1:
if (myLine == null)
{
myLine = new Polyline();
MyCanvas.Children.Add(myLine);
myLine.StrokeThickness = 5;
if (comboBox1.Text == "Red")
{
myLine.Stroke = Brushes.Red;
lineR.Value = 255;
lineG.Value = 0;
lineB.Value = 0;
}
else if (comboBox1.Text == "Green")
{
myLine.Stroke = Brushes.Green;
lineR.Value = 0;
lineG.Value = 255;
lineB.Value = 0;
}
else if (comboBox1.Text == "Blue")
{
myLine.Stroke = Brushes.Blue;
lineR.Value = 0;
lineG.Value = 0;
lineB.Value = 255;
}
if (this.shape.IsChecked ?? false)
{
if (comboBox2.Text == "Red")
{
myLine.Fill = Brushes.Red;
fillR.Value = 255;
fillG.Value = 0;
fillB.Value = 0;
}
else if (comboBox2.Text == "Green")
{
myLine.Fill = Brushes.Green;
fillR.Value = 0;
fillG.Value = 255;
fillB.Value = 0;
}
else if (comboBox2.Text == "Blue")
{
myLine.Fill = Brushes.Blue;
fillR.Value = 0;
fillG.Value = 0;
fillB.Value = 255;
}
}
}
myLine.Points.Add(e.GetPosition(MyCanvas));
e.Handled = true;
break;
case 2:
myLine = null;
myRegLine = new Line();
MyCanvas.Children.Add(myRegLine);
break;
}
}
}
private void MyCanvas_PreviewMouseMove(object sender, MouseEventArgs e)
{
if (start)
{
myEllipse.Height = Math.Abs(e.GetPosition(MyCanvas).X - xPos) * 2;
myEllipse.Width = Math.Abs(e.GetPosition(MyCanvas).X - xPos) * 2;
Canvas.SetTop(myEllipse, ((yPos) - myEllipse.Height / 2));
Canvas.SetLeft(myEllipse, ((xPos) - myEllipse.Width / 2));
}
else
{
if (myLine != null)
{
myRegLine.Stroke = myLine.Stroke;
myRegLine.X1 = myLine.Points.Last().X;
myRegLine.Y1 = myLine.Points.Last().Y;
myRegLine.X2 = e.GetPosition(MyCanvas).X;
myRegLine.Y2 = e.GetPosition(MyCanvas).Y;
}
}
}
private void comboBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
}
private void comboBox2_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
}
}
}
and here is my XAML
<Window x:Class="WpfPaint.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<RadioButton Content="Line" Height="16" HorizontalAlignment="Left" Margin="12,10,0,0" Name="line" GroupName="options" VerticalAlignment="Top" IsChecked="True" />
<RadioButton Content="Shape" Height="16" HorizontalAlignment="Left" Margin="12,34,0,0" Name="shape" GroupName="options" VerticalAlignment="Top" />
<RadioButton Content="Ellipse" Height="16" HorizontalAlignment="Left" Margin="12,56,0,0" Name="ellipse" GroupName="options" VerticalAlignment="Top" />
<Label Content="R" Margin="210,5,270,0" Height="31" VerticalAlignment="Top" />
<Slider Height="23" HorizontalAlignment="Left" Margin="229,5,0,0" Name="lineR" VerticalAlignment="Top" Width="50" IsMoveToPointEnabled="False" Interval="1" IsSelectionRangeEnabled="False" Maximum="255" />
<Slider Height="23" Margin="306,5,147,0" Name="lineG" VerticalAlignment="Top" IsMoveToPointEnabled="False" Interval="1" Maximum="255" />
<Label Content="G" Margin="282,3,203,0" Height="30" VerticalAlignment="Top" />
<Slider Height="23" HorizontalAlignment="Left" Margin="380,5,0,0" Name="lineB" VerticalAlignment="Top" Width="50" Interval="1" Maximum="255" />
<Label Content="B" Margin="358,3,129,280"/>
<Slider Height="23" HorizontalAlignment="Left" Margin="453,5,0,0" Name="lineA" VerticalAlignment="Top" Width="50" Interval="1" Maximum="255" Value="255" />
<Label Content="A" Margin="428,3,56,0" Height="28" VerticalAlignment="Top" />
<Canvas Name="MyCanvas" Background="#FFDADADA" Margin="0,76,0,0" PreviewMouseDown="MyCanvas_PreviewMouseDown" PreviewMouseMove="MyCanvas_PreviewMouseMove"></Canvas>
<ComboBox Height="23" HorizontalAlignment="Left" Margin="127,5,0,0" Name="comboBox1" VerticalAlignment="Top" Width="70" SelectionChanged="comboBox1_SelectionChanged">
<ComboBoxItem Content="Red" IsSelected="True" />
<ComboBoxItem Content="Green" />
<ComboBoxItem Content="Blue" />
</ComboBox>
<Label Content="Line" Height="28" HorizontalAlignment="Left" Margin="89,3,0,0" Name="label1" VerticalAlignment="Top" />
<Label Content="Fill" Height="28" HorizontalAlignment="Left" Margin="96,42,0,0" Name="label2" VerticalAlignment="Top" />
<ComboBox Height="23" HorizontalAlignment="Left" Margin="127,44,0,0" Name="comboBox2" VerticalAlignment="Top" Width="70" SelectionChanged="comboBox2_SelectionChanged">
<ComboBoxItem Content="Red" IsSelected="True" />
<ComboBoxItem Content="Green" />
<ComboBoxItem Content="Blue" />
</ComboBox>
<Label Content="R" Margin="210,42,270,238" />
<Slider Height="23" HorizontalAlignment="Left" IsMoveToPointEnabled="False" Margin="229,44,0,0" Name="fillR" VerticalAlignment="Top" Width="50" Maximum="255" Interval="1" />
<Slider Height="23" HorizontalAlignment="Left" IsMoveToPointEnabled="False" Margin="306,44,0,0" Name="fillG" VerticalAlignment="Top" Width="50" Maximum="255" Interval="1" />
<Label Content="G" Margin="282,40,203,241" />
<Slider Height="23" HorizontalAlignment="Left" Margin="380,44,0,0" Name="fillB" VerticalAlignment="Top" Width="50" Maximum="255" Interval="1" />
<Label Content="B" Margin="358,42,0,241" HorizontalAlignment="Left" Width="16" />
<Slider Height="23" HorizontalAlignment="Left" Margin="453,44,0,0" Name="fillA" VerticalAlignment="Top" Width="50" Value="255" Interval="1" Maximum="255" />
<Label Content="A" Margin="428,42,56,241" />
</Grid>
Not sure if this is the best way to do it but you can have 5 public properties in your viewmodel:
one for Alpha, one for Red, one for Green, one for Blue, and one user defined structure that you will use to "group" the 4 values together (let's call it FillValue). Bind your 4 sliders to Alpha, Red, Green, and Blue. in the setters for those 4 properties, you set the corresponding field in FillValue then call NotifyPropertyChanged for both properties. Something like this:
public double Red
{
get { return FillValue.Red; }
set
{
FillValue.Red = value;
NotifyPropertyChanged("Red");
NotifyPropertyChanged("FillValue");
}
}
Then bind your preview's fill property to FillValue and add a converter to convert the FillValue to a brush. The binding will look something like this:
<StackPanel>
<StackPanel.Resources>
<RGBExample:FillValueCvtr x:Key="ColorCvtr"/>
</StackPanel.Resources>
<Rectangle Fill="{Binding FillValue, Converter={StaticResource ColorCvtr}}"/>
</StackPanel>