Develop Reference

DragMove on Rectangle only works near edge?

I've created a custom error box with a rectangle for a header bar (the window is borderless). I'm trying to get the header rectangle to work like any window header bar and allow dragging to move. I have the code in place, however it only works by the edge of the rectangle (approx half a cm) and not anywhere in the rectangle.
I've set the height, width, and fill of the rectangle but not sure if there's a property I'm missing somewhere which allows click drag to work anywhere?
Rectangle definition:
<Window x:Class="CustomErrorBox"
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:View"
mc:Ignorable="d"
Title="WpfMessageBox" MinHeight="240"
MinWidth="500" MaxHeight="540" MaxWidth="720"
Background="Transparent"
SizeToContent="WidthAndHeight"
WindowStartupLocation="CenterScreen"
ShowInTaskbar="False" ResizeMode="NoResize"
WindowStyle="None" Topmost="True"
Name="WindowError" SizeChanged="WindowError_SizeChanged">
<Border BorderBrush="LightSlateGray" BorderThickness="0" CornerRadius="0">
<Grid >
<Grid.Resources>
<Style TargetType="Button" x:Key="MessageBoxButtonStyle">
<Setter Property="Background" Value="Transparent" />
<Setter Property="TextBlock.TextAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="Border" CornerRadius="0" BorderBrush="#000" BorderThickness="1,1,1,1" Background="{TemplateBinding Background}">
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalAlignment}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" MouseDown="Rectangle_MouseDown" Width="Auto" Height="Auto">
<Rectangle.Fill>
<!-- TODO - Find some nice colours for header bar -->
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" Opacity="0.5">
<GradientStop Color="#26508A" Offset="0.0"/>
<GradientStop Color="#2A739E" Offset="1.0"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Grid.Row="1" Grid.Column="0" Grid.RowSpan="3" Grid.ColumnSpan="2" Width="Auto" Height="Auto">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" Opacity="0.8">
<GradientStop Color="#FF7FCFFF" Offset="1"/>
<GradientStop Color="#FFCFFFCF"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Grid Grid.Row="0" Grid.ColumnSpan="2" MinHeight="40" >
<TextBlock Margin="5,1,0,1" Name="MessageTitle" FontWeight="Bold" TextTrimming="CharacterEllipsis" LineHeight="22" FontSize="16" VerticalAlignment="Center" Foreground="White"/>
</Grid>
<Image Name="img" Margin="5" Grid.Row="1" Grid.Column="0" Width="35" Height="35" Stretch="Fill" />
<ScrollViewer Grid.Row="1" Grid.Column="1" VerticalScrollBarVisibility="Auto">
<TextBlock Margin="10,5,10,5" VerticalAlignment="Center" TextWrapping="Wrap" Name="txtMsg" FontSize="14" LineHeight="20" ScrollViewer.VerticalScrollBarVisibility="Auto" />
</ScrollViewer>
<Grid Grid.Row="2" Grid.ColumnSpan="2" Grid.Column="0" >
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
<Button Name="btnOk" Content="OK" Margin="3,5" MinWidth="70" Height="35" Click="Button_Click" Foreground="Black" FontSize="14" Style="{StaticResource MessageBoxButtonStyle}"
Background="#b6dbd6" VerticalAlignment="Center" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" />
<Button Name="btnYes" Content="Yes" Margin="3,5" MinWidth="70" Height="35" Click="Button_Click" Foreground="Black" FontSize="14" Style="{StaticResource MessageBoxButtonStyle}"
Background="#b6dbd6" VerticalAlignment="Center" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/>
<Button Name="btnNo" Content="No" Margin="3,5" MinWidth="70" Height="35" Click="Button_Click" Foreground="Black" FontSize="14" Style="{StaticResource MessageBoxButtonStyle}"
Background="#dbb6b6" VerticalAlignment="Center" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" />
<Button Name="btnCancel" Margin="3,5" Content="Cancel" MinWidth="70" Height="35" Click="Button_Click" Style="{StaticResource MessageBoxButtonStyle}" Foreground="Black"
Background="#dbb6b6" FontSize="14" VerticalAlignment="Center" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/>
</StackPanel>
</Grid>
<Expander Header="Further Information" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Margin="5,5,0,0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0">
<TextBlock Margin="10,5,10,5" Name="ExpanderMessage" TextWrapping="Wrap" ScrollViewer.VerticalScrollBarVisibility="Auto"/>
</ScrollViewer>
<Button Grid.Row="1" Name="ClipboardButton" Click="Button_Click_1" Content="Copy to Clipboard" HorizontalAlignment="Right" Margin="5"/>
</Grid>
</Expander>
</Grid>
</Border>
</Window>
MouseClick function:
private void Rectangle_MouseDown(object sender, MouseButtonEventArgs e)
{
if (e.ChangedButton == MouseButton.Left)
this.DragMove();
}

