[WPF][C#][Study] WPF 시작 10일차

1. Border 컨트롤

- 테두리, 배경 등을 그리는 데 사용

- 패널을 Border로 감싸서 사용

[예제 1]

<Window x:Class="WpfTutorialSamples.Misc_controls.BorderSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="BorderSample" Height="170" Width="200">
        
    <Grid Margin="10">
    
		<Border Background="GhostWhite" BorderBrush="Gainsboro" BorderThickness="1">
			<StackPanel Margin="10">
				<Button>Button 1</Button>
				<Button Margin="0,10">Button 2</Button>
				<Button>Button 3</Button>
			</StackPanel>
		</Border>
        
	</Grid>    
</Window>

[결과]

- Stack 패널 외부에 두께 1의 하얀 테두리가 생김

[예제 2]

- CornerRadius를 조절해 테두리를 둥글게 할 수 있음

<Window x:Class="WpfTutorialSamples.Misc_controls.BorderSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="BorderSample" Height="175" Width="200">
        
    <Grid Margin="10">
    
		<Border Background="GhostWhite" BorderBrush="Silver" BorderThickness="1" CornerRadius="8,8,3,3">
			<StackPanel Margin="10">
				<Button>Button 1</Button>
				<Button Margin="0,10">Button 2</Button>
				<Button>Button 3</Button>
			</StackPanel>
		</Border>
        
	</Grid>    
</Window>

[결과]

- 각진 모서리가 아닌 둥근 모서리가 되었다.

[예제 3]

- BorderThickness를 이용해 테두리의 색상 및 두께를 조절할 수 있다.

<Window x:Class="WpfTutorialSamples.Misc_controls.BorderSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="BorderSample" Height="175" Width="200">
    <Grid Margin="10">
    
		<Border Background="GhostWhite" BorderBrush="DodgerBlue" BorderThickness="1,3,1,5">
			<StackPanel Margin="10">
				<Button>Button 1</Button>
				<Button Margin="0,10">Button 2</Button>
				<Button>Button 3</Button>
			</StackPanel>
		</Border>
        
	</Grid>
</Window>

[결과]

- 위 아래에 좀 더 두꺼운 테두리가 생겼다.

[예제 4]

- LinearGradientBrush를 이용해 테두리 내부의 배경을 색칠할 수 있다.

<Window x:Class="WpfTutorialSamples.Misc_controls.BorderSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="BorderSample" Height="175" Width="200">
        
    <Grid Margin="10">
    
		<Border BorderBrush="Navy" BorderThickness="1,3,1,5">
        
			<Border.Background>
				<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
					<GradientStop Color="LightCyan" Offset="0.0" />
					<GradientStop Color="LightBlue" Offset="0.5" />
					<GradientStop Color="DarkTurquoise" Offset="1.0" />
				</LinearGradientBrush>
			</Border.Background>
            
			<StackPanel Margin="10">
				<Button>Button 1</Button>
				<Button Margin="0,10">Button 2</Button>
				<Button>Button 3</Button>
			</StackPanel>
            
		</Border>
        
	</Grid>
</Window>

[결과]

- 테두리 내부에 그라데이션 배경이 생겼다.

 

2. Slider 컨트롤

- Slider 컨트롤을 이용해 수평이나 수직으로 드래그를 통해 숫자 값을 선택할 수 있다.

[예제 1]

- 기본 Slider이다.

<Window x:Class="WpfTutorialSamples.Misc_controls.SliderSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="SliderSample" Height="100" Width="300">
        
    <StackPanel VerticalAlignment="Center" Margin="10">
        <Slider Maximum="100" />
    </StackPanel>
    
</Window>

[결과]

[예제 2]

- Tick 속성을 이용해 눈금을 나타낼 수 있다.

- TickPlacement : 눈금의 위치

- TickFrequency : 눈금 사이의 간격

<Window x:Class="WpfTutorialSamples.Misc_controls.SliderSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="SliderSample" Height="100" Width="300">
        
    <StackPanel VerticalAlignment="Center" Margin="10">
        <Slider Maximum="100" TickPlacement="BottomRight" TickFrequency="5" />
    </StackPanel>
    
</Window>

[결과]

- 하단에 5간격으로 눈금이 생성되었다.

[예제 3]

- IsSnapToTickEnabled 속성을 사용하면 Slider가 눈금에만 오도록 할 수 있다.

<Window x:Class="WpfTutorialSamples.Misc_controls.SliderSnapToTickSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="SliderSnapToTickSample" Height="100" Width="300">
        
    <StackPanel VerticalAlignment="Center" Margin="10">
        <Slider Maximum="100" TickPlacement="BottomRight" TickFrequency="10" 
        	IsSnapToTickEnabled="True" />
    </StackPanel>
    
</Window>

[결과]

- 눈금에만 딱 떨어지도록 설정했다.

[예제 4]

- 슬라이더에 값을 표시할 수 있고, 값으로 슬라이더를 변경시킬 수도 있다.

<Window x:Class="WpfTutorialSamples.Misc_controls.SliderBoundValueSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="SliderBoundValueSample" Height="100" Width="300">
        
    <DockPanel VerticalAlignment="Center" Margin="10">
        <TextBox Text="{Binding ElementName=slValue, Path=Value, UpdateSourceTrigger=PropertyChanged}" DockPanel.Dock="Right" TextAlignment="Right" Width="40" />
        <Slider Maximum="255" TickPlacement="BottomRight" TickFrequency="5" IsSnapToTickEnabled="True" Name="slValue" />
    </DockPanel>
    
</Window>

[결과]

- 바인딩을 이용해 텍스트와 슬라이더를 연결시켜 슬라이더의 값이 텍스트에 표시되도록 하였다.

[예제 5]

- ValueChanged 속성에 함수를 연결해 값에 의한 변화를 줄 수 있다.

1) xaml

