WPF Control

• Button
• RepeatButton
• DataGrid
• TreeView
• Calendar
• DatePicker
• ContextMenu
• Menu
• ToolBar
• CheckBox
• ComboBox
• ListBox
• RadioButton
• Slider
• TabControl
• Label
• ProgressBar
• StatusBar
• TextBlock
• Popup
• ToolTip
• TextBox
• Image
• MediaElement

Button

 일반적인 버튼

 

RepeatButton

 버튼을 클릭한 상태로 있으면 Delay 후에 Interval 만큼 연속적으로 클릭한다.

(WM_LBUTTONDOWN 메시지가 들어간 상태로 UP 메시지가 아직 들어가지 않은 상태라고 생각하면 된다.)

속성값	설명
Delay (ms)	클릭한 상태를 판단하기 위한 딜레이? Delay 만큼 클릭한 상태로 있으면 반복해서 클릭된다.
Interval (ms)	반복해서 클릭하는 상태가 되었을 때 Interval 시간 간격으로 클릭된다.

 

DataGrid

p84~p94 참고.

 

DataGridExample.zip

0.01MB

 

TreeView

        <TreeView>
            <TreeViewItem Header="1">
                <TreeViewItem Header="1-1">
                    <TreeViewItem Header="1-1-1" />
                </TreeViewItem>
                <TreeViewItem Header="1-2" />
                <TreeViewItem Header="1-3" />
                <TreeViewItem Header="1-4" />
            </TreeViewItem>
        </TreeView>

 

<!-- 아래와 같은 식으로도 가능하다.
 StackPanel 안에 이미지 컨트롤을 넣으면 이미지도 추가가 된다. -->
 
<TreeView>
    <TreeViewItem>
    	<TreeViewItem.Header>
	    	<StackPanel>
   	    	 	<TextBlock Text="test" />
 		    </StackPanel>
    	<TreeViewItem.Header>
    </TreeViewItem>
</TreeView>

 

Calender

 

<Calendar x:Name="calender" SelectionMode="MultipleRange" />

 

기본적으로 Calendar 만으로도 생성이 가능하며, 기간으로 여러 날짜를 정하고 싶은 경우 MultipleRange 로 선택이 가능하다.

this.calendar.BlackoutDates

 

Calendar 의 BlackoutDates 객체를 통해 선택 불가능한 날짜를 정할 수 있다.

 

DatePicker

 

<DatePicker SelectedDateFormat="Long" />

 

<DatePicker SelectedDateFormat="Short" />

 

 

 

ContextMenu

 

<Border Background="Red" BorderThickness="1" BorderBrush="Black"  Width="100" Height="100">
    <Border.ContextMenu>
        <ContextMenu>
            <MenuItem Header="메뉴 1">
                <MenuItem Header="메뉴 1-1" />
                <MenuItem Header="메뉴 1-2" />
                <MenuItem Header="메뉴 1-3" Click="EventClick" />
            </MenuItem>
            <MenuItem Header="메뉴 2" />
            <MenuItem Header="메뉴 3" />
            <MenuItem Header="메뉴 4" />
        </ContextMenu>
    </Border.ContextMenu>
</Border>

 

Menu

 

<Menu>
    <MenuItem Header="메뉴 1">
        <MenuItem Header="메뉴 1-1" />
        <MenuItem Header="메뉴 1-2" />
        <MenuItem Header="메뉴 1-3" />
    </MenuItem>
    <MenuItem Header="메뉴 2" />
    <MenuItem Header="메뉴 3" />
</Menu>

 

 

여기서 알아둬야할 것은 특별한 크기나 레이아웃을 지정해주지 않으면

 

창 전체가 메뉴의 background 색으로 바뀌게 된다는 점이다 -_- ;;;

 

레이아웃을 편성할 때 이 부분을 조금 주의할 필요가 있어보인다.

 

Toolbar

 

<ToolBarTray>
    <ToolBar>
        <Button Content="버튼1" />
        <Button Content="버튼2" />
        <Separator />
        <CheckBox Content="버튼3" />
    </ToolBar>
    <ToolBar>
        <Button Content="버튼4" />
        <Button Content="버튼5" />
        <Separator />
        <ToggleButton Content="버튼6" />
    </ToolBar>
</ToolBarTray>

 

빨간색 원형 부분을 통해 해당 메뉴를 좌, 우, 상, 하로 이동가능.

 

Band, BandIndex 를 통해 해당 Toolbar 가 왼쪽에 있는지 아래가 있는지 등 판별 가능.

 

 

CheckBox

ComboBox

ListBox

 

해당 설명은 패스.

 

RadioButton

 

<RadioButton GroupName="group1" Content="Button 1-1" />
<RadioButton GroupName="group1" Content="Button 1-2" />
<RadioButton GroupName="group2" Content="Button 2-1" />
<RadioButton GroupName="group2" Content="Button 2-2" />
<RadioButton GroupName="group2" Content="Button 2-3" />

 

