I have an AccordionControl (WPFToolkit) to which I add items dynamically:
<my:Accordion Grid.Column="1"
ItemsSource="{Binding Path=Tests}"
SelectionMode="ZeroOrOne"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<my:Accordion.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Header}" />
</StackPanel>
</DataTemplate>
</my:Accordion.ItemTemplate>
<my:Accordion.ContentTemplate>
<DataTemplate>
<ContentPresenter Content="{Binding Content}"/>
</DataTemplate>
</my:Accordion.ContentTemplate>
</my:Accordion>
To actually see the Content, I have to select (open) an AccordionItem, close it and open it again. What could be the reason for this behaviour?
EDIT
I have found a way around this using styles instead, still I would be interested why the above does not work. Here the style solution:
<Style x:Key="itemStyle" TargetType="my:AccordionItem">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding Header}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="accordionStyle" TargetType="my:Accordion">
<Setter Property="ItemContainerStyle" Value="{StaticResource itemStyle}" />
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<ItemsControl ItemsSource="{Binding MenuItems}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding Path=Text, Mode=OneWay}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<my:Accordion Grid.Column="1" Height="Auto"
Name="accordion1"
ExpandDirection="Left"
SelectionMode="One"
ItemsSource="{Binding Tests}"
Style="{StaticResource accordionStyle}">
</my:Accordion>
EDIT
I have now found the problem: I cannot "Stretch the AccordionControl.
<my:Accordion Grid.Column="1" Height="Auto"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Name="accordion1"
ExpandDirection="Left"
SelectionMode="One"
ItemsSource="{Binding Tests}"
Style="{StaticResource accordionStyle}">
</my:Accordion>
As soon as I do this, it is not working anymore. Does someone know a way around this?
Related
I want to create a Magic the Gathering trading user interface where if a user hover over a specific card name, that it will display that card's image (see image). Currently, in the MultiMasterCardListView, the only image that displays is the Black Lotus card image which I hard-coded that image path. As a result, it does not matter which card name I hover over, it only shows black lotus image.
So I created a property (PlayerCardPath) inside of MultiMasterCardListViewModel, which will loop through all the cards in the database
and test if the hover over's content/value equals that card name. If it does then return the path with the card's name and image format. The problem is that mc.Name(from MultiMasterCardViewModel) returns nothing so the "if" statement inside of the foreach doesn't get hit at all. How do I get the value of whatever is being hover over from the MultiMasterCardListView? Let me know if you need clarification. Thanks
MultiMasterCardListView:
<UserControl x:Class="OrderEntrySystem.MultiMasterCardListView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:OrderEntrySystem"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="600">
<UserControl.Resources>
<ResourceDictionary Source="SharedResources.xaml" />
</UserControl.Resources>
<Grid>
<DockPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" DockPanel.Dock="Top" Margin="0,0,0,5" Height="30">
<TextBox x:Name="searchTextBox" Text="{Binding Path=SearchText}" Width="100" Height="23" Margin="0,4,5,0" />
<ContentControl Content="{Binding Path=FilterCommands}" ContentTemplate="{StaticResource ResourceKey=NestedCommandTemplate}" />
</StackPanel>
<Grid DockPanel.Dock="Bottom">
<local:SelectedItemsView />
</Grid>
<Grid DockPanel.Dock="Bottom">
<local:PagingView></local:PagingView>
</Grid>
<ListView ItemsSource="{Binding Path=SortedCards}" ItemContainerStyle="{StaticResource ResourceKey=ListViewStyle}">
<ToolTipService.ToolTip>
<Border>
<StackPanel>
<Image Source="C:\Users\Teng\Documents\0515-392-team-orange\Team Magic Project\OrderEntrySystem\Images\Black Lotus.JPG"/>
</StackPanel>
</Border>
</ToolTipService.ToolTip>
<ListView.View>
<GridView>
<GridViewColumn Width="175" DisplayMemberBinding="{Binding Path=Name}">
<GridViewColumnHeader Content="Name" Command="{Binding Path=SortCommand}" CommandParameter="Name" />
</GridViewColumn>
<GridViewColumn Header="Point Value" Width="70" DisplayMemberBinding="{Binding Path=PointValue}" />
</GridView>
</ListView.View>
</ListView>
</DockPanel>
</Grid>
MultiMasterCardListViewModel:
public string PlayerCardPath
{
get
{
string result = null;
MultiMasterCardListView mC = new MultiMasterCardListView();
foreach (var card in this.repository.GetMasterCardLists())
{
if (card.Name == mC.Name)
{
result = (#"..\..\..\Images\" + mC.Name + ".JPG");
break;
}
}
return result;
}
}
SharedResources:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:OrderEntrySystem">
<DataTemplate DataType="{x:Type local:MasterCardListViewModel}">
<local:MasterCardListView></local:MasterCardListView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:MemberViewModel}">
<local:MemberView></local:MemberView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:MultiMasterCardListViewModel}">
<local:MultiMasterCardListView></local:MultiMasterCardListView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:MultiMemberViewModel}">
<local:MultiMemberView></local:MultiMemberView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:MultiMemberCardListViewModel}">
<local:MultiMemberCardListView></local:MultiMemberCardListView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:TransactionViewModel}">
<local:TransactionView></local:TransactionView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:MultiTransactionViewModel}">
<local:MultiTransactionView></local:MultiTransactionView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:MultiCardTransactionViewModel}">
<local:MultiCardTransactionView></local:MultiCardTransactionView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:CardConditionViewModel}">
<local:CardConditionView></local:CardConditionView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:QuantityViewModel}">
<local:QuantityView></local:QuantityView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:PurchasePointsViewModel}">
<local:PurchasePointsView></local:PurchasePointsView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:MultiMyCardListViewModel}">
<local:MultiMyCardListView></local:MultiMyCardListView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:MultiShoppingCartViewModel}">
<local:MultiShoppingCartView></local:MultiShoppingCartView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:ShoppingCartViewModel}">
<local:ShoppingCartView></local:ShoppingCartView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:ReportViewModel}">
<local:ReportView></local:ReportView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:LoginViewModel}">
<local:LoginView></local:LoginView>
</DataTemplate>
<DataTemplate x:Key="WorkspacesTemplate">
<TabControl IsSynchronizedWithCurrentItem="True" Margin="4" ItemsSource="{Binding}">
<TabControl.Background>
<ImageBrush ImageSource="..\..\Images\Magicthegathering-logo.svg.png" Stretch="Uniform" AlignmentY="Bottom" AlignmentX="Center" Opacity="0.5"/>
</TabControl.Background>
<TabControl.ItemTemplate>
<DataTemplate>
<DockPanel>
<Button Command="{Binding Path=CloseCommand}" Content="X" Cursor="Hand" Margin="4,0,0,0" FontWeight="Bold" Height="16" Width="16" FontFamily="Courier" FontSize="9" DockPanel.Dock="Right" />
<ContentPresenter Content="{Binding Path=DisplayName}" VerticalAlignment="Center" />
</DockPanel>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
</DataTemplate>
<DataTemplate x:Key="NestedCommandTemplate">
<ItemsControl ItemsSource="{Binding}" HorizontalAlignment="Right">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Command="{Binding Path=Command}" Content="{Binding Path=DisplayName}" IsDefault="{Binding Path=IsDefault}" IsCancel="{Binding Path=IsCancel}" Height="23" Width="75" Margin="4,4,0,0" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
<DataTemplate x:Key="CommandsTemplate">
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Command="{Binding Path=Command}" Content="{Binding Path=DisplayName}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
<ControlTemplate x:Key="HoverOverImage">
<Border Name="border" BorderThickness="0"
Background="Transparent">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="C:\Users\Teng\Documents\0515-392-team-orange\Team Magic Project\Images\Coalition Honor Guard.JPG" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<DataTemplate x:Key="HorizontalCommandsTemplate">
<ItemsControl ItemsSource="{Binding}" HorizontalAlignment="Right">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Command="{Binding Path=Command}" Content="{Binding Path=DisplayName}" Height="23" Width="75" Margin="4,4,0,0" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
<Style x:Key="MainHeaderStyle" TargetType="{x:Type HeaderedContentControl}">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<Border Background="{StaticResource Brush_HeaderBackground}" BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Margin="4" Padding="4" SnapsToDevicePixels="True">
<TextBlock FontSize="14" FontWeight="Bold" Foreground="White" HorizontalAlignment="Center" Text="{TemplateBinding Content}" />
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type HeaderedContentControl}">
<DockPanel>
<ContentPresenter DockPanel.Dock="Top" ContentSource="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" />
<ContentPresenter ContentSource="Content" ContentTemplate="{TemplateBinding ContentTemplate}" />
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ListViewStyle" TargetType="{x:Type ListViewItem}">
<Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=TwoWay}" />
</Style>
<Style x:Key="ValidationStyleTextBox" TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors).CurrentItem.ErrorContent}" />
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<DockPanel LastChildFill="true">
<TextBlock DockPanel.Dock="Right" VerticalAlignment="Center" Margin="5,0,0,0" Text="{Binding ElementName=customAdorner, Path=AdornedElement.(Validation.Errors).CurrentItem.ErrorContent}" />
<Border Background="Red" DockPanel.Dock="Right" Margin="5,0,0,0" Width="20" Height="20" CornerRadius="10">
<TextBlock Text="!" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold" Foreground="White" />
</Border>
<AdornedElementPlaceholder Name="customAdorner" VerticalAlignment="Center">
<Border BorderBrush="Red" BorderThickness="1" />
</AdornedElementPlaceholder>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="PagingButton" TargetType="{x:Type Button}">
<Setter Property="FontFamily" Value="Webdings" />
<Setter Property="Height" Value="23" />
<Setter Property="Width" Value="45" />
<Setter Property="Margin" Value="4,0,4,0" />
</Style>
<Style x:Key="PagingTextBlock" TargetType="{x:Type TextBlock}">
<Setter Property="Margin" Value="4,0,4,0" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
I have an ItemControl on a ScrollViewer. I want to scroll item by item, now is scrolling pixel by pixel.
<ScrollViewer Height="299" Margin="10,10,0,0"
HorizontalScrollBarVisibility="Visible" x:Name="Scroll"
VerticalAlignment="Top"
Grid.Column="0" Grid.Row="1"
PanningMode="HorizontalOnly"
CanContentScroll="True">
<ItemsControl ItemsSource="{Binding RelativeSource={RelativeSource AncestorType=Window}, Path=Items, Mode=OneWay}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Width="175" Height="64" Margin="0,0,16,16" HorizontalAlignment="Center" Focusable="False">
<TextBlock Text="{Binding}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
Just set this property on ListBox:
VirtualizingStackPanel.ScrollUnit ="Item"
Another mode is "Pixel", which is default mode.
I found a solution
<ItemsControl ItemsSource="{Binding TypeHeaders}"
x:Name="ActivityItemsControl"
Grid.Column="0" Grid.Row="1">
<ItemsControl.Template>
<ControlTemplate>
<ScrollViewer HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Visible"
CanContentScroll="True"
x:Name="ActivityScrollViewer">
<ItemsPresenter/>
<i:Interaction.Triggers>
<i:EventTrigger EventName="ScrollChanged">
<cmd:EventToCommand PassEventArgsToCommand="True"
Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type Grid}}, Path=DataContext.VmCommands.ActivityScrollChangedCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding Description}" Style="{DynamicResource ZoneTypeHeaderButtonStyle}"
Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}, Path=DataContext.VmCommands.ZoneOverviewControlTypeHeaderClickedCommand}"
CommandParameter="{Binding}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
You can use ListBox instead of ScrollViewer. I thought you did not want to have a selection style so I changed it.
<ListView ScrollViewer.CanContentScroll="True"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
ScrollViewer.PanningMode="HorizontalOnly"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
ItemsSource="{Binding RelativeSource={RelativeSource AncestorType=Window}, Path=Items, Mode=OneWay}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Border Width="175" Height="64" Margin="0,0,16,16" HorizontalAlignment="Center" Focusable="False">
<TextBlock Text="{Binding }" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I am working with the Datagrid grouping example here at MSDN. The code in the example uses an Expander to display child rows of a group. I don't want to use an Expander in my code. I want to always display every row. How can I display the child rows in a grouped datagrid without using an Expander control?
Instead of using Expander you can use Border.
<DataGrid.GroupStyle>
<!-- Style for groups at top level. -->
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Margin" Value="0,0,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Border BorderThickness="1" BorderBrush="Black" CornerRadius="5,5,5,5" Margin="0,0,0,5">
<StackPanel>
<StackPanel Height="30" Orientation="Horizontal">
<TextBlock FontWeight="Bold" Text="{Binding Path=Name}" Margin="5,0,0,0" Width="100" VerticalAlignment="Center"/>
<TextBlock FontWeight="Bold" Text="{Binding Path=ItemCount}" VerticalAlignment="Center" />
</StackPanel>
<ItemsPresenter />
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
<!-- Style for groups under the top level. -->
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<DockPanel Background="LightBlue">
<TextBlock Text="{Binding Path=Name, Converter={StaticResource completeConverter}}" Foreground="Blue" Margin="30,0,0,0" Width="100"/>
<TextBlock Text="{Binding Path=ItemCount}" Foreground="Blue"/>
</DockPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</DataGrid.GroupStyle>
I know a ControlTemplate is suppose to replace the default one entirely and this seems to work when not using a HierarchicalDataTemplate. However using a HierarchicalDataTemplate my control template seems to be partially used - the TreeViewItem is the control I specified containing an image etc. BUT still appears as a node with the default expander to show its children - not specified in my Template (I want my children to always be shown, but thats beside the point). It looks like this:
<TreeView>
<TreeView.Resources>
<Style x:Key="MyNodeStyle" TargetType="TreeViewItem">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsExpanded" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TreeViewItem">
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<Border CornerRadius="8" BorderThickness="1" Padding="2" Margin="4, 6" BorderBrush="{StaticResource itemBorderBrush}" Background="{StaticResource itemBackgroundBrush}" x:Name="border">
<DockPanel LastChildFill="False">
<StackPanel Orientation="Vertical" DockPanel.Dock="Top" Height="80">
<TextBlock Text="{Binding Path=DisplayValue}" HorizontalAlignment="Center" FontWeight="Bold"/>
<Image Source="MyNode.png" Stretch="None"/>
<TextBlock Text="{Binding Path=Notes}" TextWrapping="Wrap" Width="150"/>
</StackPanel>
</DockPanel>
</Border>
<ItemsPresenter />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" IsItemsHost="True" HorizontalAlignment="Center" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
<HierarchicalDataTemplate DataType="{x:Type src:MyNode}" ItemsSource="{Binding Path=Children}" >
<TreeViewItem Style="{StaticResource MyNodeStyle}"/>
</HierarchicalDataTemplate>
</TreeView.Resources>
<!-- Arrange the root items horizontally. -->
<TreeView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel IsItemsHost="True" Orientation="Horizontal" HorizontalAlignment="Center" />
</ItemsPanelTemplate>
</TreeView.ItemsPanel>
</TreeView>
For some reason only when using a HierarchicalDataTemplate the ItemsPanel and Setter does not seem to be applied and the children are presented in the default expander. How did that expander get there when I am using my own ControlTemplate!?##$
I don't think you should put the TreeViewItem inside your HierarchicalDataTemplate.
Try this:
<HierarchicalDataTemplate DataType="{x:Type src:MyNode}" ItemsSource="{Binding Path=Children}" >
<StackPanel Orientation="Vertical" DockPanel.Dock="Top" Height="80">
<TextBlock Text="{Binding Path=DisplayValue}" HorizontalAlignment="Center" FontWeight="Bold"/>
<Image Source="MyNode.png" Stretch="None"/>
<TextBlock Text="{Binding Path=Notes}" TextWrapping="Wrap" Width="150"/>
</StackPanel>
</HierarchicalDataTemplate>
Now, your template becomes:
<ControlTemplate TargetType="TreeViewItem">
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<Border CornerRadius="8" BorderThickness="1" Padding="2" Margin="4, 6" x:Name="border">
<DockPanel LastChildFill="False">
<ContentPresenter ContentSource="Header" />
</DockPanel>
</Border>
<ItemsPresenter />
</StackPanel>
</ControlTemplate>
Is that how you intended it to look?
Edit: the original expanders are probably there because you only use your style for child items - make your style the ItemContainerStyle for the treeview:
<Window.Resources>
<Style x:Key="MyNodeStyle" TargetType="TreeViewItem">
....
<TreeView ItemContainerStyle="{StaticResource MyNodeStyle}">
I have a ListBox. It has a white background. How can I get rid of it?
Here is the XAML I'm trying. Whatever I do, I can't get rid of that background. (I'm not sure if it's on each item, which happen to take up all the space in the ListBox, or if it's on the background of the ListBox itself.)
<ListBox x:Name="topThreeHits" ItemsSource="{Binding TopThreeHits}" Margin="0,10,0,0">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent" />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Background="Transparent"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10,0" Background="Transparent">
<Image Source="{Binding Image, FallbackValue=/PlumPudding;component/Images/file.png}" />
<TextBlock>
<Run Text="{Binding Name, FallbackValue='File Name'}" FontWeight="Bold" />
<Run Text="." Foreground="#787878" FontWeight="Light" />
<Run Text="{Binding TypeExtension, FallbackValue='type'}" Foreground="#787878" FontWeight="Light" />
</TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I'm using Silverlight 4.
Your code is working fine, and properly setting the background style. I am assuming what you want to do is blow away the default item container completely so there is no background, including rollovers, etc.
The best way to do that is like this:
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<ContentPresenter Content="{TemplateBinding Content}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
I tried to add a Border around the ListBox with a Green Background and set the Background to Transparent for your ListBox and it seems to be working fine.
<Border Background="Green">
<ListBox x:Name="topThreeHits"
Background="Transparent"
ItemsSource="{Binding Customers}" Margin="0,10,0,0">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent" />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Background="Transparent"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10,0" Background="Transparent">
<Image Source="{Binding Image, FallbackValue=/PlumPudding;component/Images/file.png}" />
<TextBlock>
<Run Text="{Binding Name, FallbackValue='File Name'}" FontWeight="Bold" />
<Run Text="." Foreground="#787878" FontWeight="Light" />
<Run Text="{Binding TypeExtension, FallbackValue='type'}" Foreground="#787878" FontWeight="Light" />
</TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Border>