Blend에서 Silverlight 컨트롤에 대한 ListBox 컨트롤 스타일 지정 팁

아티클
10/09/2014

JJ170044.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(ko-kr,VS.120).png

기본 제공 ListBox 컨트롤을 사용하여 사용자 지정 ListBox 템플릿을 만들 수 있습니다. 기본적으로 ListBox 컨트롤의 모양은 다음과 같습니다.

JJ170044.3cc2d3af-6781-4937-b068-c3448a56406d(ko-kr,VS.120).png

ListBox 템플릿의 파트

ListBox 컨트롤에는 ContentElement 파트 하나가 있습니다. 이 파트는 필수입니다.

팁

템플릿의 파트를 보려면 템플릿을 수정하는 동안 파트 패널을 엽니다.

ListBox 컨트롤 상태

기본적으로 ListBox 컨트롤은 다음과 같이 ValidationStates 상태 그룹의 세 가지 상태 중 하나일 수 있습니다.

상태 이름	설명
Valid	ListBox 컨트롤이 유효할 때의 컨트롤 모양
InvalidUnfocused	ListBox 컨트롤이 유효하지 않은 상태이며 키보드 포커스가 없을 때의 컨트롤 모양.
InvalidFocused	ListBox 컨트롤이 유효하지 않은 상태이며 키보드 포커스가 있을 때의 컨트롤 모양.

상태를 선택하면 상태 기록이 켜지고 해당 상태에 적용하는 모든 변경 내용이 기록됩니다. 상태 기록을 끄려면 아트보드에서 기록 단추 JJ170044.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(ko-kr,VS.120).png 상태 패널에서 기준을 선택합니다.

개체를 ListBox 컨트롤로 변환

다음 그림은 디자이너가 만든 ListBox의 전체 디자인(comp)입니다.

ListBox

이 예에서는 다음 절차의 2단계에 있는 XAML 코드를 사용하며 이 코드는 ListBox 컨트롤 템플릿을 사용하여 사용자 지정 암호 상자를 만드는 위 그래픽에 해당합니다.

참고

위에 있는 그래픽은 아직은 ListBox 컨트롤이 아니지만 ListBox 컨트롤로 변환할 수 있는 아트워크임을 유념해야 합니다.

새 Microsoft Silverlight 프로젝트를 엽니다. 코드 보기에서 다음 코드를 찾은 다음 닫는 슬래시 표시(/)를 삭제합니다.
```
<Grid x:Name="LayoutRoot" Background="White"/>
```

다음 코드를 복사하여 1단계에서 찾은 새 프로젝트의 코드 뒤에 붙여 넣습니다.

<Grid x:Name="root" Height="146" Width="146">
   <Rectangle Fill="#FF333333" RadiusX="3" RadiusY="3" />
   <TextBlock Margin="5,5,0,0" Foreground="White" Text="Lorem"/>
   <TextBlock Margin="5,26,0,0" Foreground="White" Text="Ipsum"/>
   <Grid x:Name="verticalscrollbar" Width="17" Height="146" 
       HorizontalAlignment="Right" >
      <Rectangle x:Name="track" Fill="#FF3D3D3D" StrokeThickness="0" />
   <Path x:Name="smalldecrease" Fill="Gray" Stretch="Fill" Width="7" Height="7"
      Data="M200,312 L204,312 L200,305 z" Margin="0,5,0,0" 
      VerticalAlignment="Top"/>
   <Rectangle 
      x:Name="thumb" Fill="Gray" RadiusX="3" RadiusY="3" Height="61" Width="7" 
      Margin="0,24,0,0" VerticalAlignment="Top"/>
   <Path x:Name="smallincrease" Fill="Gray" Stretch="Fill" Width="7" Height="7"
      Data="M200,305 L200,312 L204,305 z" Margin="0,0,0,5" 
      VerticalAlignment="Bottom" />
   </Grid>
</Grid>

붙여 넣은 코드 뒤에 닫는 Grid 태그(</Grid>)를 추가합니다.
개체 및 타임라인 패널에서 root를 마우스 오른쪽 단추로 클릭한 후 컨트롤로 만들기를 클릭합니다. 컨트롤로 만들기 대화 상자에서 ListBox를 클릭한 다음 확인을 클릭합니다.
개체 및 타임라인 패널에서 ScrollViewer를 마우스 오른쪽 단추로 클릭한 다음 삭제를 클릭합니다.
Shift 키를 누른 상태에서 TextBlock 요소를 모두 선택합니다. 마우스 오른쪽 단추로 클릭하고 잘라내기를 클릭합니다.
범위 반환를 클릭한 다음 Ctrl+V를 네 번 눌러 새 TextBlock 요소 여덟 개를 만듭니다. Shift 키를 누른 상태에서 TextBlock 요소를 각각 선택합니다.
속성 패널의 레이아웃 범주에서 Width 상자 오른쪽에 있는 고급 옵션을 클릭한 다음 다시 설정을 클릭합니다. Height에 대해 이 작업을 반복합니다.
개체 및 타임라인 패널에서 ListBox를 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 클릭한 다음 현재 항목 편집을 클릭합니다.
개체 및 타임라인 패널에서 root를 마우스 오른쪽 단추로 클릭하고 ListBox의 파트로 만들기를 클릭한 다음 ScrollViewer를 클릭합니다. 확인을 클릭합니다.
개체 및 타임라인 패널에서 ContentPresenter를 마우스 오른쪽 단추로 클릭하고 삭제를 클릭합니다.
개체 및 타임라인 패널에서 root를 클릭합니다. 파트 패널에서 ScrollContentPresenter를 두 번 클릭합니다.
개체 및 타임라인 패널에서 VerticalScrollBar를 마우스 오른쪽 단추로 클릭하고 ScrollViewer의 파트로 만들기를 클릭한 다음 VerticalScrollBar를 클릭합니다. 확인을 클릭합니다.

VerticalScrollBar의 스타일을 지정하려면 Blend에서 Silverlight 컨트롤에 대한 ScrollBar 컨트롤 스타일 지정 팁을 참조하십시오.
범위 반환를 클릭하여 ScrollViewer 템플릿으로 돌아갑니다.
다음 그림에 설명된 대로 눈금자를 스크롤 막대 옆 오른쪽으로 끄는 동안 파란색 눈금자를 컨트롤의 왼쪽에서 클릭하여 루트를 두 개 열로 분리합니다.
오른쪽 열에서는 별을 두 번 클릭합니다. 자동 아이콘 이 나타납니다.
속성 패널의 레이아웃 범주에서 고급 속성 표시를 클릭합니다. MinWidth 오른쪽에 있는 고급 옵션을 클릭한 다음 다시 설정을 클릭합니다.
개체 및 타임라인 패널에서 ScrollContentPresenter를 클릭합니다. 속성 패널의 레이아웃 범주에서 ColumnSpan 오른쪽에 있는 고급 옵션을 클릭한 다음 다시 설정을 클릭합니다.
개체 및 타임라인 패널에서 VerticalScrollBar를 선택한 다음 분할 보기로 전환합니다. 다음 코드를 복사하고 <ScrollBar x:Name="VerticalScrollBar"로 시작하는 XAML 줄에 붙여 넣습니다.
```
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" 
Maximum="{TemplateBinding ScrollableHeight}" 
Value="{TemplateBinding VerticalOffset}" 
ViewportSize="{TemplateBinding ViewportHeight}"
```
참고

사용자 지정 식을 사용하여 이러한 속성을 설정할 수도 있습니다.
범위 반환을 클릭합니다. 개체 및 타임라인 패널에서 ScrollViewer를 클릭합니다. 자산 패널에서 컨트롤을 클릭하고 모두를 클릭한 다음 ItemsPresenter를 클릭하여 ItemsPresenter를 추가합니다. ListBox의 왼쪽 열에서 아트보드에 ItemsPresenter를 그립니다.
개체 및 타임라인 패널에서 ItemsPresenter를 선택한 다음 속성 패널의 레이아웃 범주에서 Width 속성 오른쪽에 있는 고급 옵션을 클릭하고 다시 설정을 클릭합니다. Height에 대해 이 작업을 반복합니다.
프로젝트를 빌드(Ctrl+Shift+B)한 다음 F5 키를 눌러 프로젝트를 테스트합니다.

중요

13단계에 설명된 대로 Blend에서 Silverlight 컨트롤에 대한 ScrollBar 컨트롤 스타일 지정 팁을 사용하여 ScrollBar 의 스타일을 지정하지 않으면 ListBox 가 예상대로 작동하지 않습니다.