XAML 100제

4/18/2023
34 minutes to read

TextBlock: 단순한 텍스트를 표시하는 예제

<TextBlock Text="Hello, World!" />

Button: 클릭할 수 있는 버튼을 만드는 예제

<Button Content="Click me!" />

Image: 이미지를 표시하는 예제

<Image Source="image.jpg" />

StackPanel: 여러 개의 UI 요소를 쌓아서 표시하는 예제

<StackPanel>
    <TextBlock Text="First" />
    <TextBlock Text="Second" />
    <TextBlock Text="Third" />
</StackPanel>

Grid: 표 형태로 UI 요소를 배치하는 예제

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <TextBlock Text="Header" />
    <StackPanel Grid.Row="1">
        <TextBlock Text="Content 1" />
        <TextBlock Text="Content 2" />
        <TextBlock Text="Content 3" />
    </StackPanel>
</Grid>

ListBox: 아이템 목록을 표시하는 예제

<ListBox>
    <ListBoxItem Content="Item 1" />
    <ListBoxItem Content="Item 2" />
    <ListBoxItem Content="Item 3" />
</ListBox>

CheckBox: 선택할 수 있는 체크박스를 만드는 예제

<CheckBox Content="Check me!" />

RadioButton: 여러 개 중 하나를 선택할 수 있는 라디오버튼을 만드는 예제

<StackPanel>
    <RadioButton Content="Option 1" />
    <RadioButton Content="Option 2" />
    <RadioButton Content="Option 3" />
</StackPanel>

TextBox: 입력할 수 있는 텍스트 상자를 만드는 예제

<TextBox Text="Type here!" />

ComboBox: 선택할 수 있는 드롭다운 목록을 만드는 예제

<ComboBox>
    <ComboBoxItem Content="Option 1" />
    <ComboBoxItem Content="Option 2" />
    <ComboBoxItem Content="Option 3" />
</ComboBox>

Slider: 값의 범위를 슬라이딩으로 조정할 수 있는 예제

<Slider Value="50" Minimum="0" Maximum="100" />

ProgressBar: 진행 상태를 나타내는 바를 만드는 예제

<ProgressBar Value="50" Minimum="0" Maximum="100" />

DatePicker: 날짜를 선택할 수 있는 예제

<DatePicker />

TimePicker: 시간을 선택할 수 있는 예제

<TimePicker />

GridSplitter: Grid 컨트롤 내의 영역을 분할하는 예제

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Column="0" Text="Column 1" />
    <GridSplitter Grid.Column="1" Width="5" />
    <TextBlock Grid.Column="2" Text="Column 2" />
</Grid>

Border: UI 요소를 묶어주는 경계선을 만드는 예제

<Border BorderBrush="Black" BorderThickness="2">
    <TextBlock Text="Hello, World!" />
</Border>

Ellipse: 원형 UI 요소를 만드는 예제

<Ellipse Width="100" Height="100" Fill="Blue" />

Rectangle: 직사각형 UI 요소를 만드는 예제

<Rectangle Width="100" Height="50" Fill="Red" />

Canvas: 좌표 기반의 UI 요소 배치를 가능하게 하는 예제

<Canvas>
    <Ellipse Width="100" Height="100" Fill="Blue" Canvas.Left="50" Canvas.Top="50" />
    <Rectangle Width="100" Height="50" Fill="Red" Canvas.Left="150" Canvas.Top="150" />
</Canvas>

Style: UI 요소의 스타일을 일괄적으로 지정하는 예제

<Window.Resources>
    <Style TargetType="TextBlock">
        <Setter Property="FontSize" Value="20" />
        <Setter Property="FontWeight" Value="Bold" />
    </Style>
</Window.Resources>
<TextBlock Text="Hello, World!" />
<TextBlock Text="Hello, World!" />
<TextBlock Text="Hello, World!" />

AdornedElementPlaceholder: 데이터 유효성 검사를 위한 UI 요소를 표시하는 예제

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Label Grid.Row="0" Content="Name:" />
    <TextBox Grid.Row="0" Margin="5,0,0,0" Width="150" x:Name="NameTextBox" />
    <AdornedElementPlaceholder Grid.Row="1" />
    <Button Grid.Row="2" Content="Submit" />
    <Style TargetType="{x:Type TextBox}">
        <Style.Triggers>
            <Trigger Property="Validation.HasError" Value="true">
                <Setter Property="ToolTip" Value="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=(Validation.Errors)[0].ErrorContent}" />
            </Trigger>
        </Style.Triggers>
    </Style>
    <Validation.ErrorTemplate>
        <ControlTemplate>
            <DockPanel LastChildFill="True">
                <Border BorderBrush="Red" BorderThickness="2">
                    <AdornedElementPlaceholder />
                </Border>
                <TextBlock Text="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=(Validation.Errors)[0].ErrorContent}" Foreground="Red" />
            </DockPanel>
        </ControlTemplate>
    </Validation.ErrorTemplate>
    <Binding Path="Name" ElementName="NameTextBox" UpdateSourceTrigger="PropertyChanged" ValidatesOnDataErrors="True" />
</Grid>

DataGrid: 데이터를 표시하는 그리드를 만드는 예제

<DataGrid ItemsSource="{Binding Customers}" AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Name" Binding="{Binding Name}" />
        <DataGridTextColumn Header="Age" Binding="{Binding Age}" />
        <DataGridTextColumn Header="Address" Binding="{Binding Address}" />
    </DataGrid.Columns>
</DataGrid>

ListBox with DataTemplate: 데이터 템플릿을 사용한 ListBox 예제

<ListBox ItemsSource="{Binding Items}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Name}" />
                <TextBlock Text="{Binding Age}" />
                <TextBlock Text="{Binding Address}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

ComboBox with DataTemplate: 데이터 템플릿을 사용한 ComboBox 예제

<ComboBox ItemsSource="{Binding Items}">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Name}" />
                <TextBlock Text="{Binding Age}" />
                <TextBlock Text="{Binding Address}" />
            </StackPanel>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

DockPanel: UI 요소를 도킹하여 배치하는 예제

<DockPanel>
    <Button DockPanel.Dock="Top" Content="Top" Height="30" />
    <Button DockPanel.Dock="Left" Content="Left" Width="100" />
    <Button DockPanel.Dock="Right" Content="Right" Width="100" />
    <Button DockPanel.Dock="Bottom" Content="Bottom" Height="30" />
    <TextBlock Text="Fill" />
</DockPanel>

UniformGrid: 일정한 크기의 셀을 가진 그리드를 만드는 예제

<UniformGrid Rows="3" Columns="3">
    <Button Content="1" />
    <Button Content="2" />
    <Button Content="3" />
    <Button Content="4" />
    <Button Content="5" />
    <Button Content="6" />
    <Button Content="7" />
    <Button Content="8" />
    <Button Content="9" />
</UniformGrid>

MediaElement: 오디오나 비디오를 재생하는 예제

<MediaElement Source="video.mp4" Width="640" Height="480" />

ToolTip: UI 요소에 대한 툴팁을 만드는 예제

<TextBlock Text="Hover me!">
    <TextBlock.ToolTip>
        <ToolTip>
            <TextBlock Text="Hello, World!" />
        </ToolTip>
    </TextBlock.ToolTip>
</TextBlock>

ScrollViewer: 스크롤 기능을 가진 UI 요소를 만드는 예제

<ScrollViewer>
    <StackPanel>
        <TextBlock Text="Line 1" />
        <TextBlock Text="Line 2" />
        <TextBlock Text="Line 3" />
        <TextBlock Text="Line 4" />
        <TextBlock Text="Line 5" />
        <TextBlock Text="Line 6" />
        <TextBlock Text="Line 7" />
        <TextBlock Text="Line 8" />
        <TextBlock Text="Line 9" />
        <TextBlock Text="Line 10" />
    </StackPanel>
</ScrollViewer>

Path: 기하학적 모양을 만드는 예제

