Temat: ListBox Template SL3

Hej zadam być może dość obszerne pytanie, ale chciałby stworzyć template dla ListBox’a w SL3. Ponieważ jednak zarówno XAML jaki i same Template’y to dla mnie jeszcze w dużej mierze nowość, więc nie wiem za bardzo jak z tym wystartować. Niestety nie znalazłem artykułu, który by kompleksowo prezentował przerobienie całej kontroli (łącznie z prezentacją danych, scrollBar’ami).

Działanie LB widzę następująco:
1. Prezentuje obiekty jako zwykłe napisy z tym że horyzontalnie
2. Zamiast scrollBara są dwa przyciski po obu stronach kontrolki służące do przesuwania obiektów
3. Zaznaczenie obiektu powoduje zmianę jego czczony (kolor, wielkość), no i może jakieś podświetlenie z tyłu lub obramowanie.

Mniej więcej coś takiego:



EDIT: Siakieś małe to wyszło ale mam nadzieję, że się dopatrzycie ;)

Będę wdzięczny za wszelkie sugestie.Norbert Maziarz edytował(a) ten post dnia 22.04.09 o godzinie 16:26

Temat: ListBox Template SL3

ad1.

<Grid x:Name="LayoutRoot">

        <Grid.Resources>

            <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">

                <StackPanel Orientation="Horizontal"/>

            </ItemsPanelTemplate>

        </Grid.Resources>

        <ListBox ItemsPanel="{StaticResource ItemsPanelTemplate1}" VerticalAlignment="Top">

            <ListBoxItem Content="raz" />

            <ListBoxItem Content="dwa" />

            <ListBoxItem Content="trzy" />

        </ListBox>

    </Grid>

ItemsPanel określa gdzie się mają prezentować poszczególne elementy - musi tam być coś co dziedziczy z Panel (Grid, Canvas, StackPanel itd.).
Ad2. Ja proponuję całość robić jako UserControl z dwoma buttonami oraz ListBoxem - z odpowiednią obsługą kliknięć
Ad3. Najlepiej po prostu gwizdnąć istniejący templejt - najszybciej w Blendzie, jednym kliknięciem - i odpowiednio dostosować do swoich potrzeb.

W każdym razie temat wymagający zacięcia designerskiego.

Szukając rozwiązań możesz przelecieć np. http://codeproject.com - śmiało podglądaj rozwiązania w WPFie tylko ze świadomością, że nie wszystko jest w SL, w szczególności zamiast triggerów są state.

Moim zdaniem jak popatrzysz na domyślny templejt to najszybciej nagniesz go do własnych potrzeb - patrząc na XAMLa wyczujesz co i gdzie się zmienia.

Temat: ListBox Template SL3

Dobra trochę poszukałem, ale w sieci znajduje tylko przykłady tego jak zrobić
1. Albo ItemTemplate w stylu dla ListBox’a

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

            <Setter Property="ItemTemplate">                

                <Setter.Value>

                    <DataTemplate>

                        <TextBlock Text="{Binding BookName}" Margin="3,5,3,5" />

                    </DataTemplate>

                </Setter.Value>

            </Setter>

2. Albo jak zrobić styl dla samego ListBoxItem

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

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

            <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 Background="{TemplateBinding Background}">

                            <vsm:VisualStateManager.VisualStateGroups>

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

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

…

Nie wiem jednak jak to zderzyć ze sobą w sytuacji, gdy chcę zrobić w stylu ListBox’a także style dla ListBoxItem ( tak aby można określić także Stany (State)). Oczywiście nie mogę stylu przypisać bezpośrednio do ListBoxItem bo dane będę bindowane.
Próbowałem nawet w tą stronę:

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

            <Setter Property="Background" Value="{x:Null}"/>

            <Setter Property="BorderBrush" Value="{x:Null}"/>

            <Setter Property="ItemTemplate">                

                <Setter.Value>

                    <DataTemplate>

                        <ListBoxItem Style="{StaticResource ListBoxItemStyle2}"/>

                    </DataTemplate>

                </Setter.Value>

            </Setter>

        



        </Style>

Ale wywołuje mi to błędy na stronie.
Może jakąś podpowiedź?? Bo trochę kręcę się w kółko i nie wiem jak to co już wiem połączyć :D

Temat: ListBox Template SL3

Dobra znalazłem rozwiązanie: Trzeba dodać Styl dla ListBoxItem a następnie dodać do ListBox’a następujący kod:

ItemContainerStyle="{StaticResource ListBoxItemStyle2}"