2020년 7월 1일 수요일

WPF - Control

자주쓰이는 멤버


태그의 데이터 추가하는 방법


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
private void SetData()
{
    //comboCust.ItemsSource = GetData();
    comboCust.SelectedIndex = 0;
    comboCust.Items.Clear();

    foreach(var item in GetData())
    {
        ComboBoxItem ci = new ComboBoxItem();

        ci.Content = item.strName;
        comboCust.Items.Add(ci);
    }
    comboCido.ItemsSource = GetData_Sido();
}
cs

1. Items 에 직접 Item 관련 객체를 추가함.
2. ItemsSource 에 Item List 등 데이터 전체를 넣음.

텍스트 다루는 경우

:FontWeight, Size, Style, Stretch, Famly
TextTrimming : 크기 넘기면 ... 처리 등.

SelectionChanged

: 선택한게 바뀔 때 마다 호출되는 이벤트핸들러.
: TextBox, ComboBox, ListBox 등 선택이 들어갈법한 애들은 다 있음.



TextBlock

1
2
3
4
5
6
7
8
9
10
<TextBlock>
<Bold>(서울 연합 뉴스)</Bold> ㅇ룽ㄴ람ㄴ우리
<Underline>국가 안보 실장</Underline>
<Italic>정의용</Italic>
<Span FontSize="25">17-18</Span>
<LineBreak></LineBreak>
<Hyperlink NavigateUri="https://colorscripter.com" x:Name="Hyperlink_1" RequestNavigate="Hyperlink_1_RequestNavigate">미리보기</Hyperlink>
ㄴㅁㅇㄹㄴㅁㄹㄴㅁㄻ
ㄴㅁㄹㅇㄴㅁㄹ
</TextBlock>
cs

많은 글자를 쓸 수 있음.
Label 보다 가벼움.
굵게하기, 기울리기, 하이퍼링크 등등을 아래처럼 넣을 수 있음.


Label

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<StackPanel>
    <TextBox x:Name="txt1" Grid.Row="0" Grid.Column="1"/>
    <TextBox x:Name="txt2" Grid.Row="0" Grid.Column="1"/>
    <Label Grid.Row="0" Grid.Column="0" Content="성명(_N)" Target="{Binding ElementName=txt1}"/>
    <Label Target="{Binding ElementName=txt2}" FocusManager.FocusedElement="{Binding ElementName=txt2}">
        <Label.Content>
            <StackPanel Orientation="Horizontal">
                <Image Source="http://optimal.inven.co.kr/upload/2019/09/14/bbs/i14704161130.png" 
                        Width="24" Height="16" Margin="5, 0, 0, 0"/>
                <AccessText>전화번호(_T)</AccessText>
            </StackPanel>
        </Label.Content>
    </Label>
</StackPanel>
cs

짧은 글자에 사용.
기본 패딩이 들어가 있음.

Content 지원.
AccessText 가 지원됨. "(_A)" 면 Alt + A 를 누르면 지정된 곳으로 포커스 옮김.

위 예시에선 Alt + T, Alt + N 에 따라서 txt1, txt2 로 포커스가 바뀜


TextBox, PasswordBox

1
2
3
<TextBox x:Name="txt4" Grid.Row="6" Grid.Column="1" MinLines="5" Height="100" 
         AcceptsReturn="True" AcceptsTab="True" VerticalScrollBarVisibility="Auto"
         TextWrapping="Wrap" ToolTip="헤헤"/>
cs
text : 현재 입력된 텍스트가 있음.
maxLength : 최대 길이

TextWrapping : Wrap 시 보이는 크기를 넘어가면 다음줄에 보이도록 함.

AcceptsTab, AcceptsReturn : tab, enter 키가 입력 가능한지 여부
IsReadOnly : ㅈㄱㄴ

SelectionStart, SelectionLength, SelectedText : 드래그한 범위의 내용들, 클립보드 사용시 사용.
SelectioinChanged : 드래그 시 이벤트 핸들러 지정 가능

PasswordChar : PasswordBox 에서 안보이게 할 경우 뜰 글자. x 누르면 xxxxx



Button

Click : 클릭 시 호출되는 이벤트 핸들러


CheckBox, RadioButton

