MVVM을 사용하여 동적으로 생성 된 WPF 레이아웃

Question

MVVM 패턴을 사용하는 동안 직사각형 인 레이아웃의 창에 뷰를 배치하려고합니다.

WinForms에서는 컨트롤의 동일한 속성을 설정하여 컨트롤 배치를 쉽게하기 위해 Rectangle의 너비, 높이, x 및 y를 사용할 수있었습니다.

이제 MVVM을 사용하여 wpf로이 코드를 다시 작성하고 있습니다.

이 내가 할 노력하고있어입니다 :

이 내가 일하는 줄 알았는데 뭔가 있지만 그렇지 않습니다.

<Grid ShowGridLines="True"> 
    <Grid.RowDefinitions> 
     <RowDefinition /> 
     <RowDefinition /> 
     <RowDefinition /> 
     <RowDefinition /> 
     <RowDefinition /> 
     <RowDefinition /> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition /> 
     <ColumnDefinition /> 
     <ColumnDefinition /> 
     <ColumnDefinition /> 
     <ColumnDefinition /> 
    </Grid.ColumnDefinitions> 

    <ItemsControl ItemsSource="{Binding VirtualScreens}" Grid.IsSharedSizeScope="True" > 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <Button Grid.Row="{Binding Row}" Grid.Column="{Binding Column}" Content="{Binding Name}"></Button> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl> 
</Grid> 

public class VirtualScreen : ObservableObject 
{ 
    string name; 
    int row; 
    int column; 

    public string Name 
    { 
     get { return name; } 
     set 
     { 
      name = value; 
      RaisePropertyChanged(() => Name); 
     } 
    } 

    public int Row 
    { 
     get { return row; } 
     set 
     { 
      row = value; 
      RaisePropertyChanged(() => Row); 
     } 
    } 

    public int Column 
    { 
     get { return column; } 
     set 
     { 
      this.column = value; 
      RaisePropertyChanged(() => Column); 
     } 
    } 
} 

은 UI와 같이이 요소를 레이아웃하는 WPF Grid을 사용할 수 있습니다 도움

Answer 1

모든 종류의 주셔서 감사합니다. 된 3 행의 3 열 그리드는 당신을 위해 잘 작동합니다 :

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition /> 
     <RowDefinition /> 
     <RowDefinition /> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition /> 
     <ColumnDefinition /> 
     <ColumnDefinition /> 
    </Grid.ColumnDefinitions> 
    <Button Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Grid.RowSpan="2">This is the big top left section</Button> 
    <Button Grid.Row="1" Grid.Column="2">Top right</Button> 
    <Button Grid.Row="2" Grid.Column="2">Middle right</Button> 
    <Button Grid.Row="3" Grid.Column="1">Bottom left</Button> 
    <Button Grid.Row="3" Grid.Column="2">Bottom center</Button> 
    <Button Grid.Row="3" Grid.Column="2">Bottom right</Button> 
</Grid> 

체크 아웃 Grid Row and Column Spanning 더 많은 정보를 원하시면.

Answer 2

ItemsControl ItemsPanel, ItemsTemplate 및 ItemContainerStyle을 사용할 수 있습니다. 여기

는

<ItemsControl ItemsSource="{Binding VirtualScreens}"> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <Grid ShowGridLines="True"> 
       <Grid.RowDefinitions> 
        <RowDefinition /> 
        <RowDefinition /> 
        <RowDefinition /> 
        <RowDefinition /> 
        <RowDefinition /> 
        <RowDefinition /> 
       </Grid.RowDefinitions> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition /> 
        <ColumnDefinition /> 
        <ColumnDefinition /> 
        <ColumnDefinition /> 
        <ColumnDefinition /> 
       </Grid.ColumnDefinitions> 
      </Grid> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 

    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <TextBlock Text="{Binding Name}" /> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 

    <ItemsControl.ItemContainerStyle> 
     <Style> 
      <Style.Setters> 
       <Setter Property="Grid.Row" Value="{Binding Row}" /> 
       <Setter Property="Grid.Column" Value="{Binding Column}" /> 
      </Style.Setters> 
     </Style> 
    </ItemsControl.ItemContainerStyle> 
</ItemsControl>