Develop Reference

Bing WPF adding labels to pushpins

I'm trying to add labels to my Pushpins, and I'm experimenting with two different ways to add the pushpin to the map.
Test 1 is from the xaml code, I can add the pushpin but I can't figure out how to add text
Test 2 is from the C# code, when I try to open the map I get an error of "Object refernce not set to an instance of an object on the line "myMap.Children.Add(pin);"
XAML code:
<Window x:Class="WPFKiosk.MapWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:m="clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPFKiosk"
mc:Ignorable="d"
Title="MapWindow" Height="910" Width="1080" WindowStyle="None" ResizeMode="NoResize">
<!-- -->
<Window.Resources>
<ControlTemplate x:Key="PushpinControlTemplate" TargetType="m:Pushpin">
<Image x:Name="pinImage" Height="64" Source="/Images/Push_Pin.png"/>
</ControlTemplate>
</Window.Resources>
<Grid Width="1080" Height="915">
<m:Map x:Name="myMap" CredentialsProvider="My_Key" Mode="Road">
<m:Pushpin Location="28,-81"/>
<!-- Test 1 -->
</m:Map>
<Image HorizontalAlignment="Left" Height="100" Margin="510,740,0,0" VerticalAlignment="Top" Width="100" Source="Images/iTO Back Arrow.png" MouseLeftButtonDown="Image_MouseLeftButtonDown"/>
</Grid>
</Window>
C# code:
using System;
using System.Windows;
using System.Windows.Input;
using System.Windows.Threading;
using Microsoft.Maps.MapControl.WPF;
using Microsoft.Maps.MapControl.WPF.Design;
using Microsoft.Maps.MapControl.WPF.Core;
using Microsoft.Maps.MapControl.WPF.Overlays;
using System.Windows.Controls;
namespace WPFKiosk
{
/// <summary>
/// Interaction logic for MapWindow.xaml
/// </summary>
public partial class MapWindow : Window
{
private DispatcherTimer closeTimer;
public MapWindow()
{
Pushpin pin = new Pushpin();
pin.Location = new Location(28.5383, -81.3792);
pin.Content = "text";
pin.Template = (ControlTemplate)(this.Resources["PushpinControlTemplate"]);
myMap.Children.Add(pin);
//Test 2
this.Left = 0;
this.Top = 0;
this.Topmost = true;
InitializeComponent();
LocationConverter locConverter = new LocationConverter();
// Setting the map view... aka Zoom level and center of zoom
// A string of the coordinates of a location is required
String OrlandoLoc = "28.5383,-81.3792,0.0";
// The String is then converted to a location that the map can interpret
Location center = (Location)locConverter.ConvertFrom(OrlandoLoc);
myMap.SetView(center, 13);
closeTimer = new DispatcherTimer();
closeTimer.Interval = TimeSpan.FromMinutes(2);
closeTimer.Tick += CloseTimer_Tick;
closeTimer.Start();
}
}
}

Pushpin is a ContentControl, so you may add whatever Content you like:
<m:Pushpin Location="28,-81" Content="Hello"/>
or
<m:Pushpin Location="28,-81">
<TextBlock Text="Hello"/>
</m:Pushpin>
or any more complex Content like
<m:Pushpin Location="28,-81">
<Image Source="..."/>
</m:Pushpin>

How to get C# WPF MVVM Screensaver use dual monitor?

I am looking for an answer howto get a C#-WPF-MVVM-Screensaver-View on dual and more monitors running. I read several tutorials on webpages and answers here. However, never the coding samples worked on wpf.
Have someone a code exmple that works for wpf and Model View ViewModel Pattern?
I appreciate your help and thank you.