The issue is that your "MessageTitle" TextBlock is in top of the Rectangle.
If you intend to set the Text property of this TextBlock to display a title, you could use a WindowChrome instead of handling the MouseDown event for the Rectangle:
<Window ...>
<WindowChrome.WindowChrome>
<WindowChrome CaptionHeight="40" GlassFrameThickness="0" CornerRadius="0" />
</WindowChrome.WindowChrome>
<Border BorderBrush="LightSlateGray" BorderThickness="0" CornerRadius="0">
<Grid >
...
<Rectangle Grid.ColumnSpan="2" Height="40">
<Rectangle.Fill>
<!-- TODO - Find some nice colours for header bar -->
</Rectangle.Fill>
</Rectangle>

Close Current Window when parent UserControl is clicked wpf

Right now I have button on a usercontrol. Clicking that button will launch a window as follows,
private void Button_Click(object sender, RoutedEventArgs e)
{
this.Effect = new BlurEffect();
dlg = new WidgetWindow();
dlg.Owner = Window.GetWindow(this);
dlg.Show();
this.Effect = null;
}
Now please see the Image. Whenever I click outside the widget window i.e. anytime I click on the grayed out area of the usercontrol, I want the circular widget window to close. I am trying to raise an event for the usercontrol as follows but the event never fires. I also tried mouse down with no luck. I also tried raising the events to the child container of the usercontrol which is Grid in my case but the event wont raise. Please help
private void Tbl_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
if (dlg != null)
{
dlg.Close();
}
}
Here is the code for the WidgetWindow.
<Window WindowStyle="None" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" WindowState="Maximized"
AllowsTransparency="True" Background="#80000000"
Title="WidgetWindow" ShowInTaskbar="False" Loaded="widget_Loaded">
<Grid>
<Grid.Background>
<SolidColorBrush Opacity="0.5" Color="White"></SolidColorBrush>
</Grid.Background>
<ListBox BorderThickness="0" Name="lstBox" Height="980" Width="980" ItemsSource="{Binding}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<local:CircularPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Background>
<SolidColorBrush Opacity="0" Color="Gray"></SolidColorBrush>
</ListBox.Background>
</ListBox>
<Grid Height="524" Width="524" Margin="54,36,0,0">
<Ellipse Stroke="Black" StrokeThickness="1">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="White" Offset="0"></GradientStop>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Grid Name="Inner1" Margin="0,5,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Row="0" Name="btn1" Width="130" Height="130" HorizontalAlignment="Center" VerticalAlignment="Top" Click="btn1_Click">
<Button.Template>
<ControlTemplate TargetType="Button">
<Ellipse Grid.Row="0" Stroke="Black" StrokeThickness="1">
<Ellipse.Fill>
<ImageBrush ImageSource="Images/fruits.jpg" Stretch="Fill"></ImageBrush>
</Ellipse.Fill>
</Ellipse>
</ControlTemplate>
</Button.Template>
</Button>
<TextBlock Margin="0,4,0,0" FontSize="12" HorizontalAlignment="Center" Grid.Row="1">Locate Sessions</TextBlock>
</Grid>
<Grid Name="Inner2" Margin="34,124,0,150">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Row="0" Name="btn2" Width="130" Height="130" HorizontalAlignment="Left" VerticalAlignment="Center" Click="btn2_Click">
<Button.Template>
<ControlTemplate TargetType="Button">
<Ellipse Stroke="Black" StrokeThickness="1">
<Ellipse.Fill>
<ImageBrush ImageSource="Images/bird.jpg" Stretch="Fill"></ImageBrush>
</Ellipse.Fill>
</Ellipse>
</ControlTemplate>
</Button.Template>
</Button>
<TextBlock Margin="20,4,0,0" FontSize="12" HorizontalAlignment="Left" Grid.Row="1">Mass Surveillence</TextBlock>
</Grid>
<Grid Name="Inner3" Margin="0,124,34,150">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Row="0" Name="btn3" Width="130" Height="130" HorizontalAlignment="Right" VerticalAlignment="Center" Click="btn3_Click">
<Button.Template>
<ControlTemplate TargetType="Button">
<Ellipse Stroke="Black" StrokeThickness="1">
<Ellipse.Fill>
<ImageBrush ImageSource="Images/forest.jpg" Stretch="Fill"></ImageBrush>
</Ellipse.Fill>
</Ellipse>
</ControlTemplate>
</Button.Template>
</Button>
<TextBlock Margin="0,4,8,0" FontSize="12" HorizontalAlignment="Right" Grid.Row="1">Subscriber Intelligence</TextBlock>
</Grid>
<Grid Name="Inner4" Margin="34,285,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Row="0" Name="btn4" Width="130" Height="130" HorizontalAlignment="Left" VerticalAlignment="Center" Click="btn4_Click">
<Button.Template>
<ControlTemplate TargetType="Button">
<Ellipse Stroke="Black" StrokeThickness="1">
<Ellipse.Fill>
<ImageBrush ImageSource="Images/nature.jpg" Stretch="Fill"></ImageBrush>
</Ellipse.Fill>
</Ellipse>
</ControlTemplate>
</Button.Template>
</Button>
<TextBlock Margin="45,4,0,0" FontSize="12" HorizontalAlignment="Left" Grid.Row="1">Analytics</TextBlock>
</Grid>
<Grid Name="Inner5" Margin="0,285,34,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Row="0" Name="btn5" Width="130" Height="130" HorizontalAlignment="Right" VerticalAlignment="Center" Click="btn5_Click">
<Button.Template>
<ControlTemplate TargetType="Button">
<Ellipse Stroke="Black" StrokeThickness="1">
<Ellipse.Fill>
<ImageBrush ImageSource="Images/beach.jpg" Stretch="Fill"></ImageBrush>
</Ellipse.Fill>
</Ellipse>
</ControlTemplate>
</Button.Template>
</Button>
<TextBlock Margin="0,4,40,0" FontSize="12" HorizontalAlignment="Right" Grid.Row="1">Historical</TextBlock>
</Grid>
<Grid Name="Inner6" Margin="0,0,0,10" >
<Button Name="btn6" Width="130" Height="130" HorizontalAlignment="Center" VerticalAlignment="Bottom" Click="btn6_Click">
<Button.Template>
<ControlTemplate TargetType="Button">
<Ellipse Stroke="Black" StrokeThickness="1">
<Ellipse.Fill>
<ImageBrush ImageSource="Images/Exit.jpg" Stretch="Fill"></ImageBrush>
</Ellipse.Fill>
</Ellipse>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
<Grid Name="Inner7" HorizontalAlignment="Center" VerticalAlignment="Center">
<Button Name="btn7" Width="130" Height="130">
<Button.Template>
<ControlTemplate TargetType="Button">
<Ellipse Name="pointerEllipse" Stroke="Black" StrokeThickness="1">
</Ellipse>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</Grid>
<!--</ControlTemplate>
</Button.Template>
</Button>-->
</Grid>
</Window>