RadioButton 의 그룹 설정 방법만 확인.

 

Slider

 

<StackPanel>
    <Slider x:Name="slider" Maximum="50" Minimum="0" Value="10" />
    <TextBlock Text="{Binding Value ,ElementName=slider}"/>
</StackPanel>

 

<StackPanel Margin="5" Orientation="Horizontal"> 
    <Slider x:Name="slider" 
            Minimum="10" 
            Maximum="100"  
            SmallChange="1"  
            LargeChange="10"  
            TickPlacement="BottomRight" 
            Orientation="Vertical"/> 
    <TextBlock Text="{Binding Value, ElementName=slider}" /> 
</StackPanel> 

위 코드는 세로로 슬린더를 작성한 예

 

TabControl

 

<TabControl>
    <TabItem Header="텝 아이템 1">
        <TextBlock Text="Tab Item 1" />
    </TabItem>
    <TabItem Header="텝 아이템 2">
        <TextBlock Text="Tab Item 2" />
    </TabItem>
    <TabItem Header="텝 아이템 3">
        <TextBlock Text="Tab Item 3" />
    </TabItem>
</TabControl>

기본적인 텝컨트롤은 위와 같이 작성할 수 있다.

 

데이터 바인딩을 한다면 아래와 같이도 작성할 수 있다.

 

<TabControl x:Name="tabControl"> 
    <TabControl.ItemTemplate> 
        <DataTemplate> 
            <TextBlock Text="{Binding Name}" /> 
        </DataTemplate> 
    </TabControl.ItemTemplate> 
    <TabControl.ContentTemplate> 
        <DataTemplate> 
            <Grid> 
                <Grid.RowDefinitions> 
                    <RowDefinition Height="Auto"/> 
                    <RowDefinition Height="Auto"/> 
                </Grid.RowDefinitions> 
                <Grid.ColumnDefinitions> 
                    <ColumnDefinition Width="Auto" /> 
                    <ColumnDefinition /> 
                </Grid.ColumnDefinitions> 
                <Label Grid.Row="0" Grid.Column="0" Content="나이" /> 
                <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Name}"  
VerticalAlignment="Center" /> 
                <Label Grid.Row="1" Grid.Column="0" Content="연령" /> 
                <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Age}"  
VerticalAlignment="Center" /> 
            </Grid> 
        </DataTemplate> 
    </TabControl.ContentTemplate> 
</TabControl> 

 

Label

 

패스

 

 

ProgressBar

 

<StackPanel>
    <ProgressBar Maximum="100" Value="30" Height="25" />
    <ProgressBar IsIndeterminate="True" Height="25" />
</StackPanel>

 

StatusBar

 

<StackPanel>
    <StatusBar>
        <StatusBarItem>
            <TextBlock Text="상태" />
        </StatusBarItem>
        <StatusBarItem>
            <ProgressBar IsIndeterminate="True" Width="150" Height="10"/>
        </StatusBarItem>
        <StatusBarItem>
            <TextBlock Text="준비중..."/>
        </StatusBarItem>
    </StatusBar>
</StackPanel>

 

TextBlock

 

<TextBlock>
    <Run Text="test1" />
    <Hyperlink NavigateUri="https://hirudev.tistory.com/">hirudev</Hyperlink>
    <Run FontFamily="궁서체" FontWeight="Bold" Foreground="Red" Text="진지합니다." />
    <LineBreak />
    <Run Text="test2" />
</TextBlock>

 

Popup

 

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
    <Button Content="Click" Click="EventClick" />
    <Popup x:Name="popup1" Placement="Top">
        <TextBlock Text="Popup Window" Background="White" Foreground="Black" />
    </Popup>
</StackPanel>

 

public void EventClick(object sender, EventArgs e)
{
    this.popup1.IsOpen = !this.popup1.IsOpen;
}

 

Win32API, MFC 때는 윈도우로 제공했던 것을 하나의 컨트롤로 제공하는 듯하다.

 

 

ToolTip

 

<StackPanel>
    <Button Content="Tooltip button">
        <Button.ToolTip>
            <ToolTip>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="마우스를 길게 대보세요." />
                </StackPanel>
            </ToolTip>
        </Button.ToolTip>
    </Button>
</StackPanel>

 

 

 

TextBox

 

패스 (EditBox)

 

Image

 

그림을 표시하기 위한 컨트롤로 Source 를 지정해주고 필요에 따라서 Stretch 정도를 설정해주면 된다.

 

MediaElement

 

Image 와 마찬가지로 Source 를 지정해주면 된다.

LoadedBehavior 을 Manual 로 설정해줌으로써 Play, Stop, Pause 등을 설정할 수 있다.