2020년 7월 1일 수요일

WPF - (Layout)Panel

Panel 특 


content 에 여러가지 요소를 넣을 수 있음.

이하는 content 들이 Layout 에 의해 가지게 되는 공통적인 속성

minWidth, maxHeight .. : 레이아웃이 자동으로 움직일 때 자신의 크기가 움직이는 경우 최소댓값 지정.
margin : 레이아웃 끝부분으로부터 위치. "all", "x, y", "left, top, right, bottom" 의 버전이 있음.
padding : margin 이랑 비슷한데 지정된 크기만큼 공백으로 채움.
HorizontalAlignment, VerticalAlignment : 가운데 정렬, 꽉차게 정렬, 아래로 정렬 등 지정 가능

Visibility : Visible, Hidden, Collapsed 옵션이 있음. 마지막건 영역자체도 안보이게 함.
zIndex : Panel.zIndex 로 사용가능. 겹치는 부분이 있을 때 뭐가 앞에 올지 결정.


StackPanel


추가하는 대로 Orientation 으로 지정된 방향에 따라서 자동으로 스택처럼 위치가 들어감.
Orientation은 기본적으론 Vertical 으로 되어 있음


WrapPanel

1
2
3
4
5
6
<WrapPanel x:Name="wrap_check" Grid.Row="3" Grid.Column="1">
    <CheckBox Content="영화"/>
    <CheckBox Content="독서"/>
    <CheckBox Content="세미나"/>
    <CheckBox Content="여행"/>
</WrapPanel>
cs
지정된 크게에 맞게 안의 배치를 자동적으로 해줌.
Orientation 으로 기본적으로 배치할 방향이 정해짐.


DockPannel


Content 에는 DockPanel.Dock 이라는 속성이 생김.
Top, Bottom, Left, Right 을 그 속성에 넣으면 창을 분할해서 알아서 들어감.
아무것도 안넣으면 가운데에 들어감.

먼저 정의한게 우선적으로 겹치는 부분을 사용함


Grid


1
2
3
4
5
6
7
8
9
10
11
12
<StackPanel Grid.IsSharedSizeScope="True">
    <Grid ShowGridLines="False" Margin="10, 10, 10, 0" Background="#ffffff">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto" SharedSizeGroup="Book_number"/>
            <ColumnDefinition Width="3*"/>
            <ColumnDefinition Width="auto" SharedSizeGroup="Publisher"/>
            <ColumnDefinition Width="auto" SharedSizeGroup="Price"/>
            <ColumnDefinition Width="auto"/>
        </Grid.ColumnDefinitions>
cs


사용 영역을 위와같이 행렬처럼 정의해 구역을 나눔.


구역 정의시 Width, Height 를 지정하는 방법은 3가지가 있음.

auto : 자신의 크기에 알맞게 들어감.
n : 정확한 픽셀값. 하지만 사람마다 디스플레이 크기가 달라 추천되지 않음.
n* : 명확하게 지정되지 않은 영역을 * 지정이 된 갯수만큼 나눠서 지정함. 1* 은 *로 축약 가능.

Content 에는 Grid.Column, Grid.Row, Grid.ColumnSpan, Grid.RowSpan 이라는 속성이 생김. 원하는 숫자 값을 지정하면 원하는 영역으로 감.

연동

다른 Grid 와 크기 연동 가능함.
우선 다른 레이아웃에서 Grid.IsSharedSizeScope 라는 속성을 True 로 시킴.
그리고 위처럼 행렬 정의부에서 SharedSizeGroup 를 같은 이름으로 적어줌.
그러면 자동으로 연동이 됨.

GridSplitter

1
2
3
<GridSplitter Grid.Row="1" Grid.ColumnSpan="4" 
    HorizontalAlignment="Stretch" VerticalAlignment="Bottom" 
    Background="Black" ShowsPreview="True" Height="3"/>
cs

위를 통해 사용자가 실행중에 임의로 드래그를 통해 그리드 크기를 조정 가능함.

이건 Grid 에 컨텐츠 넣는 것과 똑같이 column, row 를 지정하면 지정된 구역의 크기를 조절할 수 있음.

Stretch 를 Horizontal, Vetical Alignment 중 어디에 넣을지가 방향 조절의 핵심.

ShowGridLines 로 경계선 보여줄 수 있음



UniformGrid

1
2
3
4
5
6
<UniformGrid Rows="5" Columns="5">
    <Button Content="10"/>
    <Button Content="10"/>
    <Button Content="10"/>
    <Button Content="10"/>
</UniformGrid>
cs

정해진 사이즈에 맞춰서 순서대로 넣게 됨. Column 이 우선되어 순서대로 넣는 거임.


ScrollViewer


이걸로 감싸면 스크롤 가능.

HorizontalscrollbarVisibility, Vertical... 의 속성이 있는데 auto 로 하면 필요할 때만 스크롤바가 나옴.


Canvas


Winform 식으로 만드는 방식이나 화면 크기 변경에 취약해 권장되지 않음.

Content 에 Canvas.Left, Canvas.Top 이란 속성이 생김. 이걸로 x, y 좌표를 지정할 수 있음
Canvas.Right, Canvas.Bottom 도 있으나 각 축별 처음 지정된걸로만 적용이 됨.


InkCanvas


1
2
3
<InkCanvas x:Name="canvasMain">
    
</InkCanvas>
cs
1
2
3
4
5
6
7
8
9
10
11
12
13
private void btnSave_Click(object sender, RoutedEventArgs e)
{
    FileStream fs = new FileStream("draw.data", FileMode.Create);
    canvasMain.Strokes.Save(fs);
    fs.Close();
}
 
private void btnLoad_Click(object sender, RoutedEventArgs e)
{
    FileStream fs = new FileStream("draw.data", FileMode.Open);
    canvasMain.Strokes = new System.Windows.Ink.StrokeCollection(fs);
    fs.Close();
}
cs

클릭하면 그림 그려짐
아래는 저장 불러오기용 코드


Viewbox


Content 크기에 맞춰서 Content 크기를 자동으로 조절해줌.
이는 Content를 그래픽화 해서 가능한것으로 Content 그래픽 자체의 크기가 바뀌는 것

Stretch 속성이라는 크기조절 옵션이 있음.








댓글 없음:

댓글 쓰기

List