Thanks. I did it on Windows 10.
Create new WPF Window project for C#
Remove the startupuri / startuplocation from app.xaml.
Add a startup method to app.xaml.
4.
<Application x:Class="SeveralDisplays.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:SeveralDisplays"
Startup="OnStartup">
<Application.Resources>
</Application.Resources>
</Application>
using System.Drawing;
using System.Windows;
using System.Windows.Forms;
using Application = System.Windows.Application;
namespace SeveralDisplays
{
/// <summary>
/// Interaction logic for App.xaml
/// </summary>
public partial class App : Application
{
private void OnStartup(object sender, StartupEventArgs e)
{
Window mainWindow1 = new MainWindow();
Window mainWindow2 = new MainWindow2();
Screen s1 = Screen.AllScreens[0];
Screen s2 = Screen.AllScreens[1];
Rectangle r1 = s1.WorkingArea;
Rectangle r2 = s2.WorkingArea;
mainWindow1.Top = r1.Top;
mainWindow1.Left = r1.Left;
mainWindow2.Top = r2.Top;
mainWindow2.Left = r2.Left;
mainWindow1.Show();
mainWindow2.Show();
mainWindow2.Owner = mainWindow1;
}
}
}
add two classes and ensure they are window-classes.
First / Main view, do not change here too much
<Window x:Class="SeveralDisplays.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:SeveralDisplays"
mc:Ignorable="d"
Loaded="MainWindow_OnLoaded"
Title="MainWindow" Height="350" Width="525">
<Grid>
</Grid>
</Window>
first window code behind
using System.Windows;
namespace SeveralDisplays
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void MainWindow_OnLoaded(object sender, RoutedEventArgs e)
{
WindowState = WindowState.Maximized;
WindowStyle = WindowStyle.None;
ShowInTaskbar = false;
}
}
}
Second xaml as window
<Window x:Class="SeveralDisplays.MainWindow2"
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:SeveralDisplays"
mc:Ignorable="d"
Title="MainWindow2"
WindowStartupLocation="Manual"
WindowStyle="None"
WindowState="Maximized"
Height="300" Width="300">
<Grid>
</Grid>
</Window>
Code behind:
using System.Windows;
namespace SeveralDisplays
{
public partial class MainWindow2 : Window
{
public MainWindow2()
{
InitializeComponent();
}
}
}

you can do this simplified and smart. I use only a method inside app.xaml.cs
/// <summary>
/// Shows the screensaver on every monitor. This is a multi monitor
/// application.
/// </summary>
private void ShowScreenSaver()
{
ClockWindow ownerWindow = null;
// Creates window on other screens.
foreach (System.Windows.Forms.Screen screen in System.Windows.Forms.Screen.AllScreens)
{
ClockWindow window = new ClockWindow(screen.Bounds.Width,
screen.Bounds.Height);
// Primary screen does not have WindowsStartupLocation.
if (screen.Primary)
{
// Maximizes screen.
window.WindowState = WindowState.Maximized;
ownerWindow = window;
}
else
{
// Other screens need a WindowStartupLocation on manual.
window.WindowStartupLocation = WindowStartupLocation.Manual;
System.Drawing.Rectangle location = screen.Bounds;
window.Top = location.Top;
window.Left = location.Left - 480;
window.Width = location.Width;
window.Height = location.Height;
}
window.Show();
}
// Sets every other screen owned to prmary window.
// It closes all windows at once.
foreach (Window window in Current.Windows)
{
if (window != ownerWindow)
{
window.Owner = ownerWindow;
}
}
}
Here I added a View, which I initializes for several displays.
<Window x:Class="Clock_ScreenSaver.Views.ClockWindow"
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:Clock_ScreenSaver.Views"
mc:Ignorable="d"
Title="ClockWindow"
Height="{Binding DisplayHeight}"
Width="{Binding DisplayWidth}"
AllowsTransparency="True"
Background="Black"
Cursor="None"
ShowInTaskbar="False"
KeyDown="ClockWindow_KeyDown"
MouseMove="ClockWindow_MouseMove"
MouseDown="ClockWindow_MouseDown"
Closing="ClockWindowClosing"
Loaded="ClockWindowLoaded"
WindowStyle="None"
ResizeMode="NoResize">
<Grid Name="WindowGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="300"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Grid.Row="1" Grid.Column="1" CornerRadius="360" BorderBrush="#FFDF66" BorderThickness="5" Background="#2D2D30">
<StackPanel>
<Label Foreground="#FFDF66" Margin="0,15,0,0" FontSize="25" FontFamily="Arial" HorizontalAlignment="Center">DIGICLOCK</Label>
<StackPanel Background="#3F3F46" Margin="0,20,0,5" Width="280" Height="100">
<Label Content="{Binding ClockTime}" Name="timelbl" Margin="0,20,0,0" Foreground="#FFDF66" FontSize="40" FontFamily="Arial" HorizontalAlignment="Center"></Label>
</StackPanel>
<StackPanel Background="#3F3F46" Margin="0,0,0,10" Width="280" Height="50">
<Label Content="{Binding ClockDate}" Name="datelbl" Margin="0,8,0,0" Foreground="#FFDF66" FontSize="20" FontFamily="Arial" HorizontalAlignment="Center"></Label>
</StackPanel>
<Button Width="60" Padding="5,5,5,5" Background="#FFDF66" FontSize="10" FontFamily="Arial" Foreground="#333333" BorderThickness="0" Name="QuitBtn" Click="QuitBtn_Click">
Quit
</Button>
</StackPanel>
</Border>
</Grid>
</Window>