<Path Stroke="Black" StrokeThickness="2" Fill="LightGray" Data="M 10,10 L 50,50 L 10,50 Z" />

Canvas with Path: Canvas에 Path를 배치하는 예제

<Canvas>
    <Path Stroke="Black" StrokeThickness="2" Fill="LightGray" Data="M 10,10 L 50,50 L 10,50 Z" Canvas.Left="100" Canvas.Top="100" />
</Canvas>

TreeView: 계층 구조를 가진 아이템 목록을 만드는 예제

<TreeView>
    <TreeViewItem Header="Item 1">
        <TreeViewItem Header="Item 1.1" />
        <TreeViewItem Header="Item 1.2" />
        <TreeViewItem Header="Item 1.3" />
    </TreeViewItem>
    <TreeViewItem Header="Item 2">
        <TreeViewItem Header="Item 2.1" />
        <TreeViewItem Header="Item 2.2" />
        <TreeViewItem Header="Item 2.3" />
    </TreeViewItem>
    <TreeViewItem Header="Item 3">
        <TreeViewItem Header="Item 3.1" />
        <TreeViewItem Header="Item 3.2" />
        <TreeViewItem Header="Item 3.3" />
    </TreeViewItem>
</TreeView>

TabControl: 여러 개의 탭으로 구성된 UI 요소를 만드는 예제

<TabControl>
    <TabItem Header="Tab 1">
        <TextBlock Text="Content of Tab 1" />
    </TabItem>
    <TabItem Header="Tab 2">
        <TextBlock Text="Content of Tab 2" />
    </TabItem>
    <TabItem Header="Tab 3">
        <TextBlock Text="Content of Tab 3" />
    </TabItem>
</TabControl>

DatePicker with binding: 데이터 바인딩을 사용한 DatePicker 예제

<StackPanel>
    <TextBlock Text="Date of Birth:" />
    <DatePicker SelectedDate="{Binding DateOfBirth}" />
</StackPanel>

TextBox with input validation: 입력값 유효성 검사를 하는 TextBox 예제

<StackPanel>
    <TextBox x:Name="AgeTextBox" />
    <TextBlock Text="Please enter a number." Visibility="{Binding ElementName=AgeTextBox, Path=(Validation.HasError), Converter={StaticResource BoolToVisibilityConverter}}" Foreground="Red" />
</StackPanel>

ItemsControl with DataTemplate: 데이터 템플릿을 사용한 ItemsControl 예제

<ItemsControl ItemsSource="{Binding Items}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Name}" />
                <TextBlock Text="{Binding Age}" />
                <TextBlock Text="{Binding Address}" />
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

ListBox with binding: 데이터 바인딩을 사용한 ListBox 예제

<ListBox ItemsSource="{Binding Items}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Name}" />
                <TextBlock Text="{Binding Age}" />
                <TextBlock Text="{Binding Address}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

ComboBox with binding: 데이터 바인딩을 사용한 ComboBox 예제

```xml
<ComboBox ItemsSource="{Binding Items}" DisplayMemberPath="Name" SelectedValuePath="Age" SelectedValue="{Binding SelectedAge}" />

ContextMenu: UI 요소에 대한 컨텍스트 메뉴를 만드는 예제

<TextBlock Text="Right-click me!" ContextMenu="{StaticResource MyContextMenu}" />
<ContextMenu x:Key="MyContextMenu">
    <MenuItem Header="Cut" />
    <MenuItem Header="Copy" />
    <MenuItem Header="Paste" />
</ContextMenu>

Expander: UI 요소를 접고 펼치는 예제

<Expander Header="Advanced Options">
    <StackPanel>
        <CheckBox Content="Option 1" />
        <CheckBox Content="Option 2" />
        <CheckBox Content="Option 3" />
    </StackPanel>
</Expander>

Border: UI 요소에 경계선을 추가하는 예제

<Border BorderThickness="1" BorderBrush="Black">
    <TextBlock Text="Hello, World!" />
</Border>

ProgressBar with binding: 데이터 바인딩을 사용한 ProgressBar 예제

<ProgressBar Value="{Binding Progress}" Minimum="0" Maximum="100" />

Grid with star sizing: Star 단위를 사용한 Grid 예제

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0" Text="Header" />
    <TextBlock Grid.Row="1" Text="Content" />
    <Button Grid.Row="2" Content="Footer" />
</Grid>

Menu: 메뉴 바를 만드는 예제

<Menu>
    <MenuItem Header="File">
        <MenuItem Header="New" />
        <MenuItem Header="Open" />
        <MenuItem Header="Save" />
    </MenuItem>
    <MenuItem Header="Edit">
        <MenuItem Header="Cut" />
        <MenuItem Header="Copy" />
        <MenuItem Header="Paste" />
    </MenuItem>
    <MenuItem Header="Help">
        <MenuItem Header="About" />
    </MenuItem>
</Menu>

DataTemplateSelector: 데이터 템플릿을 선택하는 예제

<ListBox ItemsSource="{Binding Items}">
    <ListBox.ItemTemplateSelector>
        <local:MyDataTemplateSelector>
            <local:MyDataTemplateSelector.ItemTemplate1>
                <DataTemplate>
                    <TextBlock Text="{Binding Name}" />
                </DataTemplate>
            </local:MyDataTemplateSelector.ItemTemplate1>
            <local:MyDataTemplateSelector.ItemTemplate2>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Name}" />
                        <TextBlock Text="{Binding Age}" />
                        <TextBlock Text="{Binding Address}" />
                    </StackPanel>
                </DataTemplate>
            </local:MyDataTemplateSelector.ItemTemplate2>
        </local:MyDataTemplateSelector>
    </ListBox.ItemTemplateSelector>
</ListBox>

DataTrigger: 데이터 값에 따라 UI 요소의 상태를 변경하는 예제

<TextBlock>
    <TextBlock.Style>
        <Style TargetType="{x:Type TextBlock}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsOnline}" Value="True">
                    <Setter Property="Foreground" Value="Green" />
                    <Setter Property="Text" Value="Online" />
                </DataTrigger>
                <DataTrigger Binding="{Binding IsOnline}" Value="False">
                    <Setter Property="Foreground" Value="Red" />
                    <Setter Property="Text" Value="Offline" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </TextBlock.Style>
</TextBlock>

TabItem with binding: 데이터 바인딩을 사용한 TabItem 예제

<TabControl ItemsSource="{Binding Tabs}">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Header}" />
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Content}" />
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

StatusBar: 상태 바를 만드는 예제

<StatusBar>
    <StatusBarItem Content="Item 1" />
    <StatusBarItem Content="Item 2" />
    <StatusBarItem Content="Item 3" />
</StatusBar>

ToolBar: 툴바를 만드는 예제

<ToolBar>
    <Button Content="New" />
    <Button Content="Open" />
    <Button Content="Save" />
</ToolBar>

Slider with binding: 데이터 바인딩을 사용한 Slider 예제

<Slider Value="{Binding Volume}" Minimum="0" Maximum="100" />

ListBox with grouping: 그룹화된 ListBox 예제

<ListBox ItemsSource="{Binding Items}">
    <ListBox.GroupStyle>
        <GroupStyle HeaderTemplate="{StaticResource MyHeaderTemplate}" />
    </ListBox.GroupStyle>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}" />
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

PasswordBox: 비밀번호를 입력하는 예제

<PasswordBox />

RadioButton with binding: 데이터 바인딩을 사용한 RadioButton 예제

<RadioButton Content="Option 1" IsChecked="{Binding IsOption1}" />
<RadioButton Content="Option 2" IsChecked="{Binding IsOption2}" />
<RadioButton Content="Option 3" IsChecked="{Binding IsOption3}" />

Image: 이미지를 표시하는 예제

<Image Source="image.jpg" Width="200" Height="200" />

InkCanvas: 손으로 그림을 그리는 예제

<InkCanvas />

DatePicker with binding and validation: 데이터 바인딩과 유효성 검사를 사용한 DatePicker 예제

<StackPanel>
    <TextBlock Text="Date of Birth:" />
    <DatePicker SelectedDate="{Binding DateOfBirth, ValidatesOnDataErrors=True}" />
    <TextBlock Text="{Binding (Validation.Errors)[0].ErrorContent}" Foreground="Red" />
</StackPanel>

ContextMenu with binding: 데이터 바인딩을 사용한 컨텍스트 메뉴 예제

<TextBlock Text="Right-click me!" ContextMenu="{Binding ContextMenu}" />
MediaElement with controls: 제어 버튼이 있는 MediaElement 예제

```xml
<MediaElement Source="video.mp4" Width="640" Height="480" LoadedBehavior="Manual" />
<Button Content="Play" Command="{Binding PlayCommand}" />
<Button Content="Pause" Command="{Binding PauseCommand}" />
<Button Content="Stop" Command="{Binding StopCommand}" />