<Window x:Class="WpfTutorialSamples.Misc_controls.SliderValueChangedSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="SliderValueChangedSample" Height="200" Width="300">
        
    <StackPanel Margin="10" VerticalAlignment="Center">
    
        <DockPanel VerticalAlignment="Center" Margin="10">
            <Label DockPanel.Dock="Left" FontWeight="Bold">R:</Label>
            <TextBox Text="{Binding ElementName=slColorR, Path=Value, UpdateSourceTrigger=PropertyChanged}" DockPanel.Dock="Right" TextAlignment="Right" Width="40" />
            <Slider Maximum="255" TickPlacement="BottomRight" TickFrequency="5" IsSnapToTickEnabled="True" Name="slColorR" ValueChanged="ColorSlider_ValueChanged" />
        </DockPanel>

        <DockPanel VerticalAlignment="Center" Margin="10">
            <Label DockPanel.Dock="Left" FontWeight="Bold">G:</Label>
            <TextBox Text="{Binding ElementName=slColorG, Path=Value, UpdateSourceTrigger=PropertyChanged}" DockPanel.Dock="Right" TextAlignment="Right" Width="40" />
            <Slider Maximum="255" TickPlacement="BottomRight" TickFrequency="5" IsSnapToTickEnabled="True" Name="slColorG" ValueChanged="ColorSlider_ValueChanged" />
        </DockPanel>

        <DockPanel VerticalAlignment="Center" Margin="10">
            <Label DockPanel.Dock="Left" FontWeight="Bold">B:</Label>
            <TextBox Text="{Binding ElementName=slColorB, Path=Value, UpdateSourceTrigger=PropertyChanged}" DockPanel.Dock="Right" TextAlignment="Right" Width="40" />
            <Slider Maximum="255" TickPlacement="BottomRight" TickFrequency="5" IsSnapToTickEnabled="True" Name="slColorB" ValueChanged="ColorSlider_ValueChanged" />
        </DockPanel>
        
    </StackPanel>
</Window>

2) code-behind

using System;
using System.Windows;
using System.Windows.Media;

namespace WpfTutorialSamples.Misc_controls
{
	public partial class SliderValueChangedSample : Window
	{
		public SliderValueChangedSample()
		{
			InitializeComponent();
		}

		private void ColorSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
		{
			// 각 색깔 값에 따라 배경색이 바뀐다.
			Color color = Color.FromRgb((byte)slColorR.Value, (byte)slColorG.Value, (byte)slColorB.Value);
			this.Background = new SolidColorBrush(color);
		}
	}
}

3) 결과

- 각 슬라이더의 값을 RGB 값과 연결하여 슬라이더의 값을 변경하면 배경색이 변하도록 하였다.

 