Change color from another class is not working

I try to change the color of a canvas by pressing a button using command binding insted of click event to avoid any code behind in the MyView.xaml.cs file. The command is fireing and the messageboxes show the correct color code values before and after changing it so the new color is set but the color of the canvas do not change. If a use a click event and the code behind in the MyView.xaml.cs insted than all work fine but I would like to get it work wiht command bindning and without code behind in the MyView.xaml.cs file. How can I do that and what is that I am not doing right?
MainWindow.xaml
<Window x:Class="WpfApp1.MainWindow"
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:View="clr-namespace:WpfApp1.View"
xmlns:ViewModel="clr-namespace:WpfApp1.ViewModel"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525" Background="YellowGreen"
WindowStartupLocation="CenterScreen">
<Window.DataContext>
<ViewModel:MyClass/>
</Window.DataContext>
<View:MyView/>
</Window>
MyView.xaml file
<UserControl x:Class="WpfApp1.View.MyView"
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:ViewModel="clr-namespace:WpfApp1.ViewModel"
xmlns:View="clr-namespace:WpfApp1.View">
<Canvas Name="MainCanvas" Height="300" Width="502" Background="#FF148B63">
<Button Name="ChangeColorButton" Command="{Binding CommandChangeColor}" Content="new color" Height="25" Width="55" Margin="225,268,225,10"/>
</Canvas>
</UserControl>
MyClass.cs
public class MyClass : MyView
{
List<Color> _listOfColors = new List<Color>();
public MyClass(){ MyInitColor(); }
public ICommand CommandChangeColor
{
get { return new MyCommand(ChangeColor); }
}
public void ChangeColor()
{
MessageBox.Show("Color before: " + MainCanvas.Background.ToString());
Random rnd = new Random();
int i = rnd.Next(_listOfColors.Count - 1);
MainCanvas.Background = new SolidColorBrush(_listOfColors[i]);
MessageBox.Show("Color after: " + MainCanvas.Background.ToString());
}
}

Since you can have many instances of a UserControl, how would MyClass know which instance of MainCanvas it should be updating?
So similar to your binding for CommandChangeColor you should also bind the Background to some property in MyClass. Something like:
Xaml:
<Canvas Name="MainCanvas" Height="300" Width="502" Background="{Binding BackGroundColor}">
<Button Name="ChangeColorButton" Command="{Binding CommandChangeColor}" Content="new color" Height="25" Width="55" Margin="225,268,225,10"/>
</Canvas>
MyClass.cs
public SolidColorBrush BackGroundColor {get;set;}
public void ChangeColor()
{
MessageBox.Show("Color before: " + MainCanvas.Background.ToString());
Random rnd = new Random();
int i = rnd.Next(_listOfColors.Count - 1);
BackGroundColor = new SolidColorBrush(_listOfColors[i]);
MessageBox.Show("Color after: " + MainCanvas.Background.ToString());
}
You will probably also want to implement INotifyPropertyChanged.

dynamically add rectangle with resource fill in WPF