Expander with binding: 데이터 바인딩을 사용한 Expander 예제

<Expander Header="{Binding Header}" IsExpanded="{Binding IsExpanded}">
    <TextBlock Text="{Binding Content}" />
</Expander>

PasswordBox with binding: 데이터 바인딩을 사용한 PasswordBox 예제

<PasswordBox Password="{Binding Password}" />

Image with binding: 데이터 바인딩을 사용한 Image 예제

<Image Source="{Binding ImageUrl}" Width="200" Height="200" />

RichTextBox: 서식 있는 텍스트를 입력할 수 있는 RichTextBox 예제

<RichTextBox>
    <FlowDocument>
        <Paragraph>
            <Run FontWeight="Bold" Text="Hello," />
            <Run FontStyle="Italic" Text=" World!" />
        </Paragraph>
    </FlowDocument>
</RichTextBox>

DataGrid with binding: 데이터 바인딩을 사용한 DataGrid 예제

<DataGrid ItemsSource="{Binding Items}" AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Name" Binding="{Binding Name}" />
        <DataGridTextColumn Header="Age" Binding="{Binding Age}" />
        <DataGridTextColumn Header="Address" Binding="{Binding Address}" />
    </DataGrid.Columns>
</DataGrid>

Calendar: 달력을 표시하는 예제

<Calendar />

MenuItem with binding: 데이터 바인딩을 사용한 MenuItem 예제

<MenuItem Header="{Binding Header}" Command="{Binding Command}" />

Popup: 팝업을 만드는 예제

<Button Content="Show Popup">
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
            <BeginStoryboard>
                <Storyboard>
                    <BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen">
                        <DiscreteBooleanKeyFrame KeyTime="0" Value="True" />
                    </BooleanAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
</Button>
<Popup IsOpen="False">
    <TextBlock Text="Hello, Popup!" />
</Popup>

ScrollViewer: 스크롤 가능한 UI 요소를 만드는 예제

<ScrollViewer>
    <StackPanel>
        <TextBlock Text="Item 1" />
        <TextBlock Text="Item 2" />
        <TextBlock Text="Item 3" />
        <TextBlock Text="Item 4" />
        <TextBlock Text="Item 5" />
        <TextBlock Text="Item 6" />
        <TextBlock Text="Item 7" />
        <TextBlock Text="Item 8" />
        <TextBlock Text="Item 9" />
        <TextBlock Text="Item 10" />
    </StackPanel>
</ScrollViewer>

Path: 도형을 그리는 예제

<Path Stroke="Black" Fill="Red" Data="M10,10 L100,10 L100,100 L10,100 z" />
TextBlock with binding: 데이터 바인딩을 사용한 TextBlock 예제

