최고보다,최선을...

ListBox Control

<ListBox x:Name="DemoList" HorizontalAlignment="Left"  ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden" VerticalAlignment="Stretch" Cursor="Hand" Style="{StaticResource DemoListBoxStyle}" ItemContainerStyle="{StaticResource DemoListBoxItemStyle}">

</ListBox>

Style Source

<Style x:Key="DemoListBoxStyle" TargetType="ListBox">

<Setter Property="ItemsPanel">

<Setter.Value>

<ItemsPanelTemplate>

<!-- 리스트박스의 페널은 스텍페널 입니다. Orientation : Horizontal-->

<StackPanel Orientation="Horizontal"

VerticalAlignment="Stretch"

HorizontalAlignment="Center" />

</ItemsPanelTemplate>

</Setter.Value>

</Setter>

</Style>

ItemContatinerStyle Source

<Style x:Key="DemoListBoxItemStyle" TargetType="ListBoxItem">

<Setter Property="Padding" Value="1"/>

<Setter Property="HorizontalContentAlignment" Value="Left"/>

<Setter Property="VerticalContentAlignment" Value="Top"/>

<Setter Property="Background" Value="Transparent"/>

<Setter Property="BorderThickness" Value="1"/>

<Setter Property="TabNavigation" Value="Local"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="ListBoxItem">

<Grid x:Name="grid" Width="20" Background="{TemplateBinding Background}">

<vsm:VisualStateManager.VisualStateGroups>

<vsm:VisualStateGroup x:Name="CommonStates">

<vsm:VisualStateGroup.Transitions>

<vsm:VisualTransition GeneratedDuration="00:00:00.1000000"/>

<vsm:VisualTransition From="Normal" GeneratedDuration="00:00:00.1000000" To="MouseOver"/>

</vsm:VisualStateGroup.Transitions>

<vsm:VisualState x:Name="Normal"/>

<vsm:VisualState x:Name="MouseOver">

<Storyboard>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="grid" Storyboard.TargetProperty="(FrameworkElement.Width)">

<SplineDoubleKeyFrame KeyTime="00:00:00" Value="50"/>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</vsm:VisualState>

<vsm:VisualState x:Name="Disabled">

<Storyboard>

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity">

<SplineDoubleKeyFrame KeyTime="0" Value=".55"/>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</vsm:VisualState>

</vsm:VisualStateGroup>

<vsm:VisualStateGroup x:Name="SelectionStates">

<vsm:VisualState x:Name="Unselected"/>

<vsm:VisualState x:Name="Selected">

<Storyboard/>

</vsm:VisualState>

</vsm:VisualStateGroup>

<vsm:VisualStateGroup x:Name="FocusStates">

<vsm:VisualState x:Name="Focused">

<Storyboard/>

</vsm:VisualState>

<vsm:VisualState x:Name="Unfocused"/>

</vsm:VisualStateGroup>

</vsm:VisualStateManager.VisualStateGroups>

<ContentPresenter HorizontalAlignment="Stretch" Margin="{TemplateBinding Padding}" x:Name="contentPresenter" VerticalAlignment="Stretch" Width="Auto" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

Test Code

List<Rectangle> items = new List<Rectangle>()

            {

                new Rectangle(){Fill = new SolidColorBrush(Colors.Red)},

                new Rectangle(){Fill = new SolidColorBrush(Colors.Yellow)},

                new Rectangle(){Fill = new SolidColorBrush(Colors.Orange)},

                new Rectangle(){Fill = new SolidColorBrush(Colors.Green)},

                new Rectangle(){Fill = new SolidColorBrush(Color.FromArgb(100,213,236,191))},

                new Rectangle(){Fill = new SolidColorBrush(Color.FromArgb(100,253,218,180))},

                new Rectangle(){Fill = new SolidColorBrush(Color.FromArgb(100,165,149,185))},

                new Rectangle(){Fill = new SolidColorBrush(Color.FromArgb(100,138,42,4))},

                new Rectangle(){Fill = new SolidColorBrush(Colors.Blue)},

                new Rectangle(){Fill = new SolidColorBrush(Colors.Black)}

            };

DemoList.ItemsSource = items;