I have a ListBox being populated with images from isolated storage. The user is allowed to select the image to perform some action upon it. To notify the user of the currently selected image in the list, I simply have placed a border around the selected item. However, when a new image is selected in the list, the border is placed around that image as well, so now both images have a border. I would like to find a way to remove the previously selected image's border so that only the currently selected image is highlighted.
What I have so far is as follows:
MainPage.xaml
<ListBox x:Name="Recent" ItemsSource="{Binding Pictures}" Margin="8"
SelectionChanged="recent_SelectionChanged" toolkit:TiltEffect.IsTiltEnabled="True">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border>
<Image x:Name="recentImage" Source="{Binding Source}" Margin="12" Width="115"/>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
MainPage.xaml.cs
private void recent_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
//Place border round currently selected image
var lb = sender as ListBox;
var lbi = lb.ItemContainerGenerator.ContainerFromItem(lb.SelectedItem) as ListBoxItem;
lbi.BorderThickness = new Thickness(2, 2, 2, 2);
lbi.BorderBrush = new SolidColorBrush((Color)Application.Current.Resources["PhoneAccentColor"]);
//Where and how to remove border from previously selected image?
}
So, I am not sure of what exactly to do to accomplish this. How might I detect the previously selected image item in the ListBox, or determine which item has the border and remove it before adding the border to the currently selected item? Any thoughts or references?
You need just edit ItemContainer style of your ListBox.
Like this:
<phone:PhoneApplicationPage.Resources>
<Style x:Key="MyStyle" TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Padding" Value="0" />
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property ="Foreground" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot" Background="{TemplateBinding Background}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Opacity" Duration="0" To=".5" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="brd"
Storyboard.TargetProperty="BorderThickness">
<DiscreteObjectKeyFrame KeyTime="0" Value="2" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="brd" CornerRadius="10" BorderBrush="White" Width="Auto" BorderThickness="{TemplateBinding BorderThickness}">
<Image x:Name="recentImage" Source="{Binding Source}" Margin="12" Width="115"/>
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
And your ListBox will be:
<ListBox x:Name="Recent" ItemsSource="{Binding Pictures}" Margin="8"
SelectionChanged="recent_SelectionChanged" toolkit:TiltEffect.IsTiltEnabled="True" ItemContainerStyle="{StaticResource MyStyle}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
Instead of highlighting selected item from code behind, why not set style for selected item in client side.
What I mean to say is, you can use <Style.Triggers> to set the style for selected item in your listbox. (Assuming only one item can be selected at a time)
Sample code- (this sets background of selected item to white . You can apply your style here)
<Style x:Name="ListBoxItemStyle" TargetType="{x:Type ListBoxItem}">
<Style.Triggers>
<Trigger Property="Selector.IsSelected" Value="True">
<Setter Property="Background" Value="White" />
</Trigger>
</Style.Triggers>
</Style>
You may do something like this. (This is just a skeleton. you will have to implement the class properly)
public class MyImage
{
public string ImagePath { get; set; }
public bool IsSelected { get; set; }
}
Set a collection of this class as the source of your listbox.
When you select an item Mark
IsSelected=true;
Remember this property should be "false" for all unselected items.
Now your borders visibility can be set based on IsSelected property.Hope this helps.
Related
I'm trying to design an UWP App for a tablet and one of the elements I'm using is a ListView. When I'm scrolling with a mouse inside the ListView it works, but if I'm trying to scroll on a touchscreen the ListView automatically snaps back to the default position. How can I solve this problem?
<ListView x:Name="PlayerListBox" HorizontalAlignment="Left" Grid.Column="0" VerticalAlignment="Top" Width="404" ScrollViewer.VerticalScrollBarVisibility="Hidden" Height="620" Margin="-3,0,0,0">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="FontSize" Value="24"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimation Duration="0" To="#0078D7" Storyboard.TargetProperty="(ListViewItem.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Content1" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<TextBlock x:Name="listItem1" TextWrapping="WrapWholeWords" />
<ContentPresenter x:Name="Content1" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
I want to disable selection of some items in listBoxEmployee whole isEnable property = false but all of them still selectable and I dont know why. In my mainpage, my code is:
public SelectLevel()
{
InitializeComponent();
passedLevel = (int)IsolatedStorageSettings.ApplicationSettings["passedLevel"];
List<LevelList> myData = new List<LevelList>();
for (int i = 0; i <= passedLevel; i++)
{
myData.Add(new LevelList { levelNumber = i, urlImg = "Images/passed.png", IsEnabled = true});
}
for (int j = passedLevel + 1; j <= allLevel; j++)
{
myData.Add(new LevelList { levelNumber = j, urlImg = "Images/notpassed.png", IsEnabled = false });
}
listBoxEmployee.ItemsSource = myData;
}
And my xaml page:
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Grid Width="80" Height="80" IsHitTestVisible="{Binding IsEnabled}">
<Image Source="{Binding urlImg}" IsHitTestVisible="{Binding IsEnabled}"></Image>
<TextBlock Text="{Binding IsEnabled}" IsHitTestVisible="{Binding IsEnabled}" HorizontalAlignment="Center" FontWeight="Bold" VerticalAlignment="Center" TextWrapping="Wrap" FontSize="36" Foreground="Black" />
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
What you're really doing is setting the IsHitTestVisible on the controls within the list box item, not the list box item itself. The click events would bubble up to the ListBoxItem and would allow it to be selected. I think you can do what you want by overriding the style of the ListBoxItem in your ListBox. Start with a copy of the list box item style then add a Setter to change the IsHitTestVisible property. For example:
<ListBox ItemContainerStyle="{StaticResource ListBoxItemStyle1}"></ListBox>
And in your page resources (only change from the copy was the IsHitTestVisible property):
<phone:PhoneApplicationPage.Resources>
<Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
<Setter Property="IsHitTestVisible" Value="{Binding IsEnabled}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
I suspect that the problem is as explained by #PeterRitchie. If that's correct, I think there is a simpler way to fix it. Try to bind IsHitTestVisible property of ListBoxItem using style setter this way :
<ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="IsHitTestVisible" Value="{Binding IsEnabled}"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
I have list box with style added to it.
Here is my code:
<!-- Style for list item selector -->
<Style x:Key="ListItemSelectorStyle" TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Padding" Value="0" />
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property ="Foreground" Value="Black" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="ListBoxItem" Background="{TemplateBinding Background}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListItemBorder" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="#c9ebf2" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListItemBorder" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="#c9ebf2" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="ListItemBorder" BorderBrush="Transparent" Background="#e3e8f0">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock
Name="textBlock"
Text="{Binding Path=answerText}"
HorizontalAlignment="Stretch"
Padding="10,25,10,25"
MinHeight="80"
VerticalAlignment="Center"
TextAlignment="Center"
Style="{StaticResource TextStyle}"
Foreground="Black"/>
<Image Name="ImageBlock"
Grid.Row="0"
Width="Auto"
Height="Auto"
Stretch="UniformToFill"
Source="{Binding answerImage}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="1,1,1,1"/>
</Grid>
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
My List box :
<ListBox Name="listBox"
HorizontalAlignment="Stretch"
ItemContainerStyle="{StaticResource ListItemSelectorStyle}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
SelectionChanged="ListBoxClicked"
ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Here i have added two colors one for default item color "#e3e8f0" and one is Selected item and MouseOver color "#c9ebf2" in my style
Now I have a button and its click event in my .CS file Now when i click on that the Selected item and MouseOver color "#c9ebf2" should be changed to Green color,
How to acheive this ?
You have given #c9ebf2 color for both mouseover and selected state in your style. Change your color for selected state.
I have a Listbox with some Listboxitem and I would like to change the style of all items. I know, it's possible to create a style in resources and bind this style to each item but maybe is there a possibility to do it so easier (without binding)? With ListBox.ItemTemplate?
<ListBox SelectionChanged="ListBox_SelectionChanged">
<ListBoxItem x:Name="ItemAdress">
....
</ListBoxItem>
<ListBoxItem x:Name="ItemPhone">
....
</ListBoxItem>
<ListBoxItem x:Name="ItemEmail">
....
</ListBoxItem>
</Listbox>
In fact, my objective is to add Margin bottom 15 for each item. (add a space between items)
Note: This works for WPF; not sure if it will work for Windows Phone also.
You can create a style using TargetType. This would affect all ListBoxItems for this specific ListBox:
<ListBox Height="200" Width="200">
<ListBox.Resources>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Margin" Value="0,0,0,15" />
</Style>
</ListBox.Resources>
<ListBoxItem x:Name="ItemAdress">
ABC
</ListBoxItem>
<ListBoxItem x:Name="ItemPhone">
DEF
</ListBoxItem>
<ListBoxItem x:Name="ItemEmail">
GHI
</ListBoxItem>
</ListBox>
If you want to style ListBoxItems for all ListBoxes, you can specify a style at the appropriate parent level.
E.g. following applies style for all ListBoxItems of all ListBoxes under this Grid.
<Grid>
<Grid.Resources>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Margin" Value="0,0,0,15" />
</Style>
</Grid.Resources>
<ListBox x:Name="listBox1" Height="200" Width="200">
...
</ListBox>
<ListBox x:Name="listBox2" Height="200" Width="200">
...
</ListBox>
</Grid>
To build on publicgk answer I would like to show how you can do this 'easy', as well as add some more info in RE to styling. If you already knew what I'm about to tell, then I apologize- I'm adding this just in case somebody is looking at this question so not familiar with WP8 or XAML development.
If you want to style the way data is displayed then I would recommend that you create a DataTemplate and set the ListBox.ItemTemplate to that datatemplate (as you suggested yourself above).
You can do that inline, or have the DataTemplate as a resource and reference it by name.
<!--ItemsSource set in code-->
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<Border Background="Blue">
<TextBlock Text="{Binding Title}"/>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<!--ListOfTitles is a property in the code-->
<ListBox ItemsSource="{Binding ListOfTitles}" ItemTemplate="{StaticResource redDataTemplateDefinedInResources}">
</ListBox>
Notice that you need to set the itemssource, this can be done in codebehind by accessing the ListBox by giving it a name (x:name="theName") or using a binding and binding to a property with that name (make sure to set the DataContext as well)
If you want to style how default ListBoxItem (such as interaction, margins etc.) then you can publicgk wrote create a style with the controls targettype and set it as a resource either on parent level, page or app level. For all controls in the whole app, use app level- with a resource dictionary to keep everything neat and tidy :)
This is the easiest way to create a FULL template to override the style in Visual Studio 2012 OR Blend:
Right click on the control in the designer or in the Document Outline WIndows and select Edit Template, Edit a Copy, give it a name if you want a named resource, or select apply to all (which basically removes the name).
And since I love show-and-tell, here are some images:
Then go ahead and change it up as you want :)
The template code:
<Style TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have the following style and list box:
<Style x:Key="LwHListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Padding" Value="24, 0, 24, 0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot" BorderBrush="#FFCCCCCC" BorderThickness="0, 0, 0, 1" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
<DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ListBox x:Name="lbxContainer" Height="Auto" Width="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" VerticalAlignment="Top" ItemContainerStyle="{StaticResource LwHListBoxItemStyle}" />
I used Expression Blend to create the style. I want the ListBoxItem to have a 60% opacity when disabled. I'm populating the ListBox programatically with ListBoxItems that have their IsEnabled property set based on certain criteria. I've stepped through the debugger and confirmed that the ListBoxItems do have IsEnabled = false, so my conclusion is that there must be something wrong with my xaml. Is there something I'm missing or doing wrong that is causing the items to not become opaque when disabled?
The ListBox is on a white background and has black text as the content. The opacity should make it gray. If I add opacity to the normal visual state, it shows up as intended for the normal state, but also for the Disabled state. I know the disabled items are actually disabled because I can't click on them. I figured that the code below would show normal state as opaque but disabled items without opacity.
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
Update: I'm pretty sure there is something wrong with my disabled state. Nothing I add in the disabled state takes hold, even if I change the background to blue. I am creating ListBoxItems programatically and setting the content property to a user control I have created. Could this be causing problems? It doesn't make sense to me because I can set the normal state with 60% opacity and it works, so why wouldn't the disabled state?
You should not be using a ContentControl inside your control template. You should be using a ContentPresenter instead. You can run into weird issues by having a ContentControl displaying the content of another ContentControl.
Aside from that, the ListBoxItem will only go into the "Disabled" state, if the ListBoxItem.Content is not a Control. If the ListBoxItem.Content is a Control, then it will transition to the "Normal" state even if ListBoxItem.IsEnabled is false.
You've created a style for the ListBoxItem, but not for the ListBox itself. And you don't have to, necessarily. The problem is that by default the ListBox has a white background.
So the first step is to set the ListBox background to Transparent like this...
<ListBox x:Name="lbxContainer" Background="Transparent" Height="Auto" Width="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" VerticalAlignment="Top" ItemContainerStyle="{StaticResource LwHListBoxItemStyle}" />
Then I just made a couple changes to your ListBoxItem style...
<Style x:Key="LwHListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="Background" Value="White"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Padding" Value="24, 0, 24, 0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot" BorderBrush="#FFCCCCCC" Background="{TemplateBinding Background}" BorderThickness="0, 0, 0, 1" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="LayoutRoot" />
<DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And now as long as the container around the ListBox is not white, then a disabled ListBoxItem should appear translucent thanks to the Opacity setting.
For example...
<Grid Background="Black">
<ListBox x:Name="lbxContainer" Background="Transparent" Height="Auto" Width="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" VerticalAlignment="Top" ItemContainerStyle="{StaticResource LwHListBoxItemStyle}">
<ListBoxItem Content="enabled a" />
<ListBoxItem Content="disabled b" IsEnabled="False"/>
<ListBoxItem Content="enabled c"/>
</ListBox>
</Grid>
Will look like this...