Question

I have defined style for my WPF listbox but am adding a rectangle manually at the top…any way to build that into the listbox itself? So currently I write the XAML for a rectangle and then add a listbox below it for the final effect:

Style for the ListBox

    <Style BasedOn="{StaticResource {x:Type ListBox}}"
   TargetType="ListBox"
   x:Key="PinnedList">
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                <LinearGradientBrush.GradientStops>
                    <GradientStop Offset="0.0" Color="#90DDDD" />
                    <GradientStop Offset="1.0" Color="#5BFFFF" />
                </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBox">
                <Border Name="Border" Background="{StaticResource WhiteSolid}" BorderBrush="{StaticResource GreatTeaHeaderBrush}" BorderThickness="4" CornerRadius="2">
                    <ScrollViewer Margin="0" Focusable="false">
                        <StackPanel Margin="2" IsItemsHost="True" />
                    </ScrollViewer>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

What I need to do currently to get the effect (rectangle and then the listbox):

                <Rectangle Height="20" Width="20" Fill="{StaticResource GreenTeaBrush}" Margin="-7,37,129,0" VerticalAlignment="Top" x:Name="ui_recPinnedORGs">
                <Rectangle.LayoutTransform>
                    <RotateTransform Angle="-45"/>
                </Rectangle.LayoutTransform>
            </Rectangle>
            <ListBox Style="{StaticResource PinnedList}" Height="Auto" MaxHeight="200" Visibility="Hidden" HorizontalAlignment="Left" Margin="-8,45,0,0" SelectionChanged="ui_lsbPinnedORGs_SelectionChanged"
                     SelectedItem="{Binding Path=SelectedPinnedORGsViewModel, UpdateSourceTrigger=PropertyChanged, NotifyOnSourceUpdated=True, NotifyOnTargetUpdated=True, Mode=TwoWay}"
                     SelectionMode="Single" ItemsSource="{Binding Path=ORGViewModels, UpdateSourceTrigger=PropertyChanged, NotifyOnSourceUpdated=True, NotifyOnTargetUpdated=True, Mode=TwoWay}"
                     ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto"
                     VerticalAlignment="Top" Width="158" Name="ui_lsbPinnedORGs">
                <ListBox.ItemTemplate>
                    <HierarchicalDataTemplate>
                        <Label Content="{Binding Path=ORG.Acronym, UpdateSourceTrigger=PropertyChanged, NotifyOnSourceUpdated=True}" />
                    </HierarchicalDataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

Answer 1

If you extract the ListBox template style you can modify that. For example:

<Page.Resources>
    <SolidColorBrush x:Key="ListBorder" Color="#828790"/>
    <Style x:Key="ListBoxStyle1" TargetType="{x:Type ListBox}">
        <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
        <Setter Property="BorderBrush" Value="{StaticResource ListBorder}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
        <Setter Property="ScrollViewer.PanningMode" Value="Both"/>
        <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBox}">
                    <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="1" SnapsToDevicePixels="true">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <!-- here's a simple rectange -->
                            <Rectangle Height="5" Fill="Blue" />
                            <ScrollViewer Grid.Row="1" Focusable="false" Padding="{TemplateBinding Padding}">
                                <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            </ScrollViewer>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                        </Trigger>
                        <Trigger Property="IsGrouping" Value="true">
                            <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

<Grid>
    <ListBox Style="{DynamicResource ListBoxStyle1}"/>
</Grid>