Pour compléter le sujet de mon cher et tendre collègue YoView (La listbox WPF), je vais vous parler un tant soit peu de la listBox côté SilverLight.
Entre WPF et SilverLight nous retrouvons quasiment les mêmes possibilités de templétisation et de databinding des éléments.
Pour ma part, j'ai décidé de transformer le comportement normal d'une listbox en un caroussel de photo.
Un peu de XAML, illustrant le code de ma listBox
<ListBox x:Name="PersonList" ItemsSource="{Binding}" Style="{StaticResource PersonListStyle}" ItemContainerStyle="{StaticResource PersonItemStyle}" Width="975.672" Height="563.776" Padding="0" />
La listBox est liée à une liste d'objets Person contenant chacun une photo.
2 templates vont définir le style global de la liste ainsi que le style de chaque élément à l'intérieur.
1) Commençons par le plus simple, le template de la listBox:
<Style x:Key="PersonListStyle" TargetType="ListBox" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<Grid>
<Border BorderBrush="transparent" BorderThickness="0" CornerRadius="3">
<Border BorderBrush="transparent" BorderThickness="0" CornerRadius="2">
<ItemsPresenter />
</Border>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
2) Un peu plus complexe, le template des items de la liste (ListBoxItem):
<Style x:Key="PersonItemStyle" x:Name="DEDE" TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Canvas x:Name="RootElement" Canvas.Top="{Binding CanvasTop}"
Canvas.Left="{Binding CanvasLeft}"
Canvas.ZIndex="{Binding CanvasZi}">
<StackPanel x:Name="MonPanelPerson" Canvas.Top="{Binding CanvasTop}"
Canvas.Left="{Binding CanvasLeft}"
Canvas.ZIndex="{Binding CanvasZi}">
<Border x:Name="BorderImgHaut" BorderBrush="Gray" BorderThickness="2"
CornerRadius="5" Background="Transparent"
Cursor="Hand">
<Image x:Name="ImgHaut" Source="{Binding ImgSource}"
Width="{Binding WidthA}"
Height="{Binding HeightA}">
</Image>
</Border>
<Border x:Name="BorderImgBas" BorderBrush="Gray"
BorderThickness="2"
CornerRadius="3"
Background="Transparent"
RenderTransformOrigin="0.5,0.45">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="0.7"/>
<SkewTransform/>
<RotateTransform Angle="-180" />
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
<Image x:Name="ImgBas" Source="{Binding ImgSource}"
Width="{Binding WidthA}"
Height="{Binding HeightA}"
Opacity="0.6" >
</Image>
<Border.OpacityMask>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset=".8" Color="Black"/>
<GradientStop Offset="0" Color="Transparent"/>
</LinearGradientBrush>
</Border.OpacityMask>
</Border>
</StackPanel>
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Au delà de tout le code XAML très verbeux, il faut juste observer la capacité des contrôles SilverLight
et WPF en général à s'adapter au bon vouloir du développeur/graphiste
Un prochain billet présentera la logique derrière le caroussel.
Alexandre Equoy