You can use Popup instead of WidgetWindow. Put all your WidgetWindow content into Popup. Configure Popup Staysopen="False". You can refer to below code:
<Popup Name="popLink" StaysOpen="False" Placement="Mouse" MaxWidth="200"
PopupAnimation="Slide" AllowsTransparency="True">
...Your content
</Popup>
Use popLink.IsOpen = true to open it.

XAML design: drawing a line from button to button

I am trying to learn XAML and am creating a simple app based off this:
I have created the buttons for each of the circles, but where I am running into an issue is the drawing of the lines and autosizing them to the button positions. I was wondering if there is a way to bind the start/end point of a path to a button location? Is there a better way doing this in XAML?
Here is what my current XAML code is...
<Page
x:Class="PennyGame.GameControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PennyGame"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button Width="100" Height="100" Margin="540,133,0,535" Name="Button_Top1">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
<Path Data="M49,100 L48,401" Fill="Gold" Height="302" Stretch="Fill" Stroke="Gold" UseLayoutRounding="False" Width="2"/>
</Button>
<Button Width="100" Height="100" Margin="725,133,0,535" Name="Button_Top2">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="100" Height="100" Margin="725,534,0,134" Name="Button_Bottom2">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="100" Height="100" Margin="540,534,0,134" Name="Button_Bottom1">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="100" Height="100" Margin="434,244,0,424" Name="Button_Left1">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="100" Height="100" Margin="434,423,0,245" Name="Button_Left2">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="100" Height="100" Margin="831,244,0,424" Name="Button_Right1">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="100" Height="100" Margin="831,423,0,245" Name="Button_Right2">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Path Data="M526,475 L826,475" Fill="White" Margin="534,0,539,292" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" VerticalAlignment="Bottom" d:LayoutOverrides="LeftPosition, RightPosition" Height="10" />
<Path Data="M526,295 L826,295" Fill="White" Margin="534,294,538,0" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" VerticalAlignment="Top" d:LayoutOverrides="LeftPosition, RightPosition" Height="2" />
<Path Data="M590,235 L590,535" Fill="White" Margin="590,233,0,233" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" Width="2" d:LayoutOverrides="TopPosition, BottomPosition" HorizontalAlignment="Left" />
<Path Data="M775,235 L775,535" Fill="White" Margin="0,233,590,233" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" Width="3" d:LayoutOverrides="TopPosition, BottomPosition" HorizontalAlignment="Right" />
<Path Data="M590,535 L826,295" Fill="White" Margin="590,294,539,238" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" d:LayoutOverrides="LeftPosition, RightPosition, TopPosition, BottomPosition"/>
<Path Data="M775,535 L526,295" Fill="White" Margin="534,296,589,233" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" d:LayoutOverrides="LeftPosition, RightPosition, TopPosition, BottomPosition"/>
<Path Data="M526,475 L775,235" Fill="White" Margin="534,233,589,291" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" d:LayoutOverrides="LeftPosition, RightPosition, TopPosition, BottomPosition"/>
<Path Data="M590,235 L826,475" Fill="White" Margin="590,233,540,291" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" d:LayoutOverrides="LeftPosition, RightPosition, TopPosition, BottomPosition"/>
</Grid>