3. ProgressBar 컨트롤

- 진행 상황을 표시하기 위함

[예제 1]

<Window x:Class="WpfTutorialSamples.Misc_controls.ProgressBarSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ProgressBarSample" Height="100" Width="300">
        
    <Grid Margin="20">
        <ProgressBar Minimum="0" Maximum="100" Value="75" />
    </Grid>
    
</Window>

[결과]

- 기본적인 ProgressBar를 나타냈다.

[예제 2]

1) xaml

<Window x:Class="WpfTutorialSamples.Misc_controls.ProgressBarTaskOnUiThread"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ProgressBarTaskOnUiThread" Height="100" Width="300"
        ContentRendered="Window_ContentRendered">
        
    <Grid Margin="20">
        <ProgressBar Minimum="0" Maximum="100" Name="pbStatus" />
    </Grid>
    
</Window>

2) code-behind

using System;
using System.ComponentModel;
using System.Threading;
using System.Windows;

namespace WpfTutorialSamples.Misc_controls
{
	public partial class ProgressBarTaskOnWorkerThread : Window
	{
		public ProgressBarTaskOnWorkerThread()
		{
			InitializeComponent();
		}

		private void Window_ContentRendered(object sender, EventArgs e)
		{
			BackgroundWorker worker = new BackgroundWorker();
			worker.WorkerReportsProgress = true;
			worker.DoWork += worker_DoWork;
			worker.ProgressChanged += worker_ProgressChanged;

			worker.RunWorkerAsync();
		}

		void worker_DoWork(object sender, DoWorkEventArgs e)
		{
			for(int i = 0; i < 100; i++)
			{
				(sender as BackgroundWorker).ReportProgress(i);
				Thread.Sleep(100);
			}
		}

		void worker_ProgressChanged(object sender, ProgressChangedEventArgs e)
		{
			pbStatus.Value = e.ProgressPercentage;
		}
	}
}

3) 결과

- 프로세스가 진행되는 동안 스레드를 사용하지 못하게 하였다. 

- 완료가 되면 정상적으로 돌아온다.

[예제 3]

- 진행률을 알려주지 않고 진행이 되고 있음만 알려주는 ProgressBar

- IsIndeterminate 속성을 사용하면 된다.

<Window x:Class="WpfTutorialSamples.Misc_controls.ProgressBarIndeterminateSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ProgressBarIndeterminateSample" Height="100" Width="300">
        
    <Grid Margin="20">
        <ProgressBar Minimum="0" Maximum="100" Name="pbStatus" IsIndeterminate="True" />
    </Grid>
    
</Window>

[결과]

[예제 4]

- 텍스트가 포함된 ProgressBar

<Window x:Class="WpfTutorialSamples.Misc_controls.ProgressBarTextSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ProgressBarTextSample" Height="100" Width="300">
        
    <Grid Margin="20">
        <ProgressBar Minimum="0" Maximum="100" Value="75" Name="pbStatus" />
        <TextBlock Text="{Binding ElementName=pbStatus, Path=Value, StringFormat={}{0:0}%}" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Grid>
    
</Window>

[결과]

- ProgressBar와 텍스트를 바인딩하여 중간에 진행도를 표시할 수 있었다.

 

4. WebBrowser 컨트롤

- 실제 웹 브라우져를 불러올 수 있다

[예제]

1) xaml

<Window x:Class="WpfTutorialSamples.Misc_controls.WebBrowserControlSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WebBrowserControlSample" Height="300" Width="450">
        
    <Window.CommandBindings>
        <CommandBinding Command="NavigationCommands.BrowseBack" CanExecute="BrowseBack_CanExecute" Executed="BrowseBack_Executed" />
        <CommandBinding Command="NavigationCommands.BrowseForward" CanExecute="BrowseForward_CanExecute" Executed="BrowseForward_Executed" />
        <CommandBinding Command="NavigationCommands.GoToPage" CanExecute="GoToPage_CanExecute" Executed="GoToPage_Executed" />
    </Window.CommandBindings>
    
    <DockPanel>
        <ToolBar DockPanel.Dock="Top">
        
            <Button Command="NavigationCommands.BrowseBack">
                <Image Source="/WpfTutorialSamples;component/Images/arrow_left.png" Width="16" Height="16" />
            </Button>
            
            <Button Command="NavigationCommands.BrowseForward">
                <Image Source="/WpfTutorialSamples;component/Images/arrow_right.png" Width="16" Height="16" />
            </Button>
            
            <Separator />
            <TextBox Name="txtUrl" Width="300" KeyUp="txtUrl_KeyUp" />
            
            <Button Command="NavigationCommands.GoToPage">
                <Image Source="/WpfTutorialSamples;component/Images/world_go.png" Width="16" Height="16" />
            </Button>
            
        </ToolBar>
        <WebBrowser Name="wbSample" Navigating="wbSample_Navigating"></WebBrowser>
    </DockPanel>
    
