[CS][WPF] ListBoxItem BackgroundColor ListBox 가로폭에 맞추기

ListBox를 가로폭에 맞춰서 화면에 나타나야하는 경우가 존재한다.

두가지 방법으로 ListBoxItem을 가로폭에 맞춰보자

HorizontalContentAlignment 이용하기

FrameA Item의 배경색상을 가득 ListBox 면적만큼 가득 채우기 위해서는

ListBox 요소 HorizontalContentAlignment 속성을 Stretch로 설정한다.

 

주의사항은 Template에 적용된 StackPanel의 Orientation 속성이 Vertical일 경우에만 정상적으로 작동된다.

StackPanel 대신에 Grid, Border를 사용하자.

 

<Border BorderBrush="Black" BorderThickness="2" Grid.Column="0" Grid.Row="1"
		Margin="10 0 10 10">
	<ListBox x:Name="listBox"
			 Background="#FFCACACA"
			 BorderBrush="#FF393939"
			 ItemTemplate="{DynamicResource ListBoxItemTemplate}"
			 ItemsSource="{Binding FrameList}"
			 SelectedIndex="0">
	</ListBox>
</Border>

 

적용 후:

HorizontalContentAlignment="Stretch"

 

Stretch 값이 제대로 적용되지 않는다면

ListBoxItemTemplate에 적용된 Panel Alignment, Orientation에 속성 값을 확인하자.

 

ListBox 요소 Margin 속성을 설정하여 정확히 늘릴 수 있다. 하지만 선택범위가 오버되는 현상이 발생된다.

(Margin="-6 0 -6 0")

 

 

ListBoxItem의 높이를 크게 잡고 싶다면 TextBlock, Container Panel 요소에 Padding 주어 확장하자.

배경색과 무관하게 텍스트의 위치를 조절하고 싶다면 TextBlock 요소 Margin 속성을 이용하자.

 

 

StackPanel은 Orientation에서 Horizontal 속성을 자주 사용하게 되는데

가장 좋은 방법은 Grid 배경색을 List.Items가 가지고 있는 색상(Color)으로 바인딩하고

Stack Panel로 텍스트만 출력하는 것이다.

 

ListBox에 Padding -6 0 -6 0을 주어 ListBox 크기에 맞췄다.

<!-- DataTemplate -->
<DataTemplate x:Key="ListBoxItemTemplate">
	<Grid Background="{Binding Color}">
		<StackPanel Orientation="Horizontal" Margin="0 10 0 10">
			<TextBlock Text="{Binding ListBoxItem}"/>
		</StackPanel>
	</Grid>
</DataTemplate>

<!-- ListBox -->
<ListBox x:Name="listBox"
		 Background="Red"
		 Padding="-6 0 -6 0"
		 ItemTemplate="{DynamicResource ListBoxItemTemplate}"
		 ItemsSource="{Binding FrameList}"
		 HorizontalContentAlignment="Stretch"
		 SelectedIndex="0">
</ListBox>

 

 

선택 오버 현상 고치기

선택 영역을 초과하여 나타나는 현상을 고치기 위해서 ControlTemplate을 사용한다.

ControlTemplate을 적용하려면 ListBox요소 ItemContainerStyle 속성을 설정한다.

 

Margin 속성으로 선택 영역의 크기를 설정한다. 임시로 좌우 여백을 0으로 주었다.

<Style x:Key="ListBoxStyle1" TargetType="ListBoxItem" >
	<Setter Property="Template">
		<Setter.Value>
			<ControlTemplate TargetType="{x:Type ListBoxItem}">
				<Border Background="{TemplateBinding Background}" BorderThickness="4">
					<Border Background="{Binding Color}"  Margin="0 5 5 5">
						<TextBlock Text="{Binding ListBoxItem}" Padding="0 20 0 20"/>
					</Border> 
				</Border>
				
				<ControlTemplate.Triggers>
					<Trigger Property="IsMouseOver" Value="True">
						<Setter Property="Background" Value="Black" />
					</Trigger>
					<Trigger Property="IsSelected" Value="True">
						<Setter Property="Background" Value="#ffffcc00" />
					</Trigger>
					<Trigger Property="IsFocused" Value="True">
						<Setter Property="Background" Value="#00aa88" />
					</Trigger>
				</ControlTemplate.Triggers >
			</ControlTemplate>
		</Setter.Value>
	</Setter>
</Style>

ListBox에 정의한 ListBoxStyle1을 사용한다.

<ListBox
	x:Name="listBox"
	ItemsSource="{Binding FrameList}"
	HorizontalContentAlignment="Stretch"
	BorderBrush="Transparent"
	ItemContainerStyle="{StaticResource ListBoxStyle1}"
	SelectedIndex="0"/>

 

결과: