VirtualizingPanel not Virtualizing using WPF XAML [duplicate] - wpf

This question already has answers here:
Virtualizing WPF Wrap Panel Issue
(3 answers)
Is there a virtualizing WrapPanel for WPF available? Commercial or free ones
(2 answers)
Virtualizing WrapPanel as ListView's ItemsTemplate
(3 answers)
Closed 4 years ago.
So no matter how hard I try I can't get virtualization in my view to work.
When I scroll through my Listbox, the items always keep populating from the top and carry on right to the bottom, rather than rendering what is on screen and just a bit above and bellow.
Any help would be very much appreciated.
Bellow is the code for the Viewbox. A point of note:
I am using a Viewbox inside a ListBox and a grid inside the ViewBox. This is because my items populate in a similar way to text with word warping turned on - it populates horizontally until the width, then moves on to the next line.
My items in the ListBox are scalable, and there position in the view changes dynamically depending on the scale size, whilst also, the TextBlocks text dose not scale.
Not sure if that effects virtualization in a way I am unaware.
If that is not clear, I apologise and am happy to answer any questions. Thanks for your time:
<ListBox x:Name="LibraryBox"
Grid.Column="1"
Grid.Row="0"
Grid.RowSpan="4"
Margin="0,-5,0,-10"
BorderBrush="Transparent"
Background="#1e1e1e"
ItemsSource="{Binding}"
ItemContainerStyle="{StaticResource ListBoxItemStyle}"
IsSynchronizedWithCurrentItem="True"
VirtualizingPanel.IsVirtualizing="True"
VirtualizingPanel.IsVirtualizingWhenGrouping="True"
VirtualizingPanel.IsContainerVirtualizable="True"
VirtualizingPanel.VirtualizationMode="Standard"
ScrollViewer.IsDeferredScrollingEnabled="False"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Visible"
SelectionMode="Extended"
SelectionChanged="LibraryBox_SelectionChanged"
MouseDoubleClick="LibraryBox_MouseDoubleClick">
<ListBox.Resources>
<!--#region scrollbar style-->
<Style TargetType="{x:Type ScrollBar}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="#990000"/>
<Setter Property="Width" Value="25"/>
</Style>
<!--#endregion-->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red"/>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Red"/>
</ListBox.Resources>
<ListBox.ContextMenu>
<ContextMenu>
<MenuItem Header="Edit" Click="ContextMenuItemEdit_Click"/>
<MenuItem Header="ComicVine Scraper" Click="MenuItemScraper_Click"/>
<Separator/>
<MenuItem Header="Delete" Click="ContextMenuItemDelete_Click"/>
</ContextMenu>
</ListBox.ContextMenu>
<!--#region Group Style-->
<ListBox.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Expander IsExpanded="True">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}"
FontWeight="Bold"
Foreground="#dbdbdb"
FontSize="16"
FontFamily="Cordia New"
VerticalAlignment="Bottom" />
<TextBlock Text="{Binding ItemCount}"
FontSize="16"
Foreground="#dbdbdb"
FontStyle="Italic"
Margin="10,0,0,0"
FontFamily="Cordia New"
VerticalAlignment="Bottom" />
</StackPanel>
</Expander.Header>
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ListBox.GroupStyle>
<!--#endregion-->
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Viewbox Height="100" Width="70" Margin="2">
<Viewbox.LayoutTransform>
<ScaleTransform ScaleX="{Binding Value, ElementName=ZoomSlider}"
ScaleY="{Binding Value, ElementName=ZoomSlider}"/>
</Viewbox.LayoutTransform>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="32"/>
</Grid.ColumnDefinitions>
<!--This is for thumbnails-->
<Image x:Name="coverImage"
Grid.Column="0"
Grid.Row="0"
Source="{Binding CoverPath, Converter={StaticResource UriToBitmapConverter}, IsAsync=True}"/>
<Rectangle x:Name="ReadMarkerBottom"
Grid.Column="1"
Grid.Row="1"
Margin="-16,0,0,0"
Fill="#fff"
Width="32"
Height="32"
Loaded="CoverImage_Loaded"/>
<Rectangle x:Name="ReadMarkerTop"
Grid.Column="1"
Grid.Row="1"
Margin="-16,0,0,0"
Fill="#000"
Width="30"
Height="30"
Loaded="CoverImage_Loaded"/>
</Grid>
</Viewbox>
<TextBlock TextTrimming="CharacterEllipsis"
TextAlignment="Center"
Width="120"
Foreground="#dbdbdb"
Background="Transparent"
Margin="0,0,0,5"
Loaded="Text_Loaded"
FontFamily="Cordia New"
FontWeight="Bold">
</TextBlock>
<TextBlock TextTrimming="CharacterEllipsis"
TextAlignment="Center"
Width="120"
Foreground="#dbdbdb"
Background="Transparent"
Margin="0,0,0,5"
Loaded="IssueNumer_Loaded"
FontFamily="Cordia New"/>
<TextBlock TextTrimming="CharacterEllipsis"
TextAlignment="Center"
Width="120"
Foreground="#dbdbdb"
Background="Transparent"
Margin="0,0,0,5"
Loaded="CountStack_Loaded"
FontFamily="Cordia New"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>