</Window>

2) code-behind

using System;
using System.Windows;
using System.Windows.Input;

namespace WpfTutorialSamples.Misc_controls
{
	public partial class WebBrowserControlSample : Window
	{
		public WebBrowserControlSample()
		{
			InitializeComponent();
			wbSample.Navigate("http://www.wpf-tutorial.com");
		}

		private void txtUrl_KeyUp(object sender, KeyEventArgs e)
		{
			if(e.Key == Key.Enter)
				wbSample.Navigate(txtUrl.Text);
		}

		private void wbSample_Navigating(object sender, System.Windows.Navigation.NavigatingCancelEventArgs e)
		{
			txtUrl.Text = e.Uri.OriginalString;
		}

		private void BrowseBack_CanExecute(object sender, CanExecuteRoutedEventArgs e)
		{
			e.CanExecute = ((wbSample != null) && (wbSample.CanGoBack));
		}

		private void BrowseBack_Executed(object sender, ExecutedRoutedEventArgs e)
		{
			wbSample.GoBack();
		}

		private void BrowseForward_CanExecute(object sender, CanExecuteRoutedEventArgs e)
		{
			e.CanExecute = ((wbSample != null) && (wbSample.CanGoForward));
		}

		private void BrowseForward_Executed(object sender, ExecutedRoutedEventArgs e)
		{
			wbSample.GoForward();
		}

		private void GoToPage_CanExecute(object sender, CanExecuteRoutedEventArgs e)
		{
			e.CanExecute = true;
		}

		private void GoToPage_Executed(object sender, ExecutedRoutedEventArgs e)
		{
			wbSample.Navigate(txtUrl.Text);
		}

	}
}

3) 결과

 

5. GruopBox 컨트롤

- 일련의 컨트롤을 시각적으로 그룹화하여 표현할 수 있음

[예제]

<Window x:Class="WpfTutorialSamples.Misc_controls.GroupBoxSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfTutorialSamples.Misc_controls"
    mc:Ignorable="d"
    Title="GroupBoxSample" Height="220" Width="300">
    
    <Grid>
    <GroupBox Header="GroupBox Sample" Margin="10" Padding="10">
        <StackPanel>
        <TextBlock>First name:</TextBlock>
        <TextBox />
        <TextBlock>Last name:</TextBlock>
        <TextBox />
        <Button Margin="0,20">Add User</Button>
        </StackPanel>
    </GroupBox>
    </Grid>
    
</Window>

[결과]

 

6. Calender 컨트롤

- 전체 달력을 표시해준다.

[예제 1]

- 기본 달력 표시

<Window x:Class="WpfTutorialSamples.Misc_controls.CalendarControlSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="CalendarControlSample" Height="250" Width="300">
    
    <Grid>
    <Calendar />
    </Grid>
    
</Window>

[결과]

[속성 정리]

- Height, Width : 달력 크기 조절

- DisplayDate : 초기 날짜 선택

- SelectionMode

1) SingleRange : 인접한 날짜 범위에서 드래그가 가능하다.

2) MultipleRange : 여러 날짜를 선택할 수 있다.

- BlackoutDates : 특정 날짜들을 제외할 수 있다.

- DisplayMode

1) Year : 년도별로 월을 나타낸다.

2) Decade : 10년 단위로 년도를 나타낸다.

 

7. DatePicker 컨트롤

- 다른 컨트롤들과 함께 사용하는 Calender 컨트롤의 확장판 느낌

- 아래 코드를 삽입해 주면됨

<DatePicker></DatePicker>

[예제]

 

