使用椭圆以编程方式wpf将元素添加到圆形按钮

Question

请参阅图片我的要求就是这个。总之，我想在图像中做类似的事情。请帮忙。 所以我让Button包含一个看起来像圆圈的椭圆。这个按钮内部有6个圆圈。我的xaml如下。当你点击Innerpanel里面的任何一个圆圈，即在我的情况下，我想要动态创建圆形椭圆这些椭圆不应超出外圆。现在我正在创建椭圆，但它们超出了外圈而没有形成圆形。请让我知道你的想法..

<Grid>
    <Button Name="OuterPanel" Width="780" Height="780">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <Ellipse Stroke="Black" StrokeThickness="1">

                    </Ellipse>
                    <StackPanel Name="gridOuterPanel"></StackPanel>
                </Grid>
            </ControlTemplate>
        </Button.Template>
    </Button>


    <Button Name="InnerPanel" Width="480" Height="480">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <Ellipse Stroke="Black" 
                  StrokeThickness="1">
                    </Ellipse>

                    <Grid Name="Inner1" Margin="34,0,0,150" HorizontalAlignment="Left" VerticalAlignment="Center">
                        <Button Width="130" Height="130" Click="Button_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>
                    </Grid>

                    <Grid Name="Inner2" Margin="0,0,34,150" HorizontalAlignment="Right" VerticalAlignment="Center">
                        <Button Width="130" Height="130">
                            <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>
                    </Grid>

                    <Grid Name="Inner3" Margin="0,10,0,0" HorizontalAlignment="Center" VerticalAlignment="Top">
                        <Button Width="130" Height="130">
                            <Button.Template>
                                <ControlTemplate TargetType="Button">
                                    <Ellipse Stroke="Black" StrokeThickness="1">
                                        <Ellipse.Fill>
                                            <ImageBrush ImageSource="Images/fruits.jpg" Stretch="Fill"></ImageBrush>
                                        </Ellipse.Fill>
                                    </Ellipse>
                                </ControlTemplate>
                            </Button.Template>
                        </Button>
                    </Grid>

                    <Grid Name="Inner4" Margin="0,0,0,10" HorizontalAlignment="Center" VerticalAlignment="Bottom">
                        <Button Width="130" Height="130">
                            <Button.Template>
                                <ControlTemplate TargetType="Button">
                                    <Ellipse Stroke="Black" StrokeThickness="1">
                                        <Ellipse.Fill>
                                            <ImageBrush ImageSource="Images/panda.jpg" Stretch="Fill"></ImageBrush>
                                        </Ellipse.Fill>
                                    </Ellipse>
                                </ControlTemplate>
                            </Button.Template>
                        </Button>
                    </Grid>

                    <Grid Name="Inner5" Margin="34,178,0,0" HorizontalAlignment="Left" VerticalAlignment="Center">
                        <Button Width="130" Height="130">
                            <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>
                    </Grid>

                    <Grid Name="Inner6" Margin="0,178,34,0" HorizontalAlignment="Right" VerticalAlignment="Center">
                        <Button Width="130" Height="130">
                            <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>
                    </Grid>

                    <Grid Name="Inner7" HorizontalAlignment="Center" VerticalAlignment="Center">
                        <Button Width="130" Height="130">
                            <Button.Template>
                                <ControlTemplate TargetType="Button">
                                    <Ellipse Stroke="Black" StrokeThickness="1">
                                        <Ellipse.Fill>
                                            <ImageBrush ImageSource="Images/point.png" Stretch="Fill"></ImageBrush>
                                        </Ellipse.Fill>
                                    </Ellipse>
                                </ControlTemplate>
                            </Button.Template>
                        </Button>
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Button.Template>
    </Button>
</Grid>

这是我背后的代码。

 private void Button_Click(object sender, RoutedEventArgs e)
 {      
     StackPanel sp = new StackPanel();
     sp.Name = "First";
     Ellipse ep = new Ellipse()
     {
         Height=75,
         Width=75,
         Stroke=new SolidColorBrush(Colors.Black),  
         StrokeThickness=1
     };
     sp.HorizontalAlignment = HorizontalAlignment.Right;
     sp.VerticalAlignment = VerticalAlignment.Center;
     sp.Margin = new Thickness(0, 120, 50, 0);
     sp.Children.Add(ep);
     gd = UIHelper.FindChild<StackPanel>(Application.Current.MainWindow, "gridOuterPanel");
     gd.Children.Add(sp);    
 }