The answer is, as Clemens pointed out, "The ItemsPanel must support virtualization. WrapPanel does not."

Related

Datagrid - ItemsPresenter - vertical Scrollviewer

Hello Stackoverflow Members,
i'm new! sorry for the quick an short problem. But i need your help!
i have a Datagrid with 2000 rows. (grouped on CustomerNbr)
vb.net
Dim grouped As New ListCollectionView(full_list)
grouped.GroupDescriptions.Add(New PropertyGroupDescription("CustNbr"))
Datagrid.ItemsSource = grouped
This code worked fine
<DataGrid.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=Name}" />
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander MaxHeight="400" FontWeight="Bold" Background="{Binding Path=Items, Converter={StaticResource convert_Backcolor}}" >
<Expander.Header>
<StackPanel Orientation="Horizontal" >
<TextBlock Text="{Binding Path=Name}" Margin="10,0,10,0" />
<TextBlock Text="{Binding Path=Items, Converter={StaticResource convert_Cust_Name}}" MinWidth="300" Margin="10,0,10,0" />
<TextBlock Text="{Binding Path=Items, Converter={StaticResource convert_Summe},ConverterCulture=de-DE, StringFormat={}{0:n2}}" HorizontalAlignment="Right" Margin="40,0,0,0" />
</StackPanel>
</Expander.Header>
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</DataGrid.GroupStyle>
But when i add a scrollviewer at the ItemsPresenter i get an error:
<ScrollViewer>
<ItemsPresenter />
</ScrollViewer>
the error comes, when i make the second grouped custnbr
screen
Error: invalidOperationExeption was unhandled
I need the ScrollViewer because i have so many invoices on the CustNbr. The Problem is in Expander. In Expander.Content the vertical ScrollViewer is not support or something...
can anybody help me?
SOLUTION: in Datagrid Header this statements are not allowed: CanUserAddRows="False" CanUserDeleteRows="False" IsReadOnly="True"
also see here:
https://blogs.msdn.microsoft.com/vinsibal/2008/10/01/overview-of-the-editing-features-in-the-wpf-datagrid/

Dynamically set a property in an Item Template

I set an image path of an Image in a StackPanel used in a GroupItem using the following resource (which as is works fine):
<Style x:Key="GroupHeaderStyle" TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander Name="expander" IsExpanded="True" >
<Expander.Header>
<StackPanel Orientation="Horizontal">
<Image Source="pack://application:,,,/Resources/History.ico" Margin="2,0"
Width="18" Height="18" ></Image>
<TextBlock Text="{Binding Name}" Padding="2,0"/>
</StackPanel>
</Expander.Header>
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Which is used in this DataGrid:
<DataGrid Name="JobHistory" CanUserAddRows="False" AutoGenerateColumns="False" ColumnWidth="*"
CanUserDeleteRows="False" ItemsSource="{Binding}" Grid.Row="2"
Grid.ColumnSpan="5" CanUserResizeRows="False"
Grid.RowSpan="2" IsTextSearchEnabled="True" VerticalScrollBarVisibility="Visible" >
<DataGrid.GroupStyle>
<GroupStyle ContainerStyle="{StaticResource GroupHeaderStyle}">
<GroupStyle.Panel>
<ItemsPanelTemplate>
<DataGridRowsPresenter/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</DataGrid.GroupStyle>
<DataGrid.Columns>
<DataGridTemplateColumn Header="Status" Width="Auto" IsReadOnly="True">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Image Source="{Binding ResultImagePath}" Height="18" Width="18"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Header="Job description" Binding="{Binding JobDescription}"/>
</DataGrid.Columns>
</DataGrid>
The DataView is grouped via this code:
ListCollectionView collection = new ListCollectionView(JobData);
collection.GroupDescriptions.Add(new PropertyGroupDescription("Name"));
JobHistory.ItemsSource = collection;
My Question: How can I dynamically set the image Source in the StackPanel?
<StackPanel Orientation="Horizontal">
<Image Source="pack://application:,,,/Resources/History.ico" Margin="2,0"
Width="18" Height="18" ></Image>
<TextBlock Text="{Binding Name}" Padding="2,0"/>
</StackPanel>
Edit 1:
Using:
<UserControl.Resources>
<Image x:Key="image" Source="pack://application:,,,/Resources/History.ico" Height="18" Width="18" Margin="2,0"/>
</UserControl.Resources>
<StackPanel Orientation="Horizontal">
<ContentControl Content="{StaticResource ResourceKey=image}"/>
Width="18" Height="18" ></Image>
<TextBlock Text="{Binding Name}" Padding="2,0"/>
</StackPanel>
as user2760623 suggested works.
My Problem however remains. At any given time I have multiple rows grouped by "Name". There can also be several different Groups. Depending on the Jobs current Status, I would like to Change the Image in the GroupItem Header. So how do I figure out which header is the "right" Header, and how do I manipulate exactly that one single Header?
Put the image source as a dynamic resource, and then you can change it. Just do the following:
Define the namespace - xmlns:clr="clr-namespace:System;assembly=mscorlib".
Add as resource - <clr:String x:Key="imageSource" >the path...</clr:String>.
And the image itself - <Image Source="{DynamicResource ResourceKey=imageSource}".
And when you want to change it - this.Resources["imageSource"] = "another path...".
You can also do the same concept just put the whole image as a resource (instead of just the image path), than you don't need to add the namespace (number 1 above). And put it as a Content of a ContentControl -
<ContentControl Content="{StaticResource ResourceKey=image}"/>.

