20220920
C# xaml로 디자인 레이아웃 구성중 ...
기본적인 인터페이스는 차장님이 구현해주셔서 이외 프로그램 테스트에 필요한 버튼, 이용자를 위한 텍스트 등을 추가하였다.
이 중 몇가지 기능들에 대해 정리해본다.
→ 구현된 모습
/////////////////////////////////////////////////////////////////////////////////////////////
TextBlock 텍스트블록
<TextBlock TextAlignment="Center" Margin="10,5,464,120" VerticalAlignment="Center" FontSize="13">PORT :</TextBlock>구현된 모습의 PORT 라고 쓰여진 부분이 TextBlock이다.
우측 블록은 후술할 ComboBox라는 기능인데, TextBlock에 PORT라는 텍스트를 입력해줌으로써, 이것을 사용자에게
"시리얼 COM PORT를 고르시오"
라고 알려줄 수 있다.
TextBlock 디자인 설정 기능들...
↓
TextAlignment : "텍스트"를 수평정렬함. (Center=중앙정렬, Left=좌측정렬 등.) (※새로 알게된 사실. TextBlock은 수직정렬을 지원하지 않는다. 수직 정렬이 필요하다면 사이즈(Wide, Height)를 정의말고 마진을 설정해보자.)
Margin : Grid를 기준으로 좌,우,상,하 간격으로 블록을 배치함.
VerticalAlignment : "블록"을 수직 정렬함 (상하정렬)
FontSize : 블록 내부의 텍스트 크기를 설정함.
-> 이외 다양한 기능들이 있음... 하지만 xaml에서 정의하지 않는다면 각 기능들은 Default 값으로 설정됨.
/////////////////////////////////////////////////////////////////////////////////////////////
ComboBox 콤보박스
<ComboBox x:Name="comboTop" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Width="90" Height="25" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="66,5,0,0" />
구현된 모습의 PORT 옆의 블록이 콤보박스이다. 프로그램을 만들 때, 여러가지 리스트 중 사용자에게 고르게 하는 기능이 필요할 때 이용하면 좋다.
→ 콤보박스 프로그램 실행 중 모습
TextBlock과 위치, 사이즈 등의 기능 구현 방법은 동일하나 몇가지 다른 설정 기능이 있다.
↓
HorizontalContentAlignment : 콤보박스 내부 컨텐츠(항목)의 수평정렬
VerticalContentAlignment : 콤보박스 내부 컨텐츠(항목)의 수직정렬
Width, Height : 요소의 넓이, 높이 사이즈 조절 기능. 다른 기능에도 동일하게 적용됨.
/////////////////////////////////////////////////////////////////////////////////////////////
TextBox 텍스트박스
<TextBox x:Name="textBoxTopBaud" Text="115200" IsReadOnly="True" TextAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Width="90" Height="25" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="66,35,0,0" />구현된 모습 중 115200이라고 적힌 블록이 TextBox이다.
예를 들어.. 우리가 어떤 프로그램을 이용할 때 로그인 ID, PW를 입력하는 창이 TextBox라고 생각하면 된다. (이 프로그램에선 그런 용도로 쓰진 않았지만...)
TextBox 기능 설정 중...
IsReadOnly : 이 텍스트 박스를 읽기전용으로 사용할 것인가에 대한 Bool을 정의하는 기능이다. true 값을 설정하면, 프로그램 이용 시 해당 TextBox는 텍스트를 띄워놓는 기능(ReadOnly)만 수행하고, false를 설정시 프로그램 사용 중 TextBox 내부의 값을 수정(Read, Write)할 수 있게된다. Default 값은 false이다.
/////////////////////////////////////////////////////////////////////////////////////////////
Button 버튼
<Button Content="핀체크" Width="90" Height="25" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="66,65,0,0" Click="GetPinData" />
위 사진에 핀체크 라고 씌여진 블록이 버튼이다.
버튼은 우리가 아는 그 버튼이 맞다.
Button 기능 설정 몇가지...
Content : 버튼에 씌여질 텍스트를 설정할 수 있게 해줌.
Click : 프로그램 실행 시, 버튼을 "클릭"했을 때 발생하는 이벤트 함수를 정의할 수 있다.
void GetPinData(object sender, RoutedEventArgs e)
{
if (Store.getInstance().Serial.IsOpen)
{
Store.getInstance().Serial.Send("안녕하세요");
}
else
{
Store.getInstance().Log.WriteLog("포트가 열려있지 않습니다.");
}
}위의 코드는 위 버튼의 Click 이벤트를 정의한 함수이다.
프로그램을 실행시킨 뒤,
핀체크 버튼을 클릭하면
위의 GetPinData 함수가 동작,
시리얼 포트가 열려있으면 "안녕하세요" 메시지를 전송하고,
열려있지 않으면 로그에 "포트가 열려있지 않습니다." 를 출력하게된다.
사실 이외에도 여러가지 기능들이 있지만
개인적인 생각으로...
1. 레이아웃을 구분하는 "Grid",
2. 할당된 Grid 영역을 나누는 Row와 column의 Definition 개념,
3. 기타 내부 UI를 구성하는 TextBlock, TextBox 등의 요소,
4. 기능을 구현할 수 있는 Button.
정도만 이해하고 응용할 수 있으면 우리가 필요로하는 거의 모든 프로그램을 만들 수 있을 것으로 본다.
