페이지 레이아웃
In WPF, in order to layout the elements in your application, you need to put them inside a Panel. The panel is a container element that controls the arrangement of its child elements. In Angular, in order to customize the page layout and its child elements, you have to use CSS. Let us go through some of the most popular panels in WPF and see how we can achieve similar layout with CSS.
StackPanel
The StackPanel arranges its child elements into a single line that can be oriented horizontally or vertically. Let us add several buttons in a StackPanel and see how they look like in WPF:
<StackPanel>
<Button>1</Button>
<Button>2</Button>
<Button>3</Button>
<Button>4</Button>
<Button>5</Button>
</StackPanel>
If we want to achieve similar layout in Angular, we may use CSS Flexbox layout. The Flexible Box Layout Module is a powerful mechanism which allows designing a flexible responsive layout structure. In order to use the Flexbox layout, we have to define a container which has its display property set to flex. Also in order to stack the items vertically, we have to set the flex-direction property to column.
<div class="flex-container">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
</div>
.flex-container {
display: flex;
flex-flow: column;
}
브라우저의 최종 결과는 다음과 같습니다.
The default value of the flex-direction property is row, which is equivalent to a StackPanel with Horizontal orientation in WPF. The flexbox also supports row-reverse and column-reverse directions which stack the items right to left and bottom to top respectively.
WrapPanel
The WrapPanel positions child elements in sequential position from left to right, breaking content to the next line at the edge of the containing box. Subsequent ordering happens sequentially from top to bottom or right to left, depending on the value of the Orientation property. Let us add several buttons in a WrapPanel and see how they look like in WPF:
<WrapPanel>
<WrapPanel.Resources>
<Style TargetType="Button">
<Setter Property="Width" Value="150"></Setter>
</Style>
</WrapPanel.Resources>
<Button>1</Button>
<Button>2</Button>
<Button>3</Button>
<Button>4</Button>
<Button>5</Button>
</WrapPanel>
In order to achieve similar result in Angular, we will use the Flexbox layout again. As in the case with StackPanel, we have to set the display property to flex, but we also have to set the flex-wrap property to wrap.
<div class="flex-container">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
</div>
.flex-container {
display: flex;
flex-wrap: wrap;
}
button {
width: 150px;
}
브라우저의 최종 결과는 다음과 같습니다.
If you want to achieve a result similar to a WrapPanel with Orientation="Vertical", you have to set the flex-direction property to column. The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.
.flex-container {
display: flex;
flex-flow: row wrap;
}
Flexbox는 항목 정렬을 위해 몇 가지 추가 CSS 속성을 지원합니다. 이 튜토리얼에서 이에 대해 자세히 알아볼 수 있습니다.
Grid
The Grid defines a flexible grid area consisting of columns and rows. Let us add several buttons in a Grid and see how they look like in WPF:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Button Grid.RowSpan="2" Grid.ColumnSpan="2">1</Button>
<Button Grid.Column="2">2</Button>
<Button Grid.Row="1" Grid.Column="2">3</Button>
<Button Grid.Row="2">4</Button>
<Button Grid.Row="2" Grid.Column="1">5</Button>
<Button Grid.Row="2" Grid.Column="2">6</Button>
<Button Grid.Row="3" Grid.ColumnSpan="3">7</Button>
</Grid>
In Angular, we could use the CSS Grid Layout Module, which offers a grid-based layout system, with rows and columns. In order to use the Grid layout, we have to define a container which has its display property set to grid or inline-grid.
<div class="grid-container">
<button class="button1">1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button class="button7">7</button>
</div>
.grid-container {
display: grid;
}
Note
CSS 그리드 레이아웃은 Internet Explorer 11과 같은 이전 브라우저에서는 지원되지 않습니다.
Now let us define the columns of the grid using the grid-template-columns property.
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
}
We have defined three columns with width auto, which means they would have the same width. If you want to distribute the available space proportionally similar to the star sizing in WPF, you could use the flex sizing unit fr in CSS. The following code snippet defines two columns, the first one would receive one times the available space, while the second one would receive two times the available space:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
}
Now we will add the rows with height of 50px each using the grid-template-rows property.
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 50px 50px 50px 50px;
}
이제 애플리케이션을 열면 다음과 같습니다.
WPF와 CSS 그리드 사이의 한 가지 중요한 차이점을 볼 수 있습니다. WPF에서 Grid.Row 및 Grid.Column의 기본값은 0인 반면 CSS 그리드 레이아웃은 자동으로 사용 가능한 다음 행과 열을 하위 항목에 할당합니다.
Now let us apply the column and row spans to the first and seventh buttons. We will use the grid-row and grid-column properties for that purpose.
.button1 {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
.button7 {
grid-column: 1 / span 3;
}
First we specify the start row/column, then after the / symbol, we could specify either the end row/column or how many rows/columns the item should span. Unlike WPF, the CSS grid column numbering is not zero-based and the first row/column is 1.
다음은 전체 CSS와 브라우저의 최종 결과입니다.
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 50px 50px 50px 50px;
}
.button1 {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
.button7 {
grid-column: 1 / span 3;
}
The grid-row and grid-column properties are shorthand properties for the grid-row-start, grid-row-end, grid-column-start and grid-column-end properties. You could learn more about the CSS Grid container and item properties in the tutorials in the Additional Resources section.
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub