<!--템플릿을 써서 CheckBox의 모양을 다르게 재정의-->
<Window.Resources>
<ControlTemplate x:Key="switch"TargetType="{x:Type CheckBox}"> <!--쓰기편하게 Type명시-->
<Grid><!--비쥬얼-->
<Grid.RowDefinitions> <!--1행2열 정의-->
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" Width="96" Height="48" BorderBrush="Black" BorderThickness="1"><!--1행1열-->
<Canvas Background="LightGray">
<TextBlock Canvas.Left="0" Canvas.Top="0" Foreground="Black" Text="0ff" Margin="2" Name="txtOff"/>
<TextBlock Canvas.Left="0" Canvas.Top="0" Foreground="Black" Text="0n" Margin="2" Name="txtOn"/>
<!--x1y1에서 x2y2로 가는 선을 그려줌/ 시작과끝부분은 둥글게/ 검은색에 두께8-->
<Line Name="lineOff" StrokeThickness="8" Stroke="Black" X1="48" Y1="40" X2="20" Y2="16"
StrokeStartLineCap="Round" StrokeEndLineCap="Round"/>
<!--두번째 선은 감춰져서 시작-->
<Line Name="lineOn" StrokeThickness="8" Stroke="Black" X1="48" Y1="40" X2="76" Y2="16"
StrokeStartLineCap="Round" StrokeEndLineCap="Round" Visibility="Hidden"/>
</Canvas>
</Border>
<!--CheckBox의Content를 가져오기 위해 사용-->
<ContentPresenter Grid.Row="1" Content="{TemplateBinding Content}" HorizontalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers> <!--이벤트-->
<Trigger Property="IsChecked" Value="True">
<!--TargetName을 정하면 정해진 대상의 Property변경 가능-->
<Setter TargetName="lineOff" Property="Visibility" Value="Hidden"/>
<Setter TargetName="lineOn" Property="Visibility" Value="Visible"/>
<Setter TargetName="txtOff" Property="Visibility" Value="Hidden"/>
<Setter TargetName="txtOn" Property="Visibility" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<CheckBox Content="Switch" Template="{StaticResource switch}"></CheckBox>
</Grid>
Check안됐을때
check됐을때
<Window.Resources>
<!--템플릿 : ControlTemplate >> 컨트롤의 집합을 모아놓고 자원으로 활용-->
<ControlTemplate x:Key="btnTemplate">
<Grid>
<Ellipse Width="100" Height="100"> <!--바깥쪽의 큰원-->
<Ellipse.Fill>
<!--위에서 아래방향-->
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="Blue"/> <!--시작색-->
<GradientStop Offset="1" Color="Red"/> <!--끝색-->
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Width="80" Height="80"> <!--안쪽은 좀 작은원-->
<Ellipse.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="White"/>
<GradientStop Offset="1" Color="Transparent"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsPressed" Value="True">
<!--기준점-->
<Setter Property="RenderTransformOrigin" Value=".5,.5" />
<Setter Property="RenderTransform">
<Setter.Value>
<!--크기를 줄여줌-->
<ScaleTransform ScaleX="0.9" ScaleY="0.9" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<!--버튼이지만 버튼스타일이 아니라 템플릿 안에서 선언된 스타일대로 그려진다-->
<Button Template="{StaticResource btnTemplate}">버튼</Button>
</Grid>
<!--Triggers-->
<Window.Resources>
<!--Type명시하면 Setter에 property에 'Button.'을 빼도 된다-->
<Style x:Key="btnStyle" TargetType="{x:Type Button}">
<Setter Property="FontSize" Value="22"/>
<Setter Property="Background" Value="yellow"/>
<Setter Property="Width" Value="80"/>
<Setter Property="Height" Value="80"/>
<Setter Property="RenderTransformOrigin" Value=".5,.5"/>
<!--트리거 : 조건을 만족시켰을때 적용할 스타일-->
<!--서식변화를 줄때 많이 사용-->
<Style.Triggers>
<!--Button에 MouseOver가 True면 아래문장 처리--><!--스타일의 이벤트같은거-->
<Trigger Property="IsMouseOver" Value="True">
<!--변환은 바로 값을 넣어줄 수 없으므로 아래와 같이 처리-->
<Setter Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="20"/>
</Setter.Value>
</Setter> <!--여기까지가 변환처리-->
<Setter Property="FontSize" Value="30" />
<Setter Property="Foreground" Value="Red"/>
</Trigger>
<!--두번째 조건 : 버튼이 눌렸을때-->
<Trigger Property="IsPressed" Value="True">
<Setter Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="-40"/>
</Setter.Value>
</Setter>
<Setter Property="FontSize" Value="45" />
<Setter Property="Foreground" Value="Blue"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Button Style="{StaticResource btnStyle}">1</Button>
<Button Style="{StaticResource btnStyle}">2</Button>
<Button Style="{StaticResource btnStyle}">3</Button>
</StackPanel>
초기상태
MouseOver
<StackPanel.Resources> <!--StackPanel내에서만 사용하는 Resource-->
<!--모든버튼에 편하게 일괄적용 but 버튼구별은 못함-->
<Style TargetType="{x:Type Button}">
<Setter Property="Button.Margin" Value="3,3"/>
<Setter Property="Button.Background" Value="yellow"/>
<Setter Property="Button.RenderTransformOrigin" Value="0.5, 0.5"/>
<Setter Property="Button.RenderTransform">
<Setter.Value>
<RotateTransform Angle="20" />
</Setter.Value>
</Setter>
</Style>
<Style x:Key="redStyle">
<Setter Property="Button.Margin" Value="3,3"/>
<Setter Property="Button.Background" Value="red"/>
</Style>
</StackPanel.Resources>
<Button >버튼</Button>
<Button>버튼</Button>
<!--역시나 더 적은 범위의 Style이 적용됨-->
<Button Style="{StaticResource redStyle}">버튼</Button>
<Button>버튼</Button>
<Button>버튼</Button>
style
- 리소스와 비슷/ 리소스 모음(?)
<!--Style-->
<Window.Resources>
<Style x:Key="userStyle"> <!--resource이기 때문에 name이 아니라 key 사용-->
<Setter Property="Control.FontSize" Value="30" /> <!--Property="자료형.지정속성" value="속성값"-->
<Setter Property="Control.FontFamily" Value="궁서" />
<Setter Property="Control.Background" Value="Black" />
<Setter Property="Control.Foreground" Value="White" />
</Style>
<SolidColorBrush x:Key="redBrush" Color="Red"/>
</Window.Resources>
<StackPanel>
<!--스타일-->
<Button Margin="3,3" Style="{StaticResource userStyle}">버튼1</Button> <!--{} << 확장프로퍼티-->
<Button Margin="3,3" Style="{StaticResource userStyle}">버튼2</Button>
<!--더 적은 범위의 속성값으로 적용됨(버튼3)->
<Button Margin="3,3" Style="{StaticResource userStyle}" Background="{StaticResource redBrush}">버튼3</Button>
<!--TextBox와 Label에도 적용됨-->
<TextBox Style="{StaticResource userStyle}">텍스트박스입니다.</TextBox>
<!--화면내 많은 컨트롤들의 속성을 통일시켜줄때 많이 사용-->
<Label Style="{StaticResource userStyle}">문자열입니다</Label>
</StackPanel>
*버튼3만 다르게 표시
파일내에서 참조
<Window.Resources>
<!--Window내에서 모두 사용가능-->
<SolidColorBrush x:Key="yellowBrush" Color="Yellow"/>
</Window.Resources>
<StackPanel>
<!--확장프로퍼티{}-->
<!--실제코드는 전과 큰 차이가 없지만. 일괄수정시 편하다-->
<Button Margin="5,5" Background="{StaticResource yellowBrush}">버튼</Button><Button Margin="5,5" Background="{StaticResource yellowBrush}">버튼</Button>
</StackPanel>
프로젝트(?) 전체에서 참조 - ResourceDitionary 사용
-ResourceDictionary
<--프로젝트 솔루션에서 /추가 - 리소스사전/ (Dictionary1.xaml) -->
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<SolidColorBrush x:Key="testBrush" Color="Red"/><!--단일자원 리소스-->
</ResourceDictionary>
-사용
<Window.Resources>
<ResourceDictionary Source="Dictionary1.xaml"/><!--리소스사전 참조-->
</Window.Resources>
<StackPanel>
<!--사용방법은 똑같다-->
<Button Background="{StaticResource testBrush}">버튼1</Button>
<Button Background="{StaticResource testBrush}">버튼2</Button>
<Button Background="{StaticResource testBrush}">버튼3</Button>
</StackPanel>
<Stackpanel>
<!--변형(Transform)-->
<Button Margin="0" Width="50" Height="50">버튼</Button>
<!--RenderTransformOrigin="1,1" - 우측하단기준점설정(05.,05 면 버튼 중심)-->
<Button Margin="0" Width="50" Height="50" RenderTransformOrigin="0.5,0.5">
<Button.RenderTransform> <!-- <Button.LayoutTransform>은 컨트롤이 서로 겹치지 않게 변형되게 해준다-->
<RotateTransform Angle="45"/> <!--회전변형을 위한 Element 디폴트 기준축은 좌측상단(0,0)-->
</Button.RenderTransform>
<Button.Content>
버튼1
</Button.Content>
</Button>
<Button Margin="0" Width="50" Height="50" RenderTransformOrigin="0.5,0.5">
<Button.RenderTransform>
<RotateTransform Angle="45"/>
</Button.RenderTransform>
<Button.Content>
버튼2
</Button.Content>
</Button>
<Button Margin="0" Width="50" Height="50" RenderTransformOrigin="0.5,0.5">
<Button.RenderTransform>
<ScaleTransform ScaleX="2" ScaleY="2"/><!--확대하고싶은 배율(0.5면 반으로 줄어듬) 모든 변형을 다 기준점이 있음-->
</Button.RenderTransform>
<Button.Content>
버튼3
</Button.Content>
</Button>
<Button Margin="0" Width="50" Height="50" RenderTransformOrigin="0.5,0.5">
<Button.RenderTransform>
<SkewTransform AngleX="30" AngleY="30"/><!--비트는 변형-->
</Button.RenderTransform>
<Button.Content>
버튼4
</Button.Content>
</Button>
</StackPanel>
<UniformGrid>
<Button Click="Button_Click">확인</Button>
<!--popupAnimation : 사라지는효과/ placement : 나타나는 위치/ AllowsTransparency : 배경투명-->
<Popup PopupAnimation="Fade" Placement="Mouse" Name="popup1" AllowsTransparency="True">
<!--테두리 감싸는 속성-->
<Border Padding="10" BorderThickness="1" CornerRadius="20" BorderBrush="Red" Background="White"> <TextBlock>테스트</TextBlock>
</Border>
</Popup>
<MediaElement Width="160" Height="120" Name="media1"></MediaElement><!--Media재생용-->
<StackPanel>
<Button Click="Button_Click_1">재생</Button>
<Button Click="Button_Click_2">멈춤</Button>
</StackPanel>
</UniformGrid>
이벤트
private void Button_Click(object sender, RoutedEventArgs e)//button클릭
{
if (popup1.IsOpen)
popup1.IsOpen = false;
else
popup1.IsOpen = true;
}
private void Button_Click_1(object sender, RoutedEventArgs e)//미디어재생용 (시작)
{
media1.Source = new Uri(@"D:\[06]WPF\dh.wmv"); //소스 경로지정
media1.LoadedBehavior = MediaState.Manual;
media1.Play();
}
private void Button_Click_2(object sender, RoutedEventArgs e)//미디어재생용 (멈춤)
{
media1.Stop();
}
<!--TreeView, Menu, Toolbar Tray-->
<DockPanel>
<Menu DockPanel.Dock="Top">
<!--Menu : DockPanel의 Dock속성을 위로-->
<MenuItem Header="파일(_F)">
<MenuItem Header="열기(_O)" Click="MenuItem_Click" />
<!--Click Event-->
<MenuItem Header="닫기(_X)"/>
</MenuItem>
<MenuItem Header="편집(_E)">
<MenuItem Header="잘라내기(_C)"/>
<MenuItem Header="붙여넣기(_P)"/>
<MenuItem Header="삭제(_D)"/>
</MenuItem>
</Menu>
<TabControl DockPanel.Dock="Top">
<TabItem Header="페이지1">
<!--이게 TabPage-->
<StackPanel>
<!--TabItem은 자식을 하나만 가질수 있으므로 다른 많은 자식을 가질수 있는 Content를 사용(Ex StackPanel)-->
<Button>페이지1버튼</Button>
<TextBox/>
<RichTextBox></RichTextBox>
<PasswordBox></PasswordBox>
<InkCanvas Width="300" Height="200" Background="Yellow"/>
</StackPanel>
</TabItem>
<TabItem Header="페이지2">
<StackPanel>
<!--IsExpanded : 창이 열리자마자 열려있게 할지 여부-->
<Expander Header="항목1" IsExpanded="True">
<GroupBox Header="소항목1">
<TextBlock>테스트...</TextBlock>
</GroupBox>
</Expander>
<Expander Header="항목2">
<TextBlock>테스트2...</TextBlock>
</Expander>
<TreeView>
<TreeViewItem Header="데이터베이스">
<TreeViewItem Header="시스템 데이터베이스"/>
<TreeViewItem Header="Northwind"/>
</TreeViewItem>
<TreeViewItem Header="보안">
<TreeViewItem Header="로그인">
<TreeViewItem Header="Windows"/>
<TreeViewItem Header="Passport"/>
<TreeViewItem Header="Forms"/>
</TreeViewItem>
</TreeViewItem>
<TreeViewItem Header="자격증명"/>
<TreeViewItem Header="서버역할"/>
</TreeView>
</StackPanel>
</TabItem>
</TabControl>
<ToolBarTray DockPanel.Dock="Top">
<!--ToolBarTray-->
<ToolBar>
<Button>새프로젝트</Button>
<Button>열기</Button>
<Button>저장</Button>
</ToolBar>
<ToolBar>
<!--사용하기위해 이름지정-->
<TextBox Width="100" x:Name="txtSerch"/>
<Button Content="검색하기" Click="Button_Click"/>
<!--Click Event-->
</ToolBar>
</ToolBarTray>
</DockPanel>
<XAML>
<Canvas><!--Canvas에서는 좌표가 같을경우 진짜로 두 Contents가 겹쳐있는거다. (다른경우는 앞에껄 빼고 들어간것)-->
<Button Canvas.Left="100" Canvas.Top="50">Btn1</Button> <!--맞춘 방향을 기준으로 Ancher-->
<Button Canvas.Left="200" Canvas.Top="100">Btn2</Button>
</Canvas>
<C#>
- XAML
<Canvas Name="canvas"></Canvas>
- C#
Button btn1 = new Button();
btn1.Content = "Btn1";
canvas.Children.Add(btn1);//<canvas>에 넣고
Canvas.SetLeft(btn1, 100);//위치지정
Canvas.SetTop(btn1, 50);
Button btn2 = new Button();
btn2.Content = "Btn2";
canvas.Children.Add(btn2);
Canvas.SetLeft(btn2, 200);
Canvas.SetTop(btn2, 100);
RECENT COMMENT