1
2
3
4
5
6
<WrapPanel x:Name="wrap_radio" Grid.Row="4" Grid.Column="1">
    <RadioButton Content="학생" GroupName="rd_gb"/>
    <RadioButton Content="주부" GroupName="rd_gb"/>
    <RadioButton Content="직장인" GroupName="rd_gb"/>
    <RadioButton Content="기타" GroupName="rd_gb" IsChecked="True"/>
</WrapPanel>
cs

차이는 RadioButton 에 GroupName 이 있다는 사실
GroupName 으로 묶인 것 끼리는 배타적으로 1개만 선택이 가능함.


ListBox

1
2
3
4
5
6
7
8
9
10
11
12
13
<ListBox SelectionMode="Multiple" HorizontalContentAlignment="Center">
    <ListBoxItem>
        <StackPanel Orientation="Horizontal">
            <Image Source="source.png" Width="20" Height="20"/>
            <TextBlock Margin="10, 0, 0 ,0" VerticalAlignment="Center">한국</TextBlock>
        </StackPanel>
    </ListBoxItem>
    <ListBoxItem>미국</ListBoxItem>
    <ListBoxItem>일본</ListBoxItem>
    <ListBoxItem>영국</ListBoxItem>
    <ListBoxItem>독일</ListBoxItem>
</ListBox>
 
cs

접하지 않은 트리와 비슷함.

ListBoxItem : Content 가 아니라 여기에 리스트의 아이템이 들어감.
HorizontalContentAlignment : Content 정렬용.
SelectionMode : 한번에 선택할 수 있는 아이템 여부. Extend 시 shift 로 연속선택 가능.

SelectionChanged : 선택 시 호출되는 이벤트.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ListBox Grid.Row="1" x:Name="listCust" HorizontalContentAlignment="Stretch" SelectionMode="Extended" SelectionChanged="listCust_SelectionChanged" >
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto"/>
                    <ColumnDefinition Width="auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" Text="{Binding strCustName}"/>
                <TextBlock Grid.Column="1" Text="{Binding strCustTel}" Margin="10, 0"/>
                <ProgressBar Grid.Column="2" Minimum="0" Maximum="100" Value="{Binding intPoint}"/>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>
 
cs

DataTemplate 을 지정해서 ItemsSource 에 들어와 있는 데이터를 반복적으로 읽어옴.

자세한건 데이터템플릿 참고.


ComboBox


ListBoxItem 이 ComboBoxItem 으로 바뀐 것 빼고는 ListBox 와 같음.

1
2
3
4
5
6
7
8
9
10
<ComboBox x:Name="comboCido" Grid.Row="0" Grid.Column="0" SelectionChanged ="comboCido_SelectionChanged">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding strCode}"/>
                <TextBlock Text="{Binding strName}"/>
            </StackPanel>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>
cs

위는 DataTemplate 예.


Menu

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<Menu>
    <MenuItem Header="파일(_F)">
        <MenuItem Header="새문서" Click="MenuItem_Click"/>
        <Separator/>
        <MenuItem Header="저장" Click="MenuItem_Click_2"/>
        <MenuItem Header="종료" Click="MenuItem_Click_1"/>
    </MenuItem>
    <MenuItem Header="편집(_E)">
        <MenuItem Header="잘라내기">
            <MenuItem.Icon>
                <Image Source="source.jpg"/>
            </MenuItem.Icon>
        </MenuItem>
        <Separator/>
        <MenuItem x:Name="menu_checkable" Header="체크가능" 
                  IsCheckable="True" IsChecked="False" Click="menu_checkable_Click"/>
    </MenuItem>
    <MenuItem Header="보기(_V)"/>
    <MenuItem Header="프로젝트(_P)"/>
</Menu>
cs

MenuItem 의 Tree 형태임.
MenuItem 과 Separator 로 거의 표현이 가능하다.
IsCheckable, Icon 등이 유별나다면 유별남.