WPF Metro Styling ListBox

I'm having a problem styling my ListBox selection background.
I used ListView originally, it was less problematic with styling but moving this to Silverlight app, I found out that it doesn't have ListView so I just used ListBox.
I want my app to be easily ported in Silverlight and also in Windows Phone so I used ListBox and now am having a trouble with the style.
My Metro app has Dark theme and I have custom ListBoxItem but am not sure why when I clicked on it, it looks like this
originally when using ListView, it looks like this
adding background color in my custom ItemsTemplate make it look this
How do I get rid of that White background and also restyle the item when hovered because it looks like this
this my XAML for listbox so far
<ListBox Grid.Row="3" Name="lvSubmeters" VerticalAlignment="Top" HorizontalAlignment="Stretch" SelectedItem="{Binding Path=SelectedListViewItem, Mode=TwoWay}" SelectedIndex="{Binding Path=SelectedListViewIndex, Mode=TwoWay}" ItemTemplate="{StaticResource SubmeterItems}" ItemsSource="{Binding Path=Store.AllItems}" Background="{x:Null}" Foreground="White">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Margin" Value="0" />
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
and also if you want my custom ItemsTemplate
<DataTemplate x:Name="SubmeterItems">
<Grid VerticalAlignment="Top" HorizontalAlignment="Stretch" Margin="5,5,5,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="166"/>
<ColumnDefinition Width="100*"/>
<ColumnDefinition Width="200"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" VerticalAlignment="Top">
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="{Binding MeterID}" FontSize="24" FontWeight="Bold" Foreground="#FF429AA3" />
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="{Binding Fullname}" FontSize="16" />
</StackPanel>
<StackPanel Grid.Column="1" VerticalAlignment="Top" Height="95">
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text=" " FontSize="24" FontWeight="Bold" Foreground="#FF429AA3" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="29*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock Grid.Column="0" VerticalAlignment="Top" Text="Last Reading:" FontSize="14" Margin="0,0,5,5" />
<TextBlock Grid.Column="0" VerticalAlignment="Top" Text="New Reading:" FontSize="14" Margin="0,0,5,5" />
<TextBlock Grid.Column="0" VerticalAlignment="Top" Text="KW/H Used:" FontSize="14" Margin="0,0,5,5" />
</StackPanel>
<StackPanel Grid.Column="1">
<TextBlock Grid.Column="1" VerticalAlignment="Top" Text="{Binding LastReading}" FontSize="14" Margin="0,0,5,5" FontWeight="Bold" />
<TextBlock Grid.Column="1" VerticalAlignment="Top" Text="{Binding NewReading}" FontSize="14" Margin="0,0,5,5" FontWeight="Bold" />
<TextBlock Grid.Column="1" VerticalAlignment="Top" Text="{Binding KwHUsed}" FontSize="14" Margin="0,0,5,5" FontWeight="Bold" />
</StackPanel>
</Grid>
</StackPanel>
<StackPanel Grid.Column="2" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Background="Black">
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="{Binding KwhUsedAmount}" FontSize="20" FontWeight="Bold" Foreground="Red" TextAlignment="Right" Margin="0,0,5,0" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="+" FontSize="20" Foreground="#99FF0000" TextAlignment="Right" Margin="0,0,5,0"/>
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="{Binding AdditionalCharges}" FontSize="20" Foreground="#99FF0000" TextAlignment="Right" Margin="0,0,5,0"/>
</StackPanel>
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="{Binding TotalAmount}" FontSize="34" FontWeight="Bold" Foreground="Green" TextAlignment="Right" Margin="0,0,5,0" />
</StackPanel>
</Grid>
</DataTemplate>
I tried taking this to Blend 4 but I can't find the way to do it.
It looks to me like your screenshots from above don't quite match the XAML that you've provided, however I think I can answer your questions.
For the white border around each item - From the way that the border changes to Purple when the item is selected, you can tell that it is part of the ItemContainer (because that is what gets selected). The ItemContainer will contain the Content of each ListBoxItem. The Content is rendered using the DataTemple (or ItemTemplate property). In your DataTemplate, you have a margin of 5 around the topmost grid, meaning that when the Content is rendered using that DataTemplate, there will be a margin around the outside of the content. That seems to be what you're getting with your white border around each item, so I'm pretty sure that's what is going on. Get rid of the margin in the top most grid of the DataTemplate, and the white border will be gone. If this isn't correct, please provide more complete XAML example (including the parent XAML element of the Listbox) because the xaml above, on its own, does not yield a white border when the Window background is Black.
Changing the colors/style of the ListBoxItem is pretty easy, and there are several ways to do it. The easiest way (in my opinion) is to add a trigger to the ItemContainerStyle that adjusts the background color on MouseOver. Here is a simple example, extending your existing ItemContainerStyle (triggers can be much more advanced, if you wish):
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Margin" Value="5" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Green"/>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
Hope that helps.

