This project is read-only.

Style Trigger, loss of white text on Dark theme

Jun 22, 2013 at 6:58 PM
When switching to the Dark Theme the contents of one of my ListBoxes doesn't change it's TextBlock font colour to match. It stays black.

I'm using a datatempate for the most part, I've narrowed it down to the following which is not part of the datatemplate but part of the ListBox itself in WPF.

  <Style TargetType="{x:Type ListBoxItem}">
                        <Trigger Property="IsKeyboardFocusWithin" Value="True">
                            <Setter Property="IsSelected" Value="True" />
Full WPF for listbox and Template
        <db:MediaAsset x:Key="MediaAsset"/>
        <DataTemplate x:Key="MediaAssetItemTemplate">            
                <ListBoxItem Height="70" Name="ListBoxItem" Margin="0,0,0,0">                    
                <DockPanel Margin="0,0,0,0" Height="65">                    
                    <DockPanel DockPanel.Dock="Left" Name="VideoImage2" Height="65" Width="102">
                        <Button Name="ListBoxItemSelect" Click="ButtonBase_OnClick" Tag="{Binding Path=Id}">
                            <Path Name="test" Width="38" Height="30.0833" Canvas.Left="19" Canvas.Top="22.1667" Stretch="Fill" Fill="#FF000000" Data="F1 M 19,34.8333L 22.1667,34.8333L 22.1667,42.75L 19,42.75L 19,34.8333 Z M 22.9583,34.0417L 49.4791,34.0417L 49.4791,38L 50.6667,38L 57,31.6667L 57,52.25L 50.6667,45.9167L 49.4791,45.9167L 49.4791,52.25L 22.9583,52.25L 22.9583,34.0417 Z M 29.2917,22.1667C 32.3522,22.1667 34.8333,24.6478 34.8333,27.7083C 34.8333,30.7689 32.3522,33.25 29.2917,33.25C 26.2311,33.25 23.75,30.7689 23.75,27.7083C 23.75,24.6478 26.2311,22.1667 29.2917,22.1667 Z M 41.9583,22.1667C 45.0189,22.1667 47.5,24.6478 47.5,27.7083C 47.5,30.7689 45.0189,33.25 41.9583,33.25C 38.8977,33.25 36.4167,30.7689 36.4167,27.7083C 36.4167,24.6478 38.8977,22.1667 41.9583,22.1667 Z "/>                          
                    <DockPanel Dock="Left" Name="VideoData2" HorizontalAlignment="Stretch" Height="65">
                        <TextBlock Name="Title" DockPanel.Dock="Top" Text="{Binding Path=Title}" FontWeight="Bold" FontSize="18"></TextBlock>
                        <TextBlock DockPanel.Dock="Top" TextTrimming="CharacterEllipsis" Text="{Binding Path=Description}" TextWrapping="NoWrap"  FontSize="13" Margin="0,0,0,0"/>
                        <StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
                            <TextBlock Text="{Binding Path=VideoCatNane}" FontSize="12" FontStyle="Italic"/>
                            <Border Width="50"></Border>
                            <TextBlock Text="{Binding Path=MediaState}" FontSize="12"/>

<ListBox Name="ListBoxManageMedia" ItemsSource="{Binding Source={StaticResource MediaAsset}}" ItemTemplate="{StaticResource MediaAssetItemTemplate}" HorizontalContentAlignment="Stretch" Margin="10,52,10,41" ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                <Style TargetType="{x:Type ListBoxItem}">
                        <Trigger Property="IsKeyboardFocusWithin" Value="True">
                            <Setter Property="IsSelected" Value="True" />
Is there anyway I can retain the colour change and the selection style
Jun 23, 2013 at 5:41 AM
To fix it you have to edit your FirstFloor.ModernUI project folder, that's assuming you added the project to your solution and didn't reference its library instead.
You need to access the Assets folder, and then open the ListBox.xaml folder, at the bottom of it you'll see a style template with its target being a listbox, below it copy and past this code...

[Location: FirstFloor.ModernUi > Assets > ListBox.xaml ]
    <Style x:Key="muiListBox"
        <Setter Property="FocusVisualStyle"
                Value="{x:Null}" />
        <Setter Property="Stylus.IsFlicksEnabled"
                Value="False" />
        <Setter Property="ItemContainerStyle"
                Value="{StaticResource FlatListBoxItem}" />
        <Setter Property="Template">
                <ControlTemplate TargetType="ListBox">
                    <ScrollViewer Padding="{TemplateBinding Padding}"
                        <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
Once you have done that go back to your own application where you have the actual ListBox.
On the style template you need to add a property called BasedOn and modify its value like I've shown below.
<Style TargetType="{x:Type ListBoxItem}" BasedOn="{StaticResource muiListBox}">
         <Trigger Property="IsKeyboardFocusWithin" Value="True">
             <Setter Property="IsSelected" Value="True" />
When you create a new style template on a ListBox or any other control, that style template automatically overrides any previous templates which were on it, by using the BasedOn property you're able to inherit the original templates properties whilst overriding only the properties you've specified.

And as you'll notice, all I did was simply add a Key to the ListBox template in the MUI project so that we could reference from our own project afterwards.