If you stick to handle it in XAML using grids you can use a canvas for each button-line-button constellation.
I'd recommend to handle it in code.
See my example bellow.
I bound actual Canvas properties to each button and the connector line.
It should properly if you resize the container grid, or reposition your canvas.
RESULT:
CODE:
<Grid Width="300" Height="300">
<Canvas x:Name="lineCanvas1">
<Line x:Name="line" Fill="Green" Stroke="Green" UseLayoutRounding="False" X1="1" Y1="1" X2="{Binding ActualWidth, ElementName=lineCanvas1}" Y2="{Binding ActualHeight, ElementName=lineCanvas1}" />
<Button x:Name="button1" Content="Button One" HorizontalAlignment="Stretch" Margin="0" VerticalAlignment="Stretch" Background="Red" RenderTransformOrigin="1,1" Height="100" Width="100"/>
<Button x:Name="button2" Content="Button Two" HorizontalAlignment="Stretch" Margin="-100,-100,0,0" VerticalAlignment="Stretch" Background="Red" Canvas.Left="{Binding ActualWidth, ElementName=lineCanvas1}" Canvas.Top="{Binding ActualHeight, ElementName=lineCanvas1}" RenderTransformOrigin="1,1" Height="100" Padding="0" Width="100"/>
</Canvas>
</Grid>

