Question

Here’s my XAML:

<ListBox 
  Name="PlaylistListBox" 
  ScrollViewer.CanContentScroll="False" 
  HorizontalContentAlignment="Stretch" 
  ItemsSource="{Binding Source={StaticResource ResourceKey=MyListBoxView}}" 
  ItemTemplateSelector="{Binding Source={StaticResource ResourceKey=MySelector}}" 
  MouseDoubleClick="PlaylistListBox_MouseDoubleClick" >
  <ListBox.ItemContainerStyle> 
    <Style TargetType="ListBoxItem">
      <Setter Property="SnapsToDevicePixels" Value="true"/>
      <Setter Property="OverridesDefaultStyle" Value="true"/>
      <Setter Property="Template"> 
        <Setter.Value>
          <ControlTemplate TargetType="ListBoxItem"> 
            <Border 
              Name="Border" 
              CornerRadius="4" 
              SnapsToDevicePixels="true">
              <ContentPresenter />
            </Border>
            <ControlTemplate.Triggers>
              <Trigger Property="IsSelected" Value="true">
                <Setter TargetName="Border" Property="Background" Value="Black" />

                <!-- The following setter for opacity is giving me headaches -->
                <Setter TargetName="Border" Property="Opacity" Value="0.5" />

              </Trigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
      <EventSetter 
        Event="Loaded" 
        Handler="PlaylistListBoxItem_Loaded" />
    </Style>
  </ListBox.ItemContainerStyle>
</ListBox>

Two issues:

1. Because of the Opacity setter, whole item is transparent by 50%. I want just the
   border defined in the ListBoxItem ControlTemplate to be transparent and its content
   to preserve full opacity.
2. How do I make a Setter/Trigger to make that same border red when the ListBox is not
   in focus? It should be something like InFocus="False" and IsSelected="True".

Thanks for clarifying.

Answer 1

1. You should place another border underneath the content and make it half-transparent remaining the main content fully visible. You can accomplish this by using Grid and placing a “background” border in it first and then the content. This way you will set the opacity only on the background border, but not on the content;

2. You can use a MultiTrigger for that.

Here is the modified style that shows what I mean:

<ListBox 
  Name="PlaylistListBox" 
  ScrollViewer.CanContentScroll="False" 
  HorizontalContentAlignment="Stretch" 
  ItemsSource="{Binding Source={StaticResource ResourceKey=MyListBoxView}}" 
  ItemTemplateSelector="{Binding Source={StaticResource ResourceKey=MySelector}}" 
  MouseDoubleClick="PlaylistListBox_MouseDoubleClick" >
  <ListBox.ItemContainerStyle> 
    <Style TargetType="ListBoxItem">
      <Setter Property="SnapsToDevicePixels" Value="true"/>
      <Setter Property="OverridesDefaultStyle" Value="true"/>
      <Setter Property="Template"> 
        <Setter.Value>
          <ControlTemplate TargetType="ListBoxItem"> 
            <Grid>
              <Border 
                 Name="BackgroundBorder" 
                 CornerRadius="4" 
                 SnapsToDevicePixels="true">                 
              </Border>
              <Border Name="Border">
                 <ContentPresenter />
              </Border>
            </Grid>
            <ControlTemplate.Triggers>
              <Trigger Property="IsSelected" Value="true">
                <Setter TargetName="BackgroundBorder" Property="Background" Value="Black" />

                <!-- The following setter for opacity is giving me headaches -->
                <Setter TargetName="BackgroundBorder" Property="Opacity" Value="0.5" />

              </Trigger>
              <MultiTrigger>
                 <MultiTrigger.Conditions>
                      <Condition Property="IsSelected" Value="True"/>
                      <Condition Property="IsFocused" Value="False"/>
                 </MultiTrigger.Conditions>
                 <Setter TargetName="BackgroundBorder" Property="Background" Value="Red" />
              </MultiTrigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
      <EventSetter 
        Event="Loaded" 
        Handler="PlaylistListBoxItem_Loaded" />
    </Style>
  </ListBox.ItemContainerStyle>
</ListBox>