silverlight 버튼을 클릭하여 사각형을 만듭니다.

Question

저는 C#에서 실버 라이트 애플리케이션을 만들고 싶습니다. 버튼을 추가하고 각각의 클릭으로 하나씩 직사각형을 만들고 싶습니다. 이제 하나의 직사각형을 만들 수 있었지만 문제는 그 것이 아닙니다. 다음 직사각형의 위치를 ​​변경하는 방법을 알고 있습니까?

각 클릭이 다른 옆에 사각형을 만들도록 도와주세요.

C#을

enter code here 

public MainPage() 
     { 
      InitializeComponent(); 

      Canvas c = new Canvas(); 

      Button b = new Button(); 
      Canvas.SetLeft(b, -50); 
      Canvas.SetTop(b, 20); 
      b.Width = 75; 
      b.Height = 23; 
      LayoutRoot.Children.Add(b); 
      b.Click += new RoutedEventHandler(b_Click); 
     } 

     void b_Click(object sender, RoutedEventArgs e) 
     { 
      //throw new NotImplementedException(); 
      Rectangle rectangle = new Rectangle(); 
      rectangle.Fill = new SolidColorBrush(Colors.Cyan); 
      Canvas.SetLeft(rectangle, 100); 
      Canvas.SetTop(rectangle, 100); 
      rectangle.Width = 200; 
      rectangle.Height = 100; 

      LayoutRoot.Children.Add(rectangle); 

     } 


Xaml: 
<Canvas x:Name="LayoutRoot" Background="White" Height="215" Width="292"> 

    </Canvas> 

Answer 1

가장 간단한 것은 만들 StackPanel 또는 WrapPanel하고 Canvas 처음에 그를 추가하는 것입니다 : 덕분에 여기 는 코드입니다. 그런 다음 에 해당하는 사각형을에 추가하십시오.

이렇게하면 행에 직사각형 (OrientationHorizontal) 또는 열 (Vertical - 기본값)이 자동으로 표시됩니다.

더 많은 구문 (Grids 등)을 사용하면 사각형이 배치되는 위치를보다 효과적으로 제어 할 수 있습니다.

Answer 2

SetLeft 및 SetTop 방법으로 전달하는 값을 Canvas으로 변경해야하는 경우.

그래서 예를 들어, 당신은 같은 것을 할 수 있습니다 : 다음 사각형이 동일한 수평 라인에 배치 될 수 있도록

이

double left = 100; 
double top = 100; 
void b_Click(object sender, RoutedEventArgs e) 
{ 
    Rectangle rectangle = new Rectangle(); 
    rectangle.Fill = new SolidColorBrush(Colors.Cyan); 
    Canvas.SetLeft(rectangle, left); //left is no more a constant 
    Canvas.SetTop(rectangle, top); //top is no more a constant 
    rectangle.Width = 200; 
    rectangle.Height = 100; 
    LayoutRoot.Children.Add(rectangle); 

    //update left and top 
    left += rectangle.Width + 10; //put some margin! 
    if ((left + rectangle.Width) < LayoutRoot.Width) 
    { 
     left = 100; 
     top += rectangle.Height + 10; 
    } 
} 

그것은, 사각형의 left 값을 업데이트합니다. 왼쪽에 공간이 없을 때까지 그렇게합니다. 그런 다음에는 top의 날짜를 지우고 left = 100을 만들어 직사각형의 첫 번째 행 아래에있는 다음 직사각형을 만듭니다. 그것의 모양은 r1, r2, r3 등이 직사각형입니다.

| [ r1 ] [ r2 ] [ r3 ] [ r4 ] [ r5 ] | //change only left 
| [ r6 ] [ r7 ] [ r8 ] [ r9 ] [ r10] | //change top and make left = 100 
//..