Please see the image my requirement is exactly this. In short I want to do something like that in image. Please help. So I have Button containing an ellipse that looks like a circle. This button inturn has 6 circles inside them. My xaml is as follows. When you Click on any of the circle inside the Innerpanel i.e inner circle in my case I want to dynamically create circular ellipses These ellipses should not go beyond the outer circle. Right now i am creating ellipses but they go beyond the outer cirle without forming a circular shape. Please let me know your ideas..
<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>
Here is my code behind.
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);
}