How to get my kinect hoverbutton to work on my child window

I'm writing an kinect application which requires me to use the hand and act as mouse, which i have done which is called hoverbutton.
Is there any way i could get the Hoverbutton from my main window to work on my child window as well?
<Window x:Class="KinectButton.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:Coding4Fun.Kinect.Wpf.Controls;assembly=Coding4Fun.Kinect.Wpf"
Title="MainWindow" Background="#FFAD4747"
WindowStyle="None" ResizeMode="NoResize"
WindowStartupLocation="CenterScreen" WindowState="Maximized" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" Height="927" Width="1350">
<Grid x:Name="LayoutRoot">
<Canvas>
<Canvas.Background>
<ImageBrush ImageSource="file:///C:/Users/103159T/Downloads/STORYBOARD/Background.png" />
</Canvas.Background>
<Controls:HoverButton Margin="0" Padding="0" x:Name="kinectButton" ImageSize="50"
ImageSource="/Images/RightHand.png"
ActiveImageSource="/Images/RightHand.png"
TimeInterval="2000" Panel.ZIndex="1000" Canvas.Left="0" Canvas.Top="0" />
<Button x:Name="button1" Content="START" Height="152" Canvas.Left="594" Canvas.Top="502" Width="320" FontSize="40" Click="button1_Click" BorderThickness="4" Foreground="White" FontFamily="Comic Sans MS" OpacityMask="Black" HorizontalAlignment="Center" VerticalAlignment="Center">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF0000C8" Offset="0.358" />
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush>
</Button.Background>
</Button>
<Label Canvas.Left="384" Canvas.Top="632" Content="" Height="66" Name="message" Width="530" Foreground="White" FontSize="40" />
<Button Canvas.Left="0" Canvas.Top="974" Content="Quit" Height="91" Name="quitButton" Width="137" FontSize="28" Background="#FFFF3838" Foreground="White" Click="quitButton_Click" />
<Image Height="206" Name="videoStream" Stretch="Fill" Width="363" Canvas.Left="1002" Canvas.Top="682" />
</Canvas>
</Grid>
that was my main window xaml which includes a button called "START" which directs me to another xaml window when clicked..

Adding image to background for a popup window in Silverlight

PROBLEM
I want to add an image the background of a pop up. I am fairly new to Silverlight, so I apologize if there are some blatant, rookie errors in the following code
<Popup x:Name="MyPOP" HorizontalOffset="200" VerticalOffset="200" IsOpen="False" >
<StackPanel Width="800" Height="800" Background="Red">
<Button Content="GO AMERICA" Click="Button_Click_1" Width="100" Height="50" />
<Canvas>
<TextBlock Text="THESE COLORS DON'T RUN!!!!" />
<Canvas.Background>
<ImageBrush ImageSource="http://www.ilovethebronx.com/sites/default/files/events_pics/fireworks.jpg?1339518424"/>
</Canvas.Background>
</Canvas>
</StackPanel>
</Popup>
Any suggestions? Thanks in advance

You simply need to set a Height on your Canvas, though I suspect that this is more like what you may be after:
<Popup x:Name="MyPOP" HorizontalOffset="200" VerticalOffset="200" IsOpen="True" >
<Grid Width="800" Height="800" Background="Red">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Button Content="GO AMERICA" Click="Button_Click_1" Width="100" Height="50" />
<Border Grid.Row="1">
<TextBlock Text="THESE COLORS DON'T RUN!!!!" />
<Border.Background>
<ImageBrush ImageSource="http://www.ilovethebronx.com/sites/default/files/events_pics/fireworks.jpg?1339518424"/>
</Border.Background>
</Border>
</Grid>
</Popup>