Silverlight Button Event Not firing - silverlight

Question

I know this type of question has been asked before, But I have tried the suggestions to no avail, so hopefully some fresh eyes can help me on this.
I have a Custom Control, which is basically a Border with a grid inside which contains 2 textboxes and a button.
The control also has a octagon that is added in codebehind.
The button's click event does not fire. I gather it has probably got something to do with the controls above it getting the click event instead of the Button, but I don't know how to solve it. Or perhaps because the octagon is drawn afterwards in the code behind.
I have tried so many different things, moving the button, adding another grid, setting the background to Transparent. This is driving me nuts.
Below is the code.
XAML
<UserControl x:Class="HSCGym.UserControls.CustomErrorControl"
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"
mc:Ignorable="d" d:DesignHeight="800" d:DesignWidth="1000">
<Border x:Name="ErrorBorder" BorderBrush="Black" BorderThickness="2" CornerRadius="20" Background="White"
Width="900" Height="700"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
Grid.Row="0" Grid.RowSpan="2">
<Border.Effect>
<DropShadowEffect BlurRadius="7" Direction="300" ShadowDepth="6" Color="Black" />
</Border.Effect>
<Grid x:Name="LayoutRoot" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent" >
<Grid.RowDefinitions>
<RowDefinition Height="55" />
<RowDefinition Height="55" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Text="{Binding ErrorText}" HorizontalAlignment="Center" FontSize="40" Grid.Row="0"/>
<TextBlock Text="{Binding ErrorText2}" HorizontalAlignment="Center" FontSize="40" Grid.Row="1"/>
<Button x:Name="btnExit" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="38,0,0,20"
Content="Exit" Height="50" Width="200" FontSize="20" Click="btnExit_Click"
Grid.Row="2"/>
</Grid>
</Border>
</UserControl>
And the Code Behind:
public partial class CustomErrorControl
{
public string ErrorText { get; set; }
public string ErrorText2 { get; set; }
public string StopText { get; set; }
private readonly int x;
private readonly int y;
private readonly int r;
public CustomErrorControl(int x, int y, int radius, string stopError)
{
InitializeComponent();
this.x = x;
this.y = y;
r = radius;
StopText = stopError;
DrawOctagon(this.x, this.y, r);
}
public void DrawOctagon(int x, int y, int R)
{
int r2 = (int)(R/Math.Sqrt(2));
// OuterOctagon
Point[] outerOctagon = new Point[8];
outerOctagon[0].X = x;
outerOctagon[0].Y = y - R;
outerOctagon[1].X = x + r2;
outerOctagon[1].Y = y - r2;
outerOctagon[2].X = x + R;
outerOctagon[2].Y = y;
outerOctagon[3].X = x + r2;
outerOctagon[3].Y = y + r2;
outerOctagon[4].X = x;
outerOctagon[4].Y = y + R;
outerOctagon[5].X = x - r2;
outerOctagon[5].Y = y + r2;
outerOctagon[6].X = x - R;
outerOctagon[6].Y = y;
outerOctagon[7].X = x - r2;
outerOctagon[7].Y = y - r2;
HexColor stop1Colour = new HexColor("#FFA30D0D");
HexColor stop2Colour = new HexColor("#FFCA0C0C");
HexColor stop3Colour = new HexColor("#FFF71212");
GradientStop gs1 = new GradientStop { Color = stop1Colour, Offset = 0.98 };
GradientStop gs2 = new GradientStop { Color = stop2Colour, Offset = 0.5 };
GradientStop gs3 = new GradientStop { Color = stop3Colour, Offset = 0.04 };
LinearGradientBrush gb = new LinearGradientBrush
{
StartPoint = new Point(0.77, 0.85),
EndPoint = new Point(0.13, 0.15),
GradientStops = new GradientStopCollection {gs1, gs2, gs3}
};
DropShadowEffect dse = new DropShadowEffect
{
BlurRadius = 8,
Color = Colors.Black,
Direction = 320,
ShadowDepth = 10.0,
Opacity = 0.5
};
Polygon octagonOuter = new Polygon
{
VerticalAlignment = VerticalAlignment.Center,
HorizontalAlignment = HorizontalAlignment.Center,
Fill = gb,
Stroke = new SolidColorBrush(Colors.Black),
StrokeThickness = 5,
StrokeDashArray = new DoubleCollection { 10, 0 },
Effect = dse,
Points = new PointCollection
{
new Point(outerOctagon[0].X, outerOctagon[0].Y),
new Point(outerOctagon[1].X, outerOctagon[1].Y),
new Point(outerOctagon[2].X, outerOctagon[2].Y),
new Point(outerOctagon[3].X, outerOctagon[3].Y),
new Point(outerOctagon[4].X, outerOctagon[4].Y),
new Point(outerOctagon[5].X, outerOctagon[5].Y),
new Point(outerOctagon[6].X, outerOctagon[6].Y),
new Point(outerOctagon[7].X, outerOctagon[7].Y),
}
};
double outerOctCenterY = octagonOuter.Points[6].Y - octagonOuter.Points[2].Y;
double outerOctCenterX = octagonOuter.Points[4].X - octagonOuter.Points[0].X;
var rotate = new RotateTransform { Angle = 22.8, CenterX = outerOctCenterX, CenterY = outerOctCenterY };
octagonOuter.RenderTransform = rotate;
Grid.SetRow(octagonOuter, 2);
TextBlock tbStopError = new TextBlock
{
Text = StopText,
Foreground = new SolidColorBrush(Colors.White),
FontFamily = new FontFamily("Courier New"),
FontSize = 80,
FontWeight = FontWeights.Bold,
VerticalAlignment = VerticalAlignment.Center,
HorizontalAlignment = HorizontalAlignment.Center
};
Grid.SetRow(tbStopError, 2);
LayoutRoot.Children.Add(octagonOuter);
LayoutRoot.Children.Add(tbStopError);
}
private void btnExit_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Clicked");
}
}
Any ideas?
Many thanks
Neill
Update:
I have tested quickly putting MouseLeftButtonUp events on the grid and the border.
When I click the border, first the grid event fires, then the border event fires, but if I click the button, nothing fires. Does this mean the Button is above the grid and border so should be firing the event?
I will try some of the other suggestions as well in the meant time.
Neill
Update 2:
It gets stranger. I moved the button to the top and then click event fires. What I see is that from a certain Y point and below, absolutely no mouseleftbuttonup or click events fire, nada. This makes no sense. If I go from the bottom and click moving slowly up, then at a certain point, all events start firing.
Neill
Update 3
Hi all,
After removing controls one by one to see what is causing the issue, I now know it is the Border control. If I remove it, all works fine, when it is back, same problem as before. Any ideas?
Thanks
Neill
Update 4
Hi all,
OK so I finally sorted out the problem, so in case anybody finds themselves in a similar situation. It had nothing to do with that page at all. I am loading the page in a frame from a different page and what it seems is that I had to many row definitions set in the grid on the main page. After I corrected that, everything works fine.
Thanks

Answer 1

First try fill button by Transparent color (00000000).
Also you can send solution or part of it to me and I shall try to help.