Im having a hard time trying to add a rectangle to a static canvas.The rectangle it's filled with a vectorial image that is in a resource file. It does not show the vectorial for some reason.
Code in XAML:
<Window x:Class="Test1.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 x:Name="grid1">
<Canvas x:Name="canvas1"/>
</Grid>
</Window>
Code behind:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.Loaded += OnLoaded;
}
private void OnLoaded(object sender, RoutedEventArgs e)
{
//dynamically create and add rectangle to a existing canvas
Rectangle rect = new Rectangle
{
VerticalAlignment = VerticalAlignment.Center,
HorizontalAlignment = HorizontalAlignment.Center,
Fill = (Brush)FindResource("Alcanc"),
};
canvas1.Children.Add(rect);
}
}
Code in the resource file:
<Application x:Class="Test1.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
<Style TargetType="{x:Type Grid}">
<Setter Property="ShowGridLines" Value="True"/>
</Style>
<!--Vector image-->
<VisualBrush x:Key="Alcanc" x:Shared="false" Stretch="Uniform">
<VisualBrush.Visual>
<Canvas>
<Path Data="M120.024,239.976C186.12,239.976 239.976,186.048 239.976,119.952 239.976,53.856 186.12,0 120.024,0 53.928,0 0,53.856 0,119.952 0,186.048 53.928,239.976 120.024,239.976" Fill="White" Height="239.976" Canvas.Left="0" Canvas.Top="0" Width="239.976"/>
<Path Data="M84.096,38.304L84.096,138.528 71.784,138.528C66.312,138.528 61.776,134.208 61.416,128.808 61.416,87.912 61.344,119.304 61.344,78.48 59.832,67.608 54.36,59.616 44.424,53.856L3.6,28.512C1.512,27,0.072,24.696,0,22.32L0,22.032C0.072,21.096 0.288,20.16 0.792,19.152 2.736,15.264 8.208,14.832 10.944,16.632L13.68,17.928C29.448,24.696,43.416,30.6,59.184,37.368L59.184,37.44 64.224,38.304 64.944,38.304 65.592,38.304z M84.096,0C75.096,0 67.752,7.416 67.752,16.416 67.752,25.416 75.096,32.76 84.096,32.76z M84.096,138.528L84.096,38.304 104.832,38.304 105.408,38.304C116.568,38.304 125.712,47.376 125.712,58.536 125.712,59.4 125.64,60.192 125.496,61.056L125.496,131.184C125.496,131.256,125.568,131.256,125.568,131.328L125.496,131.4 125.496,131.76C125.28,135.504 122.112,138.528 118.296,138.528 114.48,138.528 111.384,135.504 111.096,131.76L111.096,77.976C110.664,74.448,104.976,74.808,104.832,78.768L104.832,124.704 104.904,124.704 104.904,127.944 104.904,128.088 104.904,128.232 104.904,128.808 104.832,128.808C104.472,134.208,99.936,138.528,94.464,138.528z M84.096,32.76C93.168,32.76 100.512,25.416 100.512,16.416 100.512,7.416 93.168,0 84.096,0z" Fill="#FFCCCCCC" Height="138.528" Canvas.Left="58.464" Canvas.Top="63" Width="125.712"/>
<Path Data="M42.017,15.974L3.281,50.246C1.985,51.182 -1.687,56.87 0.905,60.398 3.137,63.638 7.169,63.854 10.409,62.198L51.737,37.646C54.113,36.134 56.921,35.99 60.017,36.782 60.233,37.862 60.449,39.014 60.593,40.166L60.593,87.758C60.449,95.534,64.913,99.206,70.385,99.782L93.929,99.782C100.265,99.638,104.081,93.95,104.081,89.558L104.081,89.414 104.009,40.454C104.225,36.494,109.841,36.134,110.273,39.662L110.273,92.942C110.561,96.686 113.657,99.71 117.473,99.71 121.289,99.71 124.457,96.686 124.673,92.942L124.673,92.582 124.673,92.51 124.673,92.438 124.673,22.814C124.817,21.95 124.817,21.158 124.817,20.294 124.817,9.134 115.745,0.062 104.585,0.062L104.009,0.062 64.841,0.062 64.193,0.062 63.545,0.062C51.593,-1.09,42.521,14.03,42.017,15.974" Fill="#FFCCCCCC" Height="99.783" Canvas.Left="59.215" Canvas.Top="101.818" Width="124.817"/>
<Path Data="M6.264,12.6C9.792,12.6 12.6,9.72 12.6,6.264 12.6,2.808 9.792,0 6.264,0 2.808,0 0,2.808 0,6.264 0,9.72 2.808,12.6 6.264,12.6" Fill="#FF3399FF" Height="12.6" Canvas.Left="55.872" Canvas.Top="123.12" Width="12.6"/>
<Path Data="F1M0,9.144L9.216,0 9.216,6.912 43.992,6.912 43.992,11.664 9.216,11.664 9.216,18.36z" Fill="#FF3399FF" Height="18.36" Canvas.Left="98.928" Canvas.Top="38.376" Width="43.992"/>
<Path Data="M20.165,78.264L20.165,77.904C20.021,74.016,14.549,73.656,14.117,77.112L14.117,131.328 14.045,131.328C13.829,134.928 10.805,137.88 7.061,137.88 3.317,137.88 0.293,134.928 0.077,131.328L0.005,131.328 0.005,130.896 0.005,130.824 0.005,130.752 0.005,60.624C-0.283,49.896,12.461,37.944,22.901,38.232L63.437,38.232 63.509,38.232C63.725,38.16 63.941,38.16 64.157,38.16 75.245,38.16 84.389,47.304 84.389,58.392 84.389,59.256 84.317,60.12 84.173,60.912L84.173,130.608 84.173,130.68 84.173,130.752 84.173,131.112C83.957,134.856 80.789,137.88 76.973,137.88 73.229,137.88 70.061,134.856 69.845,131.112L69.773,131.112 69.773,77.832C69.341,74.304,63.725,74.664,63.581,78.624L63.581,128.088 63.581,127.44 63.581,127.584 63.581,127.728 63.581,128.304C63.221,133.704,58.685,137.88,53.213,137.88L30.605,137.88C25.061,137.88,20.525,133.704,20.165,128.304L20.165,78.336z M42.845,0C33.845,0 26.501,7.344 26.501,16.344 26.501,25.344 33.845,32.688 42.845,32.688 51.845,32.688 59.189,25.344 59.189,16.344 59.189,7.344 51.845,0 42.845,0" Fill="#FF99CC00" Height="137.88" Canvas.Left="99.643" Canvas.Top="63.648" Width="84.389"/>
</Canvas>
</VisualBrush.Visual>
</VisualBrush>
</Application.Resources>
</Application>