(_V) 면 Alt + V 로 MenuItem 을 열 수 있음.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<Style TargetType="{x:Type MenuItem}">
    <Setter Property="Background" Value="{DynamicResource Background_Mid}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="MenuItem">
                <Border Name="Border">
                    <Grid>
                        <StackPanel Orientation="Horizontal">
                            <ContentPresenter Margin="6,3,6,3" ContentSource="Header" RecognizesAccessKey="True" />
 
                            <Grid Grid.Column="3" Margin="0,0,0,0" x:Name="ArrowPanel" VerticalAlignment="Center">
                                <Path x:Name="ArrowPanelPath" HorizontalAlignment="Right" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" Data="M0,0 L0,8 L4,4 z"/>
                            </Grid>
 
                        </StackPanel>
                        <Popup IsOpen="{Binding Path=IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Right" x:Name="SubMenuPopup" Focusable="false" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}">
                            <Border x:Name="SubMenuBorder" BorderBrush="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Menu}}}" BorderThickness="1" Padding="2,2,2,2">
                                <Grid x:Name="SubMenu" Grid.IsSharedSizeScope="True">
                                    <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle"/>
                                </Grid>
                            </Border>
                        </Popup>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="Role" Value="TopLevelHeader">
                        <Setter Property="Padding" Value="6,1,6,1"/>
                        <Setter Property="Placement" Value="Bottom" TargetName="SubMenuPopup"/>
                        <Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
                    </Trigger>
                    <Trigger Property="Role" Value="SubmenuItem">
                        <Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
                    </Trigger>
                    <Trigger Property="IsHighlighted" Value="true">
                        <Setter TargetName="Border" Property="Background" Value="{DynamicResource Background_Selected}"/>
                        <Setter TargetName="Border" Property="BorderBrush" Value="{DynamicResource Foregorund_Normal}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
cs

위는 Menu 커스텀한 것.
자세한건 ㄹㅇ 모르겠음


ContextMenu


1
2
3
4
5
6
7
8
9
10
<ContextMenu x:Key="cmenu_canvas">
    <MenuItem x:Name="canvase_cmenu1"  Header="메뉴 #1">
        <MenuItem.Icon>
            <Image Source="https://cdn.gamemeca.com/data_center/172/497/20190524103432.jpg"/>
        </MenuItem.Icon>
    </MenuItem>
    <MenuItem x:Name="canvase_cmenu2" Header="메뉴 #2" Click="canvase_cmenu2_Click"/>
    <Separator/>
    <MenuItem x:Name="canvase_cmenu3" Header="메뉴 #3"/>
</ContextMenu>
cs

1
2
ContextMenu cm =  this.FindResource("cmenu_canvas") as ContextMenu;
cm.IsOpen = true;
cs

ToolTip 과 비슷하게 마우스 위치에 뜨는 메뉴
근데 얘는 수동으로 열어줘야함.

내부에서 MenuItem 사용하는걸 참고.
Style Template 은 이거 참고.


ToolBar

1
2
3
4
5
6
7
8
9
<ToolBar DockPanel.Dock="Top">
    <Button Margin="3">
        <Button.Content>
            <Image x:Name="image" Source="https://cdn.gamemeca.com/data_center/172/497/20190524103432.jpg" Width="10" Height="10" />
        </Button.Content>
    </Button>
    <Button Content="button2" Margin="3"/>
    <Button Content="button3" Margin="3"/>
</ToolBar>
cs

Menu랑 비슷한데 끝부분에 이둥할 수 있는 속성이 있음?


Slider

1
2
3
4
5
<StackPanel VerticalAlignment="Center">
    <TextBox Text="{Binding ElementName=Slider, Path=Value}" HorizontalContentAlignment="Center" Width="100"/>
    <Slider x:Name="Slider" Minimum="0" Maximum="100" VerticalAlignment="Center" Width="100" 
                TickFrequency="5" TickPlacement="Both" IsSnapToTickEnabled="True" ValueChanged="Slider_ValueChanged"/>
</StackPanel>
cs

Tick

: 슬라이더 옵션에서 쓰이는 최소 단위
: TickFrequency 로 단위를 설정하고
: TickPlacement 로 눈금자를 보이게 하고
: IsSnapToTickEnabled 로 슬라이더의 값이 Tick 단위로 움직이게 함.

ValueChanged: 값이 변경되었을 때 호출되는 이벤트핸들러.
Value : 값. 이 멤버변수를 코드에서 변경해도 됨.


ProgressBar


1
2
<ProgressBar x:Name="pb"  Width="200" VerticalAlignment="Center" Height="30"
             Minimum="0" Maximum="100" Value="30" IsIndeterminate="False"/>
cs

Value 는 현재 값.
IsIndeterminate 는 언제 ProgressBar 가 끝날지 몰라 퍼센트를 보이는게 아닌 무한 로딩중으로 표시하는 것. 


TabControl

selectedIndex 를 코드에서 바꾸면 탭 선택 가능.




라벨:

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)

List