```xml
<TextBlock Text="{Binding Message}" />

Canvas: UI 요소를 자유롭게 배치하는 Canvas 예제

<Canvas>
    <Rectangle Canvas.Left="10" Canvas.Top="10" Width="100" Height="100" Fill="Red" />
    <Ellipse Canvas.Left="50" Canvas.Top="50" Width="100" Height="100" Fill="Blue" />
    <TextBlock Canvas.Left="100" Canvas.Top="100" Text="Hello, World!" />
</Canvas>

Separator: UI 요소를 구분하는 Separator 예제

<StackPanel>
    <Button Content="Button 1" />
    <Separator />
    <Button Content="Button 2" />
    <Separator />
    <Button Content="Button 3" />
</StackPanel>

TreeView with binding: 데이터 바인딩을 사용한 TreeView 예제

<TreeView ItemsSource="{Binding Items}">
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding Children}">
            <TextBlock Text="{Binding Name}" />
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

ToolTip: 툴팁을 표시하는 예제

<TextBlock Text="Hover over me for a tooltip.">
    <TextBlock.ToolTip>
        <ToolTip Content="Hello, World!" />
    </TextBlock.ToolTip>
</TextBlock>

ListBox with binding and validation: 데이터 바인딩과 유효성 검사를 사용한 ListBox 예제

<ListBox ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedItem, ValidatesOnDataErrors=True}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}" />
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>
<TextBlock Text="{Binding (Validation.Errors)[0].ErrorContent}" Foreground="Red" />

Viewbox: UI 요소를 크기에 맞게 확대/축소하는 예제

<Viewbox>
    <TextBlock Text="Hello, World!" />
</Viewbox>

RadioButton with group name: RadioButton을 그룹화하는 예제

<StackPanel>
    <RadioButton Content="Option 1" GroupName="Group1" />
    <RadioButton Content="Option 2" GroupName="Group1" />
    <RadioButton Content="Option 3" GroupName="Group1" />
</StackPanel>

ScrollBar with binding: 데이터 바인딩을 사용한 ScrollBar 예제

<ScrollBar Value="{Binding ScrollPosition}" Minimum="0" Maximum="{Binding ScrollMaximum}" Orientation="Horizontal" />

FlowDocumentScrollViewer: 문서를 스크롤하는 FlowDocumentScrollViewer 예제

<FlowDocumentScrollViewer>
    <FlowDocument>
        <Paragraph>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat neque nec arcu ultricies, ac cursus velit sollicitudin. Nam consectetur, risus vel aliquam placerat, erat mauris malesuada mi, eu auctor tellus metus vitae risus. Nulla vel hendrerit tellus, vel malesuada risus. Vivamus suscipit id nisl eget blandit. Quisque euismod dolor sit amet est bibendum, sed sollicitudin nisl vehicula.
        </Paragraph>
        <Paragraph>
            Fusce in sapien id turpis dictum consectetur. Nam viverra tincidunt risus non dignissim. Proin eu mi nisl. Etiam ac purus vel velit aliquet tincidunt vel nec dolor. In eget ligula ut risus pharetra hendrerit. Sed vel consequat nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc lobortis mi eu dolor vestibulum, non varius elit pretium. Praesent venenatis enim in lorem aliquam convallis.
        </Paragraph>
    </FlowDocument>
</FlowDocumentScrollViewer>

WrapPanel: UI 요소를 자동으로 줄바꿈하는 WrapPanel 예제

<WrapPanel>
    <Button Content="Button 1" />
    <Button Content="Button 2" />
    <Button Content="Button 3" />
    <Button Content="Button 4" />
    <Button Content="Button 5" />
    <Button Content="Button 6" />
    <Button Content="Button 7" />
    <Button Content="Button 8" />
    <Button Content="Button 9" />
    <Button Content="Button 10" />
</WrapPanel>

ComboBox with binding: 데이터 바인딩을 사용한 ComboBox 예제

<ComboBox ItemsSource="{Binding Items}" DisplayMemberPath="Name" SelectedValuePath="Id" SelectedValue="{Binding SelectedItemId}" />

UniformGrid: UI 요소를 균등하게 배치하는 UniformGrid 예제

<UniformGrid Rows="3" Columns="3">
    <Button Content="Button 1" />
    <Button Content="Button 2" />
    <Button Content="Button 3" />
    <Button Content="Button 4" />
    <Button Content="Button 5" />
    <Button Content="Button 6" />
    <Button Content="Button 7" />
    <Button Content="Button 8" />
    <Button Content="Button 9" />
</UniformGrid>

WebBrowser: 웹 페이지를 표시하는 WebBrowser 예제

<WebBrowser Source="http://www.google.com" />

CheckBox with binding: 데이터 바인딩을 사용한 CheckBox 예제

<CheckBox Content="Check me!" IsChecked="{Binding IsChecked}" />

NumericUpDown with binding: 데이터 바인딩을 사용한 NumericUpDown 예제

<StackPanel>
    <TextBlock Text="{Binding Value}" />
    <StackPanel Orientation="Horizontal">
        <Button Content="-" Command="{Binding DecreaseValue}" />
        <TextBox Text="{Binding Value}" />
        <Button Content="+" Command="{Binding IncreaseValue}" />
    </StackPanel>
</StackPanel>

StatusBar: 상태 표시줄을 만드는 StatusBar 예제

<StatusBar>
    <StatusBarItem Content="Item 1" />
    <Separator />
    <StatusBarItem Content="Item 2" />
    <Separator />
    <StatusBarItem Content="Item 3" />
</StatusBar>

MediaElement: 오디오/비디오 파일을 재생하는 MediaElement 예제

<MediaElement Source="media/sample.mp4" />

ContextMenu with binding: 데이터 바인딩을 사용한 ContextMenu 예제

<Button Content="Right-click me!">
    <Button.ContextMenu>
        <ContextMenu ItemsSource="{Binding MenuItems}">
            <ContextMenu.ItemContainerStyle>
                <Style TargetType="MenuItem">
                    <Setter Property="Header" Value="{Binding Header}" />
                    <Setter Property="Command" Value="{Binding Command}" />
                </Style>
            </ContextMenu.ItemContainerStyle>
        </ContextMenu>
    </Button.ContextMenu>
</Button>

Slider with binding: 데이터 바인딩을 사용한 Slider 예제

<Slider Value="{Binding Value}" Minimum="0" Maximum="100" />

Expander: 확장 가능한 UI 요소인 Expander 예제

<Expander Header="Click to expand">
    <TextBlock Text="Hello, World!" />
</Expander>

DockPanel: UI 요소를 독에 배치하는 DockPanel 예제

<DockPanel>
    <Button Content="Left" DockPanel.Dock="Left" />
    <Button Content="Right" DockPanel.Dock="Right" />
    <Button Content="Top" DockPanel.Dock="Top" />
    <Button Content="Bottom" DockPanel.Dock="Bottom" />
    <Button Content="Fill" />
</DockPanel>

UniformStackPanel: UI 요소를 균등하게 배치하는 UniformStackPanel 예제

<UniformStackPanel Orientation="Horizontal">
    <Button Content="Button 1" />
    <Button Content="Button 2" />
    <Button Content="Button 3" />
    <Button Content="Button 4" />
    <Button Content="Button 5" />
    <Button Content="Button 6" />
    <Button Content="Button 7" />
    <Button Content="Button 8" />
    <Button Content="Button 9" />
</UniformStackPanel>

ProgressBar with binding: 데이터 바인딩을 사용한 ProgressBar 예제

<ProgressBar Value="{Binding Progress}" Minimum="0" Maximum="100" />

DatePicker with binding: 데이터 바인딩을 사용한 DatePicker 예제

<DatePicker SelectedDate="{Binding SelectedDate}" />

TabControl: 다중 탭을 만드는 TabControl 예제

<TabControl>
    <TabItem Header="Tab 1">
        <TextBlock Text="Hello, Tab 1!" />
    </TabItem>
    <TabItem Header="Tab 2">
        <TextBlock Text="Hello, Tab 2!" />
    </TabItem>
    <TabItem Header="Tab 3">
        <TextBlock Text="Hello, Tab 3!" />
    </TabItem>
</TabControl>

PasswordBox with binding: 데이터 바인딩을 사용한 PasswordBox 예제

<PasswordBox Password="{Binding Password}" />

DataGrid with binding: 데이터 바인딩을 사용한 DataGrid 예제

<DataGrid ItemsSource="{Binding Users}" AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Name" Binding="{Binding Name}" />
        <DataGridTextColumn Header="Age" Binding="{Binding Age}" />
        <DataGridTextColumn Header="Email" Binding="{Binding Email}" />
    </DataGrid.Columns>
</DataGrid>

Canvas with binding: 데이터 바인딩을 사용한 Canvas 예제

<Canvas>
    <Ellipse Canvas.Left="{Binding X}" Canvas.Top="{Binding Y}" Width="100" Height="100" Fill="Red" />
</Canvas>

ToolBar: 툴바를 만드는 ToolBar 예제

<ToolBar>
    <Button Content="Button 1" />
    <Separator />
    <Button Content="Button 2" />
    <Separator />
    <Button Content="Button 3" />
</ToolBar>

EllipseGeometry: 원을 그리는 EllipseGeometry 예제

<Path Data="M 50,50 A 50,50 0 1 0 150,50 A 50,50 0 1 0 50,50 Z" Fill="Red" />

Polyline: 꺽은선을 그리는 Polyline 예제

<Polyline Points="0,0 100,0 100,100 0,100" Stroke="Red" StrokeThickness="2" />

Canvas with ZIndex: Z축 순서를 지정하는 Canvas 예제

<Canvas>
    <Ellipse Canvas.Left="0" Canvas.Top="0" Width="100" Height="100" Fill="Red" Canvas.ZIndex="1" />
    <Ellipse Canvas.Left="50" Canvas.Top="50" Width="100" Height="100" Fill="Green" Canvas.ZIndex="0" />
</Canvas>

Viewbox: UI 요소를 확대/축소하는 Viewbox 예제

<Viewbox Stretch="Uniform">
    <TextBlock Text="Hello, World!" />
</Viewbox>

WrapPanel with binding: 데이터 바인딩을 사용한 WrapPanel 예제

<WrapPanel ItemsSource="{Binding Items}">
    <WrapPanel.ItemTemplate>
        <DataTemplate>
            <Button Content="{Binding}" />
        </DataTemplate>
    </WrapPanel.ItemTemplate>
</WrapPanel>

Image with binding: 데이터 바인딩을 사용한 Image 예제

<Image Source="{Binding ImageUrl}" Width="100" Height="100" />

InkCanvas: 손글씨 입력을 지원하는 InkCanvas 예제

<InkCanvas />

DatePicker with formatting: 날짜 형식을 지정하는 DatePicker 예제

<DatePicker SelectedDate="{Binding SelectedDate}" DisplayStringFormat="yyyy/MM/dd" />

ListView with grouping: 그룹화를 지원하는 ListView 예제

<ListView ItemsSource="{Binding Users}">
    <ListView.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Name}" />
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
        </GroupStyle>
    </ListView.GroupStyle>
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}" />
        </DataTemplate>
    </ListView.ItemTemplate>
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel />
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.View>
        <GridView>
            <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" />
            <GridViewColumn Header="Age" DisplayMemberBinding="{Binding Age}" />
        </GridView>
    </ListView.View>
</ListView>

ToolTip: 마우스 오버 시 정보를 표시하는 ToolTip 예제

<Button Content="Hover me!">
    <Button.ToolTip>
        <ToolTip>
            <TextBlock Text="Hello, World!" />
        </ToolTip>
    </Button.ToolTip>
</Button>

ComboBox with grouping: 그룹화를 지원하는 ComboBox 예제

<ComboBox ItemsSource="{Binding Users}" SelectedValuePath="Id" DisplayMemberPath="Name">
    <ComboBox.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Name}" />
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
        </GroupStyle>
    </ComboBox.GroupStyle>
</ComboBox>

FlowDocument: 다양한 문서 형식을 지원하는 FlowDocument 예제

<FlowDocument>
    <Paragraph>
        Hello, World!
    </Paragraph>
    <Paragraph>
        <Bold>Bold text</Bold>, <Italic>italic text</Italic>, <Underline>underlined text</Underline>.
    </Paragraph>
    <List>
        <ListItem>Item 1</ListItem>
        <ListItem>Item 2</ListItem>
        <ListItem>Item 3</ListItem>
    </List>
    <Table>
        <TableRowGroup>
            <TableRow>
                <TableCell>Cell 1-1</TableCell>
                <TableCell>Cell 1-2</TableCell>
            </TableRow>
            <TableRow>
                <TableCell>Cell 2-1</TableCell>
                <TableCell>Cell 2-2</TableCell>
            </TableRow>
        </TableRowGroup>
    </Table>
</FlowDocument>

AdornerDecorator: UI 요소에 장식을 추가하는 AdornerDecorator 예제

<AdornerDecorator>
    <TextBox Text="Hello, World!" />
    <AdornerLayer>
        <Rectangle Stroke="Red" StrokeThickness="2" />
    </AdornerLayer>
</AdornerDecorator>

Canvas with animation: 애니메이션을 추가하는 Canvas 예제

<Canvas>
    <Ellipse Width="50" Height="50" Fill="Red">
        <Ellipse.RenderTransform>
            <TranslateTransform x:Name="ellipseTransform" X="0" Y="0" />
        </Ellipse.RenderTransform>
        <Ellipse.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="ellipseTransform" Storyboard.TargetProperty="X" To="100" Duration="0:0:1" />
                        <DoubleAnimation Storyboard.TargetName="ellipseTransform" Storyboard.TargetProperty="Y" To="100" Duration="0:0:1" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Ellipse.Triggers>
    </Ellipse>
</Canvas>

TextBlock with formatting: 텍스트 형식을 지정하는 TextBlock 예제

<TextBlock>
    <Run Text="Hello, " />
    <Bold>World</Bold>
    <Run Text="!" />
</TextBlock>

ImageBrush: 이미지를 배경으로 사용하는 ImageBrush 예제

<Rectangle Width="100" Height="100" Fill="Red">
    <Rectangle.Fill>
        <ImageBrush ImageSource="image/sample.png" Stretch="UniformToFill" />
    </Rectangle.Fill>
</Rectangle>

MenuItem with binding: 데이터 바인딩을 사용한 MenuItem 예제

<Menu>
    <MenuItem Header="File">
        <MenuItem Header="Open" Command="{Binding OpenCommand}" />
        <MenuItem Header="Save" Command="{Binding SaveCommand}" />
    </MenuItem>
    <MenuItem Header="Edit">
        <MenuItem Header="Cut" Command="{Binding CutCommand}" />
        <MenuItem Header="Copy" Command="{Binding CopyCommand}" />
        <MenuItem Header="Paste" Command="{Binding PasteCommand}" />
    </MenuItem>
</Menu>

Expander: 확장 가능한 UI 요소인 Expander 예제

<Expander Header="Click me">
    <TextBlock Text="Hello, World!" />
</Expander>

ContextMenu with binding: 데이터 바인딩을 사용한 ContextMenu 예제

<Button Content="Right-click me">
    <Button.ContextMenu>
        <ContextMenu>
            <MenuItem Header="Cut" Command="{Binding CutCommand}" />
            <MenuItem Header="Copy" Command="{Binding CopyCommand}" />
            <MenuItem Header="Paste" Command="{Binding PasteCommand}" />
        </ContextMenu>
    </Button.ContextMenu>
</Button>

Wrap with WrapPanel: UI 요소를 WrapPanel로 묶어서 표시하는 예제

<WrapPanel>
    <TextBlock Text="Hello," />
    <TextBlock Text="World!" />
    <Button Content="Click me!" />
</WrapPanel>

DataTemplateSelector: 여러 개의 데이터 템플릿 중에서 적절한 템플릿을 선택하는 DataTemplateSelector 예제

<ItemsControl ItemsSource="{Binding Items}">
    <ItemsControl.ItemTemplateSelector>
        <local:MyDataTemplateSelector>
            <local:MyDataTemplateSelector.StringTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding}" />
                </DataTemplate>
            </local:MyDataTemplateSelector.StringTemplate>
            <local:MyDataTemplateSelector.IntTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding}" Foreground="Red" />
                </DataTemplate>
            </local:MyDataTemplateSelector.IntTemplate>
        </local:MyDataTemplateSelector>
    </ItemsControl.ItemTemplateSelector>
</ItemsControl>

CheckBox: 선택 여부를 표시하는 CheckBox 예제

<CheckBox Content="Check me" IsChecked="{Binding IsChecked}" />

StatusBar: 상태 표시줄을 만드는 StatusBar 예제

<StatusBar>
    <StatusBarItem>
        <TextBlock Text="Ready" />
    </StatusBarItem>
    <Separator />
    <StatusBarItem>
        <TextBlock Text="Line 1" />
    </StatusBarItem>
    <Separator />
    <StatusBarItem>
        <TextBlock Text="Line 2" />
    </StatusBarItem>
</StatusBar>

ScrollViewer: 스크롤을 추가하는 ScrollViewer 예제

<ScrollViewer>
    <StackPanel>
        <TextBlock Text="Line 1" />
        <TextBlock Text="Line 2" />
        <TextBlock Text="Line 3" />
        <TextBlock Text="Line 4" />
        <TextBlock Text="Line 5" />
        <TextBlock Text="Line 6" />
        <TextBlock Text="Line 7" />
        <TextBlock Text="Line 8" />
        <TextBlock Text="Line 9" />
        <TextBlock Text="Line 10" />
    </StackPanel>
</ScrollViewer>

RadioButton: 여러 개 중 하나를 선택하는 RadioButton 예제

<StackPanel>
    <RadioButton Content="Option 1" GroupName="Options" IsChecked="{Binding Option1IsChecked}" />
    <RadioButton Content="Option 2" GroupName="Options" IsChecked="{Binding Option2IsChecked}" />
    <RadioButton Content="Option 3" GroupName="Options" IsChecked="{Binding Option3IsChecked}" />
</StackPanel>

DataGrid with binding: 데이터 바인딩을 사용한 DataGrid 예제

<DataGrid ItemsSource="{Binding Users}" AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Name" Binding="{Binding Name}" />
        <DataGridTextColumn Header="Age" Binding="{Binding Age}" />
        <DataGridCheckBoxColumn Header="IsAdmin" Binding="{Binding IsAdmin}" />
    </DataGrid.Columns>
</DataGrid>

DatePicker with binding: 데이터 바인딩을 사용한 DatePicker 예제

<DatePicker SelectedDate="{Binding SelectedDate}" />

ToolBar: 도구 모음을 만드는 ToolBar 예제

<ToolBar>
    <Button Content="Open" Command="{Binding OpenCommand}" />
    <Button Content="Save" Command="{Binding SaveCommand}" />
    <Separator />
    <Button Content="Cut" Command="{Binding CutCommand}" />
    <Button Content="Copy" Command="{Binding CopyCommand}" />
    <Button Content="Paste" Command="{Binding PasteCommand}" />
</ToolBar>

WrapPanel with alignment: UI 요소를 WrapPanel로 묶어서 표시하고 정렬하는 예제

<WrapPanel>
    <TextBlock Text="Hello," />
    <TextBlock Text="World!" />
    <Button Content="Click me!" HorizontalAlignment="Right" />
</WrapPanel>

Grid with row/column definitions: Grid에서 행과 열을 정의하는 예제

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Row="0" Grid.Column="0" Text="Header" />
    <Button Grid.Row="0" Grid.Column="1" Content="Button 1" />
    <Button Grid.Row="1" Grid.Column="0" Content="Button 2" />
    <Button Grid.Row="1" Grid.Column="1" Content="Button 3" />
</Grid>

UniformGrid: 모든 셀의 크기가 같은 UniformGrid 예제

<UniformGrid Rows="2" Columns="2">
    <Button Content="Button 1" />
    <Button Content="Button 2" />
    <Button Content="Button 3" />
    <Button Content="Button 4" />
</UniformGrid>

DockPanel: UI 요소를 독을 이용해 표시하는 DockPanel 예제

<DockPanel>
    <Button DockPanel.Dock="Top" Content="Top" />
    <Button DockPanel.Dock="Bottom" Content="Bottom" />
    <Button DockPanel.Dock="Left" Content="Left" />
    <Button DockPanel.Dock="Right" Content="Right" />
    <Button Content="Center" />
</DockPanel>

ProgressBar: 진행 상태를 나타내는 ProgressBar 예제

<ProgressBar Value="{Binding Progress}" Minimum="0" Maximum="100" />

ToolTip: UI 요소에 마우스를 올리면 나타나는 ToolTip 예제

<Button Content="Hover me">
    <Button.ToolTip>
        <ToolTip>
            <StackPanel>
                <TextBlock Text="Line 1" />
                <TextBlock Text="Line 2" />
                <TextBlock Text="Line 3" />
            </StackPanel>
        </ToolTip>
    </Button.ToolTip>
</Button>

GroupBox: 여러 개의 UI 요소를 그룹화하는 GroupBox 예제

<GroupBox Header="Group">
    <StackPanel>
        <TextBlock Text="Line 1" />
        <TextBlock Text="Line 2" />
        <TextBlock Text="Line 3" />
    </StackPanel>
</GroupBox>

Slider: 값을 선택할 수 있는 Slider 예제

<Slider Value="{Binding Value}" Minimum="0" Maximum="100" />

Popup: 팝업 창을 만드는 Popup 예제

<StackPanel>
    <Button Content="Show popup" Click="Button_Click" />
    <Popup IsOpen="{Binding IsPopupOpen}" Placement="Center" PlacementTarget="{Binding ElementName=popupButton}">
        <Border Background="White" BorderBrush="Black" BorderThickness="1">
            <TextBlock Text="Hello, World!" Margin="5" />
        </Border>
    </Popup>
</StackPanel>

TabControl: 여러 개의 탭으로 구성된 UI를 만드는 TabControl 예제

<TabControl>
    <TabItem Header="Tab 1">
        <TextBlock Text="Content of Tab 1" />
    </TabItem>
    <TabItem Header="Tab 2">
        <TextBlock Text="Content of Tab 2" />
    </TabItem>
    <TabItem Header="Tab 3">
        <TextBlock Text="Content of Tab 3" />
    </TabItem>
</TabControl>

ComboBox with selection changed event: 선택 변경 이벤트를 처리하는 ComboBox 예제

<ComboBox ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedItem}" SelectionChanged="ComboBox_SelectionChanged" />

ListView with binding: 데이터 바인딩을 사용한 ListView 예제

<ListView ItemsSource="{Binding Users}">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" />
            <GridViewColumn Header="Age" DisplayMemberBinding="{Binding Age}" />
            <GridViewColumn Header="IsAdmin" DisplayMemberBinding="{Binding IsAdmin}" />
        </GridView>
    </ListView.View>
</ListView>

Label: 라벨을 만드는 Label 예제

<Label Content="Hello, World!" />

PasswordBox: 패스워드를 입력할 수 있는 PasswordBox 예제

<PasswordBox Password="{Binding Password}" />

Image with binding: 데이터 바인딩을 사용한 Image 예제

<Image Source="{Binding ImageSource}" Width="200" Height="200" />

Canvas with shapes: 도형을 그리는 Canvas 예제

<Canvas>
    <Ellipse Width="50" Height="50" Fill="Red" Canvas.Left="50" Canvas.Top="50" />
    <Rectangle Width="50" Height="50" Fill="Green" Canvas.Left="100" Canvas.Top="100" />
    <Polygon Points="0,0 50,50 0,50" Fill="Blue" Canvas.Left="150" Canvas.Top="150" />
</Canvas>

MediaElement: 오디오/비디오를 재생하는 MediaElement 예제

<MediaElement Source="{Binding MediaSource}" Width="400" Height="300" />

InkCanvas: 손글씨를 입력할 수 있는 InkCanvas 예제

<InkCanvas Width="400" Height="300" />

WebBrowser: 웹 브라우저를 표시하는 WebBrowser 예제

<WebBrowser Source="{Binding WebPageUrl}" Width="400" Height="300" />

AdornerDecorator: Adorner를 사용하는 예제

<AdornerDecorator>
    <TextBlock Text="Hello, World!" />
    <AdornedElementPlaceholder />
</AdornerDecorator>

DataTrigger: 데이터 상태에 따라 UI를 변경하는 DataTrigger 예제

<TextBlock Text="{Binding Status}">
    <TextBlock.Style>
        <Style TargetType="{x:Type TextBlock}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Status}" Value="Success">
                    <Setter Property="Foreground" Value="Green" />
                </DataTrigger>
                <DataTrigger Binding="{Binding Status}" Value="Error">
                    <Setter Property="Foreground" Value="Red" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </TextBlock.Style>
</TextBlock>

MultiBinding: 여러 개의 값을 바인딩하는 MultiBinding 예제

<TextBlock>
    <TextBlock.Text>
        <MultiBinding StringFormat="{}{0} / {1}">
            <Binding Path="Value1" />
            <Binding Path="Value2" />
        </MultiBinding>
    </TextBlock.Text>
</TextBlock>

DataGrid with row details: 행 세부 정보를 표시하는 DataGrid 예제

<DataGrid ItemsSource="{Binding Users}" AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Name" Binding="{Binding Name}" />
        <DataGridTextColumn Header="Age" Binding="{Binding Age}" />
        <DataGridCheckBoxColumn Header="IsAdmin" Binding="{Binding IsAdmin}" />
    </DataGrid.Columns>
    <DataGrid.RowDetailsTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Name}" />
                <TextBlock Text="{Binding Age}" />
                <TextBlock Text="{Binding IsAdmin}" />
            </StackPanel>
        </DataTemplate>
    </DataGrid.RowDetailsTemplate>
</DataGrid>

DataGrid with custom column: 사용자 정의 컬럼을 추가하는 DataGrid 예제

<DataGrid ItemsSource="{Binding Users}" AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Name" Binding="{Binding Name}" />
        <DataGridTextColumn Header="Age" Binding="{Binding Age}" />
        <DataGridTemplateColumn Header="IsAdmin">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Image Source="{Binding IsAdmin, Converter={StaticResource BooleanToImageConverter}}" Width="16" Height="16" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

DataGrid with custom sort: 사용자 정의 정렬을 추가하는 DataGrid 예제

<DataGrid ItemsSource="{Binding Users}" AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Name" Binding="{Binding Name}" SortMemberPath="LastName" />
        <DataGridTextColumn Header="Age" Binding="{Binding Age}" />
        <DataGridCheckBoxColumn Header="IsAdmin" Binding="{Binding IsAdmin}" />
    </DataGrid.Columns>
</DataGrid>

TreeView: 트리 구조를 표시하는 TreeView 예제

<TreeView ItemsSource="{Binding Departments}">
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding Employees}">
            <TextBlock Text="{Binding Name}" />
            <HierarchicalDataTemplate.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Name}" />
                </DataTemplate>
            </HierarchicalDataTemplate.ItemTemplate>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

ValidationRule: 유효성 검사를 추가하는 ValidationRule 예제

<TextBox Text="{Binding Value, ValidatesOnDataErrors=True}">
    <TextBox.Text>
        <Binding Path="Value" UpdateSourceTrigger="PropertyChanged" >
            <Binding.ValidationRules>
                <local:PositiveNumberValidationRule />
            </Binding.ValidationRules>
        </Binding>
    </TextBox.Text>
</TextBox>

ContextMenu: 컨텍스트 메뉴를 추가하는 ContextMenu 예제

<TextBlock Text="Right-click me!" ContextMenu="{StaticResource MyContextMenu}" />
<ContextMenu x:Key="MyContextMenu">
    <MenuItem Header="Cut" Command="{Binding CutCommand}" />
    <MenuItem Header="Copy" Command="{Binding CopyCommand}" />
    <MenuItem Header="Paste" Command="{Binding PasteCommand}" />
</ContextMenu>

TabControl with custom template: 사용자 지정 템플릿을 사용하는 TabControl 예제

<TabControl ItemsSource="{Binding Tabs}">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Header}" />
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Content}" />
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

ComboBox with custom item template: 사용자 지정 항목 템플릿을 사용하는 ComboBox 예제

<ComboBox ItemsSource="{Binding Countries}">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding FlagImage}" Width="16" Height="16" />
                <TextBlock Text="{Binding Name}" Margin="5,0,0,0" />
            </StackPanel>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

Expander: 접기/펴기 기능을 갖는 Expander 예제

<Expander Header="Header">
    <TextBlock Text="Content" />
</Expander>

DatePicker: 날짜를 선택하는 DatePicker 예제

<DatePicker SelectedDate="{Binding Date}" />

ScrollViewer: 스크롤 뷰를 만드는 ScrollViewer 예제

<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
    <StackPanel>
        <Rectangle Width="200" Height="200" Fill="Red" />
        <Rectangle Width="200" Height="200" Fill="Green" />
        <Rectangle Width="200" Height="200" Fill="Blue" />
    </StackPanel>
</ScrollViewer>

ItemsControl with ItemsPanelTemplate: 사용자 지정 ItemsPanelTemplate을 사용하는 ItemsControl 예제

<ItemsControl ItemsSource="{Binding Items}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Rectangle Width="50" Height="50" Fill="{Binding Color}" Margin="5" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

ItemsControl with custom panel: 사용자 지정 패널을 사용하는 ItemsControl 예제

<ItemsControl ItemsSource="{Binding Items}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <local:CustomPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Rectangle Width="50" Height="50" Fill="{Binding Color}" Margin="5" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

ListBox with multiple selection: 다중 선택이 가능한 ListBox 예제

<ListBox ItemsSource="{Binding Items}" SelectionMode="Multiple">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}" />
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Slider: 값을 선택할 수 있는 Slider 예제

<Slider Minimum="0" Maximum="100" Value="{Binding Value}" />

ProgressBar: 진행 상태를 표시하는 ProgressBar 예제

<ProgressBar Minimum="0" Maximum="100" Value="{Binding Progress}" />

ToolTip: 툴팁을 추가하는 ToolTip 예제

<Button Content="Hover me">
    <Button.ToolTip>
        <TextBlock Text="Hello, World!" />
    </Button.ToolTip>
</Button>

Grid with row and column definitions: 행과 열 정의를 갖는 Grid 예제

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <TextBlock Text="Row 0, Column 0" Grid.Row="0" Grid.Column="0" />
    <TextBlock Text="Row 1, Column 1" Grid.Row="1" Grid.Column="1" />
    <TextBlock Text="Row 2, Column 2" Grid.Row="2" Grid.Column="2" />
</Grid>

DockPanel: DockPanel 예제

<DockPanel>
    <Button DockPanel.Dock="Left" Content="Left" />
    <Button DockPanel.Dock="Top" Content="Top" />
    <Button DockPanel.Dock="Right" Content="Right" />
    <Button DockPanel.Dock="Bottom" Content="Bottom" />
    <TextBlock Text="Fill" />
</DockPanel>

UniformGrid: 일정한 크기의 그리드를 생성하는 UniformGrid 예제

<UniformGrid Rows="3" Columns="3">
    <Rectangle Fill="Red" />
    <Rectangle Fill="Green" />
    <Rectangle Fill="Blue" />
    <Rectangle Fill="Yellow" />
    <Rectangle Fill="Orange" />
    <Rectangle Fill="Purple" />
    <Rectangle Fill="Gray" />
    <Rectangle Fill="White" />
    <Rectangle Fill="Black" />
</UniformGrid>

DrawingBrush: 그리기 브러시를 사용하는 DrawingBrush 예제

<Border Background="{Binding Path=IconDrawing, Converter={StaticResource DrawingBrushConverter}}" />

MultiDataTrigger: 여러 데이터 상태에 따라 UI를 변경하는 MultiDataTrigger 예제

<TextBlock>
    <TextBlock.Style>
        <Style TargetType="{x:Type TextBlock}">
            <Style.Triggers>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding IsEditing}" Value="True" />
                        <Condition Binding="{Binding IsChanged}" Value="True" />
                    </MultiDataTrigger.Conditions>
                    <Setter Property="Foreground" Value="Red" />
                </MultiDataTrigger>
            </Style.Triggers>
        </Style>
    </TextBlock.Style>
</TextBlock>

MultiBinding: 여러 바인딩을 결합하여 하나의 속성에 바인딩하는 MultiBinding 예제

<TextBlock>
    <TextBlock.Text>
        <MultiBinding StringFormat="{}{0}, {1}">
            <Binding Path="FirstName" />
            <Binding Path="LastName" />
        </MultiBinding>
    </TextBlock.Text>
</TextBlock>

Custom MarkupExtension: 사용자 정의 MarkupExtension을 만드는 예제

public class MultiplyExtension : MarkupExtension
{
    public double Factor { get; set; }

    public MultiplyExtension(double factor)
    {
        Factor = factor;
    }

    public override object ProvideValue(IServiceProvider serviceProvider)
    {
        return new MultiBinding() { Converter = new MultiplyConverter(), ConverterParameter = Factor };
    }
}

public class MultiplyConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        double result = 1;
        foreach (object value in values)
        {
            double doubleValue;
            if (double.TryParse(value.ToString(), out doubleValue))
            {
                result *= doubleValue;
            }
        }
        double factor = double.Parse(parameter.ToString());
        return result * factor;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

Custom MarkupExtension usage: 사용자 정의 MarkupExtension을 사용하는 예제

<TextBlock Text="{local:Multiply 2}">
    <local:Multiply.Factor>
        <MultiBinding Converter="{StaticResource AddConverter}">
            <Binding Path="X" />
            <Binding Path="Y" />
        </MultiBinding>
    </local:Multiply.Factor>
</TextBlock>

Custom Attached Property: 사용자 정의 Attached Property를 만드는 예제

public static class MyAttachedProperties
{
    public static readonly DependencyProperty MyPropertyProperty =
        DependencyProperty.RegisterAttached("MyProperty", typeof(string), typeof(MyAttachedProperties), new PropertyMetadata(null));

    public static string GetMyProperty(DependencyObject obj)
    {
        return (string)obj.GetValue(MyPropertyProperty);
    }

    public static void SetMyProperty(DependencyObject obj, string value)
    {
        obj.SetValue(MyPropertyProperty, value);
    }
}

Custom Attached Property usage: 사용자 정의 Attached Property를 사용하는 예제

<Grid local:MyAttachedProperties.MyProperty="Hello, World!">
    <TextBlock Text="{Binding Path=(local:MyAttachedProperties.MyProperty), RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Grid}}" />
</Grid>

Custom Routed Event: 사용자 정의 Routed Event를 만드는 예제

public class CustomEventArgs : RoutedEventArgs
{
    public string Message { get; set; }

    public CustomEventArgs(RoutedEvent routedEvent, object source) : base(routedEvent, source) { }
}

public delegate void CustomEventHandler(object sender, CustomEventArgs e);

public class CustomControl : Control
{
    public static readonly RoutedEvent CustomEvent = EventManager.RegisterRoutedEvent("Custom", RoutingStrategy.Bubble, typeof(CustomEventHandler), typeof(CustomControl));

    public event CustomEventHandler Custom
    {
        add { AddHandler(CustomEvent, value); }
        remove { RemoveHandler(CustomEvent, value); }
    }

    protected virtual void OnCustom(CustomEventArgs e)
    {
        RaiseEvent(e);
    }

    private void RaiseCustomEvent()
    {
        CustomEventArgs args = new CustomEventArgs(CustomEvent, this);
        args.Message = "Hello, World!";
        OnCustom(args);
    }

    protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)
    {
        base.OnMouseLeftButtonDown(e);
        RaiseCustomEvent();
    }
}

Custom Routed Event usage: 사용자 정의 Routed Event를 사용하는 예제

<local:CustomControl Custom="CustomControl_Custom" />

private void CustomControl_Custom(object sender, CustomEventArgs e)
{
    MessageBox.Show(e.Message);
}
Custom Control with Template: ControlTemplate을 사용하는 사용자 정의 컨트롤 예제

public class CustomButton : Button
{
    static CustomButton()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomButton), new FrameworkPropertyMetadata(typeof(CustomButton)));
    }
}

<Style TargetType="{x:Type local:CustomButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:CustomButton}">
                <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Custom Control with Custom Property: 사용자 지정 속성을 갖는 사용자 정의 컨트롤 예제

public class CustomButton : Button
{
    public static readonly DependencyProperty CustomProperty = DependencyProperty.Register("Custom", typeof(string), typeof(CustomButton), new FrameworkPropertyMetadata(null));

    public string Custom
    {
        get { return (string)GetValue(CustomProperty); }
        set { SetValue(CustomProperty, value); }
    }
}

Custom Control with Custom Property and CoerceValueCallback: CoerceValueCallback을 사용하는 사용자 지정 속성을 갖는 사용자 정의 컨트롤 예제

public class CustomButton : Button
{
    public static readonly DependencyProperty CustomProperty = DependencyProperty.Register("Custom", typeof(string), typeof(CustomButton), new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.None, new PropertyChangedCallback(OnCustomChanged), new CoerceValueCallback(CoerceCustom)));

    public string Custom
    {
        get { return (string)GetValue(CustomProperty); }
        set { SetValue(CustomProperty, value); }
    }

    private static void OnCustomChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        // Custom property changed
    }

    private static object CoerceCustom(DependencyObject d, object value)
    {
        // Coerce Custom property
        return value;
    }
}

Custom Control with Custom Event: 사용자 정의 이벤트를 갖는 사용자 정의 컨트롤 예제

public class CustomButton : Button
{
    public event EventHandler Custom;

    protected virtual void OnCustom(EventArgs e)
    {
        Custom?.Invoke(this, e);
    }

    protected override void OnClick()
    {
        base.OnClick();
        OnCustom(EventArgs.Empty);
    }
}

Custom Control with Custom Event and Custom Routed Event: 사용자 정의 이벤트와 사용자 정의 Routed Event를 갖는 사용자 정의 컨트롤 예제

public class CustomButton : Button
{
    public static readonly RoutedEvent CustomRoutedEvent = EventManager.RegisterRoutedEvent("Custom", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(CustomButton));

    public event RoutedEventHandler Custom
    {
        add { AddHandler(CustomRoutedEvent, value); }
        remove { RemoveHandler(CustomRoutedEvent, value); }
    }

    protected virtual void OnCustom(RoutedEventArgs e)
    {
        RaiseEvent(e);
    }

    protected override void OnClick()
    {
        base.OnClick();
        OnCustom(new RoutedEventArgs(CustomRoutedEvent, this));
    }
}

<local:CustomButton Custom="CustomButton_Custom" />

private void CustomButton_Custom(object sender, RoutedEventArgs e)
{
    // Custom event occurred
}

Custom Control with ControlTemplate and VisualStateManager: ControlTemplate과 VisualStateManager를 사용하는 사용자 정의 컨트롤 예제

public class CustomButton : Button
{
    static CustomButton()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomButton), new FrameworkPropertyMetadata(typeof(CustomButton)));
    }
}

<Style TargetType="{x:Type local:CustomButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:CustomButton}">
                <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                    <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="border" Property="Background" Value="Red" />
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="border" Property="Background" Value="Blue" />
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="contentPresenter" Property="Opacity" Value="0.5" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Custom Control with ItemsPresenter: ItemsPresenter를 사용하는 사용자 정의 컨트롤 예제

public class CustomListBox : ListBox
{
    static CustomListBox()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomListBox), new FrameworkPropertyMetadata(typeof(CustomListBox)));
    }
}

<Style TargetType="{x:Type local:CustomListBox}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:CustomListBox}">
                <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                    <ScrollViewer Padding="{TemplateBinding Padding}" Focusable="False">
                        <ItemsPresenter />
                    </ScrollViewer>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Custom Control with ControlTemplate and ItemsPresenter: ControlTemplate과 ItemsPresenter를 사용하는 사용자 정의 컨트롤 예제

public class CustomListBox : ListBox
{
    static CustomListBox()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomListBox), new FrameworkPropertyMetadata(typeof(CustomListBox)));
    }
}

<Style TargetType="{x:Type local:CustomListBox}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:CustomListBox}">
                <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                    <ScrollViewer Padding="{TemplateBinding Padding}" Focusable="False">
                        <ItemsPresenter />
                    </ScrollViewer>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Custom Control with Custom Template Selector: 사용자 정의 템플릿 선택기를 갖는 사용자 정의 컨트롤 예제

public class CustomListBox : ListBox
{
    public static readonly DependencyProperty ItemTemplateSelectorProperty = DependencyProperty.Register("ItemTemplateSelector", typeof(DataTemplateSelector), typeof(CustomListBox), new PropertyMetadata(null));

    public DataTemplateSelector ItemTemplateSelector
    {
        get { return (DataTemplateSelector)GetValue(ItemTemplateSelectorProperty); }
        set { SetValue(ItemTemplateSelectorProperty, value); }
    }

    static CustomListBox()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomListBox), new FrameworkPropertyMetadata(typeof(CustomListBox)));
    }
}

public class CustomTemplateSelector : DataTemplateSelector
{
    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        // Return DataTemplate based on item
    }
}

<Style TargetType="{x:Type local:CustomListBox}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:CustomListBox}">
                <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                    <ScrollViewer Padding="{TemplateBinding Padding}" Focusable="False">
                        <ItemsPresenter />
                    </ScrollViewer>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemTemplateSelector" Value="{StaticResource CustomTemplateSelector}" />
</Style>

Custom Control with Custom Panel: 사용자 정의 패널을 갖는 사용자 정의 컨트롤 예제

public class CustomPanel : Panel
{
    protected override Size MeasureOverride(Size availableSize)
    {
        // Measure children
        return base.MeasureOverride(availableSize);
    }

    protected override Size ArrangeOverride(Size finalSize)
    {
        // Arrange children
        return base.ArrangeOverride(finalSize);
    }
}

public class CustomControl : Control
{
    static CustomControl()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomControl), new FrameworkPropertyMetadata(typeof(CustomControl)));
    }

    public static readonly DependencyProperty ItemsSourceProperty = DependencyProperty.Register("ItemsSource", typeof(IEnumerable), typeof(CustomControl), new PropertyMetadata(null, OnItemsSourceChanged));

    public IEnumerable ItemsSource
    {
        get { return (IEnumerable)GetValue(ItemsSourceProperty); }
        set { SetValue(ItemsSourceProperty, value); }
    }

    private static void OnItemsSourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        CustomControl control = (CustomControl)d;
        IEnumerable oldValue = (IEnumerable)e.OldValue;
        IEnumerable newValue = (IEnumerable)e.NewValue;
        control.OnItemsSourceChanged(oldValue, newValue);
    }

    protected virtual void OnItemsSourceChanged(IEnumerable oldValue, IEnumerable newValue)
    {
        // ItemsSource changed
    }

    protected override void OnItemsChanged(NotifyCollectionChangedEventArgs e)
    {
        // Items changed
        base.OnItemsChanged(e);
    }
}

추천 자료: .NET Blazor에 대해 알아보시겠어요? .NET Blazor 알아보기를 확인해보세요!