How can I wrap a custom text?

I have a listbox that uses datatemplates and one of the elements in the template is a textblock. Problem is that the words won't wrap, and I don't want to set a fixed size. Anybody that knows how to resolve this problem? It's driving me crazy!
<ListBox Grid.Row=" 1" HorizontalContentAlignment="Stretch" Background="#24221f" ItemsSource="{Binding Messages}" ScrollViewer.VerticalScrollBarVisibility="Visible" ClipToBounds="False" BorderBrush="{x:Null}">
<ListBox.ItemTemplate>
<DataTemplate >
<Border BorderBrush="#24221f" BorderThickness="3" Width=" auto">
<DockPanel Background="{StaticResource blackBackground}" HorizontalAlignment="Stretch" Width="auto">
<Border BorderThickness="3" BorderBrush="Transparent">
<Image Source="{Binding IconImageUrl}" VerticalAlignment="top" Height="22" Width ="22" DockPanel.Dock="Left" />
</Border>
<Border BorderThickness="3" BorderBrush="LightGray" Height="auto" Width="auto" HorizontalAlignment="Left" VerticalAlignment="Center" DockPanel.Dock="Left">
<Image Source="{Binding ProfileImageUrl}" VerticalAlignment="Top" HorizontalAlignment="Left" Height="48" Width ="48" />
</Border>
<StackPanel Orientation="Vertical" DockPanel.Dock="Left" Margin="5,0,0,0">
<Label Content="{Binding Path=Sender}" Foreground="#feb41c" FontFamily="Verdana" FontWeight="Bold" FontSize="14" />
<TextBlock Width="100" Text="{Binding Path=ShortMessage}" Margin="10,0,0,0" Foreground="BlanchedAlmond" TextWrapping="Wrap" FontFamily="Verdana" />
<Label Content="{Binding Path=Time}" Margin="10,0,0,0" Foreground="DarkGray" FontFamily="Verdana" FontStyle="Italic"/>
</StackPanel>
</DockPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
StackPanel is Evil :=) when i have strange behaviours in a xaml which include StackPanel, switching to a Grid with right parameters ( fixed sized, or stars or "Auto" ) often fix the issue.
Note also that there is an error in your xaml since you set the DockPanel.Dock of your first image (IconImageUrl) whereas it is in the border that surrrounds it that you should be setting it. That may get the Layout to do strange things.
just try with HorizontalContentAlignment property to "Stretch" of ListBoxItems using the Style
<Style TargetType="{x:Type ListBoxItem}" >
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
and also disable the HorizontalScrollBar visibility
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Update
<Window.Resources>
<SolidColorBrush x:Key="blackBackground" Color="Black"/>
<Style TargetType="{x:Type ListBoxItem}" >
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</Window.Resources>
<Grid>
<ListBox Grid.Row=" 1" HorizontalContentAlignment="Stretch" Background="#24221f" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ItemsSource="{Binding Messages}" ScrollViewer.VerticalScrollBarVisibility="Visible" ClipToBounds="False" BorderBrush="{x:Null}">
<ListBox.ItemTemplate>
<DataTemplate >
<Border BorderBrush="#24221f" BorderThickness="3" Width=" auto">
<DockPanel Background="{StaticResource blackBackground}" HorizontalAlignment="Stretch" Width="auto">
<Border BorderThickness="3" BorderBrush="Transparent">
<Image Source="{Binding IconImageUrl}" VerticalAlignment="top" Height="22" Width ="22" DockPanel.Dock="Left" />
</Border>
<Border BorderThickness="3" BorderBrush="LightGray" Height="auto" Width="auto" HorizontalAlignment="Left" VerticalAlignment="Center" DockPanel.Dock="Left">
<Image Source="{Binding ProfileImageUrl}" VerticalAlignment="Top" HorizontalAlignment="Left" Height="48" Width ="48" />
</Border>
<StackPanel Orientation="Vertical" DockPanel.Dock="Left" Margin="5,0,0,0">
<Label Content="{Binding Path=Sender}" Foreground="#feb41c" FontFamily="Verdana" FontWeight="Bold" FontSize="14" />
<TextBlock Text="{Binding Path=ShortMessage}" Margin="10,0,0,0" Foreground="BlanchedAlmond" TextWrapping="Wrap" FontFamily="Verdana" />
<Label Content="{Binding Path=Time}" Margin="10,0,0,0" Foreground="DarkGray" FontFamily="Verdana" FontStyle="Italic"/>
</StackPanel>
</DockPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
I think this thread answer's your question, see the accespted answer by "Nash" - Force TextBlock to wrap in WPF ListBox
( and remember to upvote the answer the the linked thread if it helps you :) )

