다음을 통해 공유

연습: WPF 콘텐츠 스타일 지정

이 문서에서는 Windows Forms에 호스트되는 WPF(Windows Presentation Foundation) 컨트롤에 스타일을 적용하는 방법을 보여 줍니다.

필수 조건

이 연습을 완료하려면 Visual Studio가 필요합니다.

프로젝트를 만듭니다.

Visual Studio를 열고 Visual Basic 또는 Visual C#에서 ArrangeElementHost이라는 새 Windows Forms 앱 프로젝트를 만듭니다.

비고

WPF 콘텐츠를 호스트하는 경우 C# 및 Visual Basic 프로젝트만 지원됩니다.

WPF 컨트롤 형식을 만들기

프로젝트에 WPF 컨트롤 형식을 추가한 후 ElementHost 컨트롤에서 호스트할 수 있습니다.

  1. 새 WPF UserControl 프로젝트를 솔루션에 추가합니다. 컨트롤 형식의 기본 이름인 UserControl1.xaml을 사용합니다. 자세한 내용은 연습: 디자인 타임에 Windows Forms 새 WPF 콘텐츠 만들기를 참조하세요.

  2. 디자인 뷰에서 UserControl1이 선택되었는지 확인합니다.

  3. 속성 창에서 Width 및 Height 속성의 값을 200으로 설정합니다.

  4. UserControl에 System.Windows.Controls.Button 컨트롤을 추가하고 Content 속성 값을 취소로 설정합니다.

  5. UserControl에 System.Windows.Controls.Button 컨트롤을 추가하고 Content 속성 값을 확인으로 설정합니다.

  6. 프로젝트를 빌드합니다.

WPF 컨트롤에 스타일 적용하기

WPF 컨트롤에 다른 스타일을 적용하여 모양과 동작을 변경할 수 있습니다.

  1. Windows Forms 디자이너에서 DemoMarqueeControl을 엽니다.

  2. 도구 상자에서 UserControl1을 두 번 클릭하여 폼에 UserControl1의 인스턴스를 만듭니다.

    UserControl1 인스턴스가 elementHost1이라는 새 ElementHost 컨트롤에서 호스트됩니다.

  3. elementHost1에 대한 스마트 태그 패널의 드롭다운 목록에서 호스트된 콘텐츠 편집을 클릭합니다.

    WPF 디자이너에서 UserControl1 창이 열립니다.

  4. XAML 뷰에서 <UserControl> 여는 태그 뒤에 다음 XAML을 삽입합니다. 이 XAML은 대비되는 그라데이션 테두리가 있는 그라데이션을 만듭니다. 컨트롤을 클릭하면 그라데이션이 변경되어 눌린 단추 모양을 생성합니다. 자세한 내용은 스타일 지정 및 템플릿을 참조하세요.

    <UserControl.Resources>
 <LinearGradientBrush x:Key="NormalBrush" EndPoint="0,1" StartPoint="0,0">
     <GradientStop Color="#FFF" Offset="0.0"/>
     <GradientStop Color="#CCC" Offset="1.0"/>
 </LinearGradientBrush>
 <LinearGradientBrush x:Key="PressedBrush" EndPoint="0,1" StartPoint="0,0">
     <GradientStop Color="#BBB" Offset="0.0"/>
     <GradientStop Color="#EEE" Offset="0.1"/>
     <GradientStop Color="#EEE" Offset="0.9"/>
     <GradientStop Color="#FFF" Offset="1.0"/>
 </LinearGradientBrush>
 <LinearGradientBrush x:Key="NormalBorderBrush" EndPoint="0,1" StartPoint="0,0">
     <GradientStop Color="#CCC" Offset="0.0"/>
     <GradientStop Color="#444" Offset="1.0"/>
 </LinearGradientBrush>
 <LinearGradientBrush x:Key="BorderBrush" EndPoint="0,1" StartPoint="0,0">
     <GradientStop Color="#CCC" Offset="0.0"/>
     <GradientStop Color="#444" Offset="1.0"/>
 </LinearGradientBrush>
 <LinearGradientBrush x:Key="PressedBorderBrush" EndPoint="0,1" StartPoint="0,0">
     <GradientStop Color="#444" Offset="0.0"/>
     <GradientStop Color="#888" Offset="1.0"/>
 </LinearGradientBrush>

 <Style x:Key="SimpleButton" TargetType="{x:Type Button}" BasedOn="{x:Null}">
     <Setter Property="Background" Value="{StaticResource NormalBrush}"/>
     <Setter Property="BorderBrush" Value="{StaticResource NormalBorderBrush}"/>
     <Setter Property="Template">
         <Setter.Value>
             <ControlTemplate TargetType="{x:Type Button}">
                 <Grid x:Name="Grid">
                     <Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}"/>
                     <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
                 </Grid>
                 <ControlTemplate.Triggers>
                     <Trigger Property="IsPressed" Value="true">
                         <Setter Property="Background" Value="{StaticResource PressedBrush}" TargetName="Border"/>
                         <Setter Property="BorderBrush" Value="{StaticResource PressedBorderBrush}" TargetName="Border"/>
                     </Trigger>
                 </ControlTemplate.Triggers>
             </ControlTemplate>
         </Setter.Value>
     </Setter>
 </Style>
</UserControl.Resources>

  5. 다음 XAML을 취소 단추의 <Button> 태그에 삽입하여 이전 단계에서 정의된 SimpleButton 스타일을 취소 단추에 적용합니다.

    Style="{StaticResource SimpleButton}

    단추 선언은 다음 XAML과 비슷합니다.

    <Button Height="23" Margin="41,52,98,0" Name="button1" VerticalAlignment="Top"
             Style="{StaticResource SimpleButton}">Cancel</Button>

  6. 프로젝트를 빌드합니다.

  7. Windows Forms 디자이너에서 DemoMarqueeControl을 엽니다.

  8. 단추 컨트롤에 새 스타일이 적용됩니다.

  9. 디버그 메뉴에서 디버깅 시작을 선택하여 애플리케이션을 실행합니다.

  10. 확인 및 취소 단추를 클릭하고 차이점을 확인합니다.

참고하십시오

  • Last updated on