I'm still not sure I understand the question. However, I do know for sure that the C# code you posted won't show anything, because the Rectangle object's width and height are both their default value of 0. An empty rectangle won't draw anything.
When I create a simple window with an empty canvas (using your provided resource):
<Window x:Class="TestSO28203571AddChildCodeBehind.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">
<Window.Resources>
<VisualBrush x:Key="Alcanc" x:Shared="false" Stretch="Uniform">
<!--Imagem vectorial do Alcance lateral esquerdo-->
<VisualBrush.Visual>
<Canvas>
<Path Data="M120.024,239.976C186.12,239.976 239.976,186.048 239.976,119.952 239.976,53.856 186.12,0 120.024,0 53.928,0 0,53.856 0,119.952 0,186.048 53.928,239.976 120.024,239.976" Fill="White" Height="239.976" Canvas.Left="0" Canvas.Top="0" Width="239.976"/>
<Path Data="M84.096,38.304L84.096,138.528 71.784,138.528C66.312,138.528 61.776,134.208 61.416,128.808 61.416,87.912 61.344,119.304 61.344,78.48 59.832,67.608 54.36,59.616 44.424,53.856L3.6,28.512C1.512,27,0.072,24.696,0,22.32L0,22.032C0.072,21.096 0.288,20.16 0.792,19.152 2.736,15.264 8.208,14.832 10.944,16.632L13.68,17.928C29.448,24.696,43.416,30.6,59.184,37.368L59.184,37.44 64.224,38.304 64.944,38.304 65.592,38.304z M84.096,0C75.096,0 67.752,7.416 67.752,16.416 67.752,25.416 75.096,32.76 84.096,32.76z M84.096,138.528L84.096,38.304 104.832,38.304 105.408,38.304C116.568,38.304 125.712,47.376 125.712,58.536 125.712,59.4 125.64,60.192 125.496,61.056L125.496,131.184C125.496,131.256,125.568,131.256,125.568,131.328L125.496,131.4 125.496,131.76C125.28,135.504 122.112,138.528 118.296,138.528 114.48,138.528 111.384,135.504 111.096,131.76L111.096,77.976C110.664,74.448,104.976,74.808,104.832,78.768L104.832,124.704 104.904,124.704 104.904,127.944 104.904,128.088 104.904,128.232 104.904,128.808 104.832,128.808C104.472,134.208,99.936,138.528,94.464,138.528z M84.096,32.76C93.168,32.76 100.512,25.416 100.512,16.416 100.512,7.416 93.168,0 84.096,0z" Fill="#FFCCCCCC" Height="138.528" Canvas.Left="58.464" Canvas.Top="63" Width="125.712"/>
<Path Data="M42.017,15.974L3.281,50.246C1.985,51.182 -1.687,56.87 0.905,60.398 3.137,63.638 7.169,63.854 10.409,62.198L51.737,37.646C54.113,36.134 56.921,35.99 60.017,36.782 60.233,37.862 60.449,39.014 60.593,40.166L60.593,87.758C60.449,95.534,64.913,99.206,70.385,99.782L93.929,99.782C100.265,99.638,104.081,93.95,104.081,89.558L104.081,89.414 104.009,40.454C104.225,36.494,109.841,36.134,110.273,39.662L110.273,92.942C110.561,96.686 113.657,99.71 117.473,99.71 121.289,99.71 124.457,96.686 124.673,92.942L124.673,92.582 124.673,92.51 124.673,92.438 124.673,22.814C124.817,21.95 124.817,21.158 124.817,20.294 124.817,9.134 115.745,0.062 104.585,0.062L104.009,0.062 64.841,0.062 64.193,0.062 63.545,0.062C51.593,-1.09,42.521,14.03,42.017,15.974" Fill="#FFCCCCCC" Height="99.783" Canvas.Left="59.215" Canvas.Top="101.818" Width="124.817"/>
<Path Data="M6.264,12.6C9.792,12.6 12.6,9.72 12.6,6.264 12.6,2.808 9.792,0 6.264,0 2.808,0 0,2.808 0,6.264 0,9.72 2.808,12.6 6.264,12.6" Fill="#FF3399FF" Height="12.6" Canvas.Left="55.872" Canvas.Top="123.12" Width="12.6"/>
<Path Data="F1M0,9.144L9.216,0 9.216,6.912 43.992,6.912 43.992,11.664 9.216,11.664 9.216,18.36z" Fill="#FF3399FF" Height="18.36" Canvas.Left="98.928" Canvas.Top="38.376" Width="43.992"/>
<Path Data="M20.165,78.264L20.165,77.904C20.021,74.016,14.549,73.656,14.117,77.112L14.117,131.328 14.045,131.328C13.829,134.928 10.805,137.88 7.061,137.88 3.317,137.88 0.293,134.928 0.077,131.328L0.005,131.328 0.005,130.896 0.005,130.824 0.005,130.752 0.005,60.624C-0.283,49.896,12.461,37.944,22.901,38.232L63.437,38.232 63.509,38.232C63.725,38.16 63.941,38.16 64.157,38.16 75.245,38.16 84.389,47.304 84.389,58.392 84.389,59.256 84.317,60.12 84.173,60.912L84.173,130.608 84.173,130.68 84.173,130.752 84.173,131.112C83.957,134.856 80.789,137.88 76.973,137.88 73.229,137.88 70.061,134.856 69.845,131.112L69.773,131.112 69.773,77.832C69.341,74.304,63.725,74.664,63.581,78.624L63.581,128.088 63.581,127.44 63.581,127.584 63.581,127.728 63.581,128.304C63.221,133.704,58.685,137.88,53.213,137.88L30.605,137.88C25.061,137.88,20.525,133.704,20.165,128.304L20.165,78.336z M42.845,0C33.845,0 26.501,7.344 26.501,16.344 26.501,25.344 33.845,32.688 42.845,32.688 51.845,32.688 59.189,25.344 59.189,16.344 59.189,7.344 51.845,0 42.845,0" Fill="#FF99CC00" Height="137.88" Canvas.Left="99.643" Canvas.Top="63.648" Width="84.389"/>
</Canvas>
</VisualBrush.Visual>
</VisualBrush>
</Window.Resources>
<Canvas x:Name="canvas1" />
</Window>
And then I declare MainWindow like this:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
Rectangle rect = new Rectangle
{
VerticalAlignment = VerticalAlignment.Center,
HorizontalAlignment = HorizontalAlignment.Center,
Fill = (Brush)FindResource("Alcanc"),
Width = 200,
Height = 150
};
canvas1.Children.Add(rect);
}
}
Your graphic is drawn correctly. Well, it's drawn…I don't actually know what size you wanted it. But the key is, you need to specify a size.

