SurfaceListBox Selected Item Template

Question

I am using the Microsoft Surface SDK and I am having trouble styling the selected item.

So far I have:

<s:SurfaceListBox Name="listy" Background="Transparent"
                    FontSize="50" Foreground="White" BorderBrush="White"
                    HorizontalContentAlignment="Center"
                    Margin="5,5,5,100" SelectionMode="Single">
    <s:SurfaceListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}" Foreground="White" />
        </DataTemplate>
    </s:SurfaceListBox.ItemTemplate>
    <s:SurfaceListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <ContentPresenter HorizontalAlignment="Center" />
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Background" Value="Grey" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </s:SurfaceListBox.ItemContainerStyle>
</s:SurfaceListBox>

But that fails, and there are no tutorials for this at all on the internet - i searched for hours.

Thanks for any help!

Answer 1

I think the problem is that there is nothing using that Background. You could wrap the ContentPresenter in a Border and target it in the Trigger

<ControlTemplate TargetType="{x:Type s:SurfaceListBoxItem}">
    <Border x:Name="Border">
        <ContentPresenter HorizontalAlignment="Center" />
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter TargetName="Border" Property="Background" Value="Gray"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>