<Window x:Class="WpfTutorialSamples.Misc_controls.DatePickerSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfTutorialSamples.Misc_controls"
    mc:Ignorable="d"
    Title="DatePickerSample" Height="300" Width="300">
    
    <StackPanel Margin="20">
    	
        <Label>Name:</Label>
    	<TextBox />
    	<Label>Birthday:</Label>
        
    	<DatePicker></DatePicker>
    	
        <Label>Gender:</Label>
        
    	<ComboBox>
        	<ComboBoxItem>Female</ComboBoxItem>
        	<ComboBoxItem>Male</ComboBoxItem>
    	</ComboBox>
    	
        <Button Margin="20">Signup</Button>
    </StackPanel>
</Window>

 

[결과]

 

8. Expander 컨트롤

- 콘텐츠를 숨기거나 표시하는 기능

[예제]

<Expander>  
    <TextBlock TextWrapping="Wrap" FontSize="18">  
    Here we can have text which can be hidden/shown using the built-in functionality of the Expander control.  
    </TextBlock>  
</Expander>

[결과]

 

9. Tab 컨트롤

- 말 그대로 탭을 만들 수 있다.

[예제 1]

<Window x:Class="WpfTutorialSamples.Misc_controls.TabControlSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TabControlSample" Height="200" Width="250">
        
    <Grid>
        <TabControl>
        
            <TabItem Header="General">
                <Label Content="Content goes here..." />
            </TabItem>
            
            <TabItem Header="Security" />
            <TabItem Header="Details" />
            
        </TabControl>
    </Grid>
    
</Window>

[결과]

[예제 2]

1) xaml

<Window x:Class="WpfTutorialSamples.Misc_controls.ControllingTheTabControlSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ControllingTheTabControlSample" Height="300" Width="350">
        
    <DockPanel>
    
        <StackPanel Orientation="Horizontal" DockPanel.Dock="Bottom" Margin="2,5">
            <Button Name="btnPreviousTab" Click="btnPreviousTab_Click">Prev.</Button>
            <Button Name="btnNextTab" Click="btnNextTab_Click">Next</Button>
            <Button Name="btnSelectedTab" Click="btnSelectedTab_Click">Selected</Button>
        </StackPanel>
        
        <TabControl Name="tcSample">
        
            <TabItem Header="General">
                <Label Content="Content goes here..." />
            </TabItem>
            
            <TabItem Header="Security" />
            <TabItem Header="Details" />
            
        </TabControl>

    </DockPanel>
</Window>

2) code-behind

using System;
using System.Windows;
using System.Windows.Controls;

namespace WpfTutorialSamples.Misc_controls
{
	public partial class ControllingTheTabControlSample : Window
	{
		public ControllingTheTabControlSample()
		{
			InitializeComponent();
		}

		private void btnPreviousTab_Click(object sender, RoutedEventArgs e)
		{
			// 이전 탭으로 이동        
			int newIndex = tcSample.SelectedIndex - 1;
            
			if(newIndex < 0)
				newIndex = tcSample.Items.Count - 1;
                
			tcSample.SelectedIndex = newIndex;
		}

		private void btnNextTab_Click(object sender, RoutedEventArgs e)
		{
			// 다음 탭으로 이동        
			int newIndex = tcSample.SelectedIndex + 1;
            
			if(newIndex >= tcSample.Items.Count)
				newIndex = 0;
                
			tcSample.SelectedIndex = newIndex;
		}

		private void btnSelectedTab_Click(object sender, RoutedEventArgs e)
		{
			// 현재 탭의 이름을 메세지로 알려줌        
			MessageBox.Show("Selected tab: " + (tcSample.SelectedItem as TabItem).Header);
		}
	}
}

3) 결과

- Selected 탭을 눌렀을 때의 모습이다.

[예제 3]

- TabStripPlacement 속성을 이용해 탭의 위치를 변경할 수 있다.

<Window x:Class="WpfTutorialSamples.Misc_controls.TabStripPlacementSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TabStripPlacementSample" Height="200" Width="250">
    <Grid>

		<!--탭을 하단에 위치시킴-->    
        <TabControl TabStripPlacement="Bottom">
        
            <TabItem Header="General">
                <Label Content="Content goes here..." />
            </TabItem>
            
            <TabItem Header="Security" />
            <TabItem Header="Details" />
            
        </TabControl>
                
    </Grid>
</Window>

[결과]