Replace a button with a picture when clicked and then create a new button on top of picture in WPF

I am wanting to create a small program that would let me select from a few images of interconnecting pieces to create what is essentially a path. That idea would be to have a starting piece with a button to where you could connect the next piece of the path. When clicked, this button would offer up a selection of the options that can be placed there and then the selected image would be placed and the button moved to the new end of the path.
My problem is that my c# experience is so far limited to static UI and manipulating text fields or entire new windows. I don't have a clue about where to start to make a UI in which buttons are moved and images are placed after the initial start of the program. I thought maybe using the grid control and some code to manipulate it might be the answer, but really don't know the commands to do such. I have been using WPF for my previous programs, and assume it would still be viable in this case.
Would anyone be able to point me in the right direction to figuring out how to dynamically control a section of the program's window in order to accomplish my goal? I am sorry for the semi-vague question but this is well out of my wheelhouse as a still very new hobbyist programmer.

Here's a quick, rather crude example, but it shows some basics of adding and positioning controls at runtime.
Things to note:
Add controls to a Canvas if you want to be able to position x,y explicitly.
I used UserControls for location items, and just added instances
If you're building a game, and if it's any significant size and complexity, don't use WPF. I've been there, done that, built a full multiplayer space arcade/action game on it. It's too slow for games.
Here's the code dump below.
//PathBuilding.xaml
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TravianResourceProd" x:Class="TravianResourceProd.PathBuilding"
Title="PathBuilding" Height="466.377" Width="621.509">
<Grid x:Name="drawingGrid" Background="#FFC2C2C2" >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="0*"/>
</Grid.ColumnDefinitions>
<Canvas Background="#FFB3B3B3" Margin="0,0,0,-0.377" x:Name="DrawCanvas" MouseMove="DrawCanvas_MouseMove" MouseUp="Grid_MouseUp">
<local:ActiveLocation x:Name="primarySegment" HorizontalAlignment="Left" VerticalAlignment="Top" Loaded="ActiveLocation_Loaded" Canvas.Left="67" Canvas.Top="98"/>
</Canvas>
</Grid>
</Window>
//PathBuilding.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.Shapes;
namespace TravianResourceProd
{
/// <summary>
/// Interaction logic for PathBuilding.xaml
/// </summary>
public partial class PathBuilding : Window
{
public PathBuilding()
{
InitializeComponent();
_ConnectorLine = new Line();
_ConnectorLine.Stroke = new SolidColorBrush(Colors.DarkBlue);
_ConnectorLine.Visibility = System.Windows.Visibility.Hidden;
_locationSelector = new LocationOptions();
_locationSelector.Visibility = System.Windows.Visibility.Hidden;
DrawCanvas.Children.Add(_ConnectorLine);
DrawCanvas.Children.Add(_locationSelector);
}
private Line _ConnectorLine;
private bool _AddMode = false;
private LocationOptions _locationSelector;
private void ActiveLocation_Loaded(object sender, RoutedEventArgs e)
{
primarySegment.btnAddSegment.Click += (object sender1, RoutedEventArgs e1) =>
{
//show the type selector
_locationSelector.Visibility = System.Windows.Visibility.Visible;
var loc = _locationSelector.TransformToAncestor(drawingGrid)
.Transform(new Point(0, 0));
Canvas.SetLeft(_locationSelector, Mouse.GetPosition(DrawCanvas).X + 80);
Canvas.SetTop(_locationSelector, Mouse.GetPosition(DrawCanvas).Y - 50);
};
_locationSelector.btnTypeOne.Click += (object s, RoutedEventArgs e2) =>
{
_AddMode = true;
_ConnectorLine.Visibility = System.Windows.Visibility.Visible;
_locationSelector.Visibility = System.Windows.Visibility.Hidden;
};
}
private void Grid_MouseUp(object sender, MouseButtonEventArgs e)
{
if (!_AddMode)
return;
_AddMode = false;
_ConnectorLine.Visibility = System.Windows.Visibility.Hidden;
//Add the one we picked
var oldLoc = new OldLocation();
Canvas.SetLeft(oldLoc, Canvas.GetLeft(primarySegment));
Canvas.SetTop(oldLoc, Canvas.GetTop(primarySegment));
DrawCanvas.Children.Add(oldLoc);
//Add a line connecting old to new
var newestLine = new Line();
newestLine.Visibility = System.Windows.Visibility.Visible;
newestLine.Stroke = new SolidColorBrush(Colors.Brown);
newestLine.X1 = _ConnectorLine.X1;
newestLine.Y1 = _ConnectorLine.Y1;
newestLine.X2 = _ConnectorLine.X2 + 40;
newestLine.Y2 = _ConnectorLine.Y2 + 50;
DrawCanvas.Children.Add(newestLine);
//Move the active/primary to the new location
Canvas.SetLeft(primarySegment, e.GetPosition(this).X);
Canvas.SetTop(primarySegment, e.GetPosition(this).Y);
}
private void DrawCanvas_MouseMove(object sender, MouseEventArgs e)
{
try
{//reposition the line going from active location to mouse
_ConnectorLine.X1 = Canvas.GetLeft(primarySegment) + 70;
_ConnectorLine.Y1 = Canvas.GetTop(primarySegment) + 50;
_ConnectorLine.X2 = e.GetPosition(this).X - 5;
_ConnectorLine.Y2 = e.GetPosition(this).Y - 5;
}
catch (Exception)
{
}
}
}
}
//LocationOptions.xaml
<UserControl x:Class="TravianResourceProd.LocationOptions"
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"
mc:Ignorable="d" Height="109.359" Width="117.057">
<Grid Margin="0,0,-0.17,0.094">
<Button x:Name="btnTypeOne" Content="Type One" HorizontalAlignment="Left" VerticalAlignment="Top" Width="117" Height="33" Margin="0,0,-0.17,0" />
<Button x:Name="btnTypeTwo" Content="Type Two" HorizontalAlignment="Left" VerticalAlignment="Top" Width="117" Margin="0,38,-0.17,0" Height="33" />
</Grid>
</UserControl>
//OldLocation.xaml
<UserControl x:Class="TravianResourceProd.OldLocation"
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"
mc:Ignorable="d" Height="80" Width="80">
<Grid>
<Ellipse Stroke="#FF686868" StrokeThickness="8">
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF373737" Offset="1"/>
<GradientStop Color="#FF929292"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Grid>
</UserControl>
//ActiveLocation.xaml
<UserControl x:Class="TravianResourceProd.ActiveLocation"
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"
mc:Ignorable="d" Height="80" Width="80">
<Grid>
<Ellipse Stroke="#FF1A9000" StrokeThickness="6">
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF62745E" Offset="1"/>
<GradientStop Color="#FF929292"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Button x:Name="btnAddSegment" Content="" HorizontalAlignment="Left" VerticalAlignment="Top" Width="20" Height="22" FontSize="30" Margin="60,30,-0.302,0"/>
</Grid>
</UserControl>