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

아티클
08/09/2011

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

이 연습에서는 다음 작업을 수행합니다.

프로젝트를 만듭니다.
WPF 컨트롤 형식을 만듭니다.
WPF 컨트롤에 스타일을 적용합니다.

참고

표시되는 대화 상자와 메뉴 명령은 활성 설정이나 버전에 따라 도움말에서 설명하는 것과 다를 수 있습니다. 설정을 변경하려면 도구 메뉴에서 설정 가져오기 및 내보내기를 선택합니다. 자세한 내용은 설정에 대한 작업을 참조하십시오.

사전 요구 사항

이 연습을 완료하려면 다음 구성 요소가 필요합니다.

Visual Studio 2010.

프로젝트 만들기

첫 번째 단계에서는 Windows Forms 프로젝트를 만듭니다.

참고

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

프로젝트를 만들려면

Visual Basic 또는 Visual C#에서 StylingWpfContent라는 새 Windows Forms 응용 프로그램 프로젝트를 만듭니다. 자세한 내용은 방법: 새 Windows Forms 응용 프로그램 프로젝트 만들기를 참조하십시오.

WPF 컨트롤 형식 만들기

WPF 컨트롤 형식을 프로젝트에 추가하고 나면 ElementHost 컨트롤에서 호스팅할 수 있습니다.

WPF 컨트롤 형식을 만들려면

솔루션에 새 WPF UserControl 프로젝트를 추가합니다. 컨트롤 형식의 기본 이름인 UserControl1.xaml을 사용합니다. 자세한 내용은 연습: 디자인 타임에 Windows Forms에서 새 WPF 콘텐츠 만들기를 참조하십시오.
디자인 뷰에서 UserControl1이 선택되어 있는지 확인합니다. 자세한 내용은 방법: 디자인 화면의 요소 선택 및 이동을 참조하십시오.
속성 창에서 Width 및 Height 속성의 값을 200으로 설정합니다.
System.Windows.Controls.Button 컨트롤을 UserControl에 추가한 다음 Content 속성 값을 Cancel로 설정합니다.
두 번째 System.Windows.Controls.Button 컨트롤을 UserControl에 추가한 다음 Content 속성 값을 OK로 설정합니다.
프로젝트를 빌드합니다.

WPF 컨트롤에 스타일 적용

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

WPF 컨트롤에 스타일을 적용하려면

Windows Forms 디자이너에서 Form1을 엽니다.
도구 상자에서 UserControl1을 두 번 클릭하여 폼에 UserControl1의 인스턴스를 만듭니다.

UserControl1의 인스턴스는 새 ElementHost 컨트롤(elementHost1)에서 호스팅됩니다.
elementHost1의 스마트 태그 패널의 드롭다운 목록에서 호스팅된 콘텐츠 편집을 클릭합니다.

UserControl1이 WPF Designer에서 열립니다.
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>

Cancel 단추의 <Button> 태그에 다음 XAML을 삽입하여 이전 단계에서 정의한 SimpleButton 스타일을 Cancel 단추에 적용합니다.
```
Style="{StaticResource SimpleButton}
```
단추 선언은 다음 XAML과 유사합니다.

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

프로젝트를 빌드합니다.
Windows Forms 디자이너에서 Form1을 엽니다.
새 스타일이 단추 컨트롤에 적용됩니다.
디버그 메뉴에서 디버깅 시작을 선택하여 응용 프로그램을 실행합니다.
OK 및 Cancel 단추를 클릭하고 차이점을 확인합니다.

참고 항목

다음을 통해 공유