Silverlight: how to modify the width of ListBox Items in response to user input?

I have a simple Silverlight 3 UserControl whose width increases or decreases based on user input.
The controls become more wide or more narrow as desired, except for the ListBox items. The ListBox Items grow horizontally to fit their content regardless of HorizontalContentAlignment being set to 'Stretch'.
Should I be able to set a property on ListBox.ItemContainerStyle to tell it to widen/narrow with the parent ListBox? There needs to be no horizontal scrolling within this Listbox.
Or is there a way to specify the ItemTemplate's StackPanel width that can be modified at runtime? I have bound this to a StaticResource, but do not understand whether I should be able to change the resource value. Can I create and bind to a DependencyProperty of the UserControl itself? I have not determined the syntax of this within the xaml.
code:
<UserControl x:Class="TheAssembly.GraphicViewer"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:userControls="clr-namespace:TheAssembly"
xmlns:core="clr-namespace:System;assembly=mscorlib">
<UserControl.Resources>
<userControls:DictionaryAttributeConverter x:Name="MyDictionaryAttributeConverter" />
<core:Double x:Key="ListItemWidth">155</core:Double>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Width="175" >
<Border Style="{StaticResource DraggableWindowBorder}">
<StackPanel x:Name="RootStackPanel" Orientation="Vertical" HorizontalAlignment="Stretch">
<Border Background="Black" HorizontalAlignment="Stretch" Margin="0">
<TextBlock x:Name="Header" Foreground="White" FontSize="14" TextWrapping="Wrap" Margin="2,0,2,0"
Height="25" HorizontalAlignment="Left"
Text="{Binding HeaderText}"/>
</Border>
<TextBlock x:Name="Title" Style="{StaticResource GraphicViewerDetail}" FontSize="12" FontWeight="Medium" TextWrapping="Wrap"
Text="{Binding Title}" Margin="3,0,0,0" HorizontalAlignment="Left"/>
<ListBox x:Name="AttributeListBox" ItemsSource="{Binding Attributes}" BorderBrush="Red" HorizontalContentAlignment="Stretch"
Foreground="AntiqueWhite" Background="Transparent" IsEnabled="False" HorizontalAlignment="Stretch"
ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollBarVisibility="Hidden">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="Margin" Value="0,-2,0,0"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="ListBoxItemStackPanel" HorizontalAlignment="Stretch" Orientation="Vertical" >
<TextBlock FontSize="10" Text="{Binding Key}" Foreground="White" FontWeight="Bold" HorizontalAlignment="Stretch"
Margin="2,0,0,0" TextWrapping="Wrap"/>
<TextBlock FontSize="10" Text="{Binding Value}" Foreground="White" Margin="6,-2,0,0" TextWrapping="Wrap"
HorizontalAlignment="Stretch" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Border>
</Grid>

Resources