How to use different ItemsControl.ItemContainerStyle for different ItemsPanelTemplate - wpf

I have an ItemsControl which uses different ItemsPanelTemplate based on certain condition. I want to have different ItemContainerStyle for each ItemsPanelTemplate (in fact, I want ItemsContainerStyle for only one of the templates). How can I achieve that? Here is the code I am using:
<UserControl.Resources>
<ItemsPanelTemplate x:Key="UGridItemsPanelTemplate">
<UniformGrid Name="MyUGrid" Columns="{Binding Columns}" Rows="{Binding Rows}"/>
</ItemsPanelTemplate>
<ItemsPanelTemplate x:Key="GridItemsPanelTemplate">
<Grid Name="MyGrid" Loaded="MyGrid_Loaded"/>
</ItemsPanelTemplate>
</UserControl.Resources>
<Grid>
<!--ItemList has 1000+ items if IsMap is FALSE; using ItemsConatinerStyle in this case slows the UI down-->
<ItemsControl Name="MyPresenter" ItemsSource="{Binding ItemList}" Tag="{Binding IsMap}">
<ItemsControl.Style>
<Style TargetType="{x:Type ItemsControl}">
<Setter Property="ItemsPanel" Value="{StaticResource UGridItemsPanelTemplate}"/>
<Style.Triggers>
<Trigger Property="Tag" Value="TRUE">
<!--I want to use ItemContainerStyle only for this template-->
<Setter Property="ItemsPanel" Value="{StaticResource GridItemsPanelTemplate}"/>
</Trigger>
</Style.Triggers>
</Style>
</ItemsControl.Style>
<!--Use this style only if IsMap is TRUE-->
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ContentControl}">
<ContentPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Grid.Row" Value="{Binding GridRow}"/>
<Setter Property="Grid.Column" Value="{Binding GridColumn}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border x:Name="Border1" Background="{Binding BorderVisible}"
BorderThickness="1" Padding="{Binding PaddingVal}">
<Button Name="ItemButton" Content="{Binding Label}" IsEnabled="{Binding IsButtonEnabled}" CommandParameter="{Binding}"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</UserControl>
Thanks,
RDV

I found a way, When IsMap is TRUE, set ItemsContainerStyle along with ItemsPanel. Updated code is posted below:
<UserControl.Resources>
<ItemsPanelTemplate x:Key="UGridItemsPanelTemplate">
<UniformGrid Name="MyUGrid" Columns="{Binding Columns}" Rows="{Binding Rows}"/>
</ItemsPanelTemplate>
<ItemsPanelTemplate x:Key="GridItemsPanelTemplate">
<Grid Name="MyGrid" Loaded="MyGrid_Loaded"/>
</ItemsPanelTemplate>
<Style x:Key="ClusterGridContainerStyle">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ContentControl}">
<ContentPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Grid.Row" Value="{Binding UnitGridRow}"/>
<Setter Property="Grid.Column" Value="{Binding UnitGridColumn}"/>
</Style>
</UserControl.Resources>
<Grid>
<!--ItemList has 1000+ items if IsMap is FALSE-->
<ItemsControl Name="MyPresenter" ItemsSource="{Binding ItemList}" Tag="{Binding IsMap}">
<ItemsControl.Style>
<Style TargetType="{x:Type ItemsControl}">
<Setter Property="ItemsPanel" Value="{StaticResource UGridItemsPanelTemplate}"/>
<Style.Triggers>
<Trigger Property="Tag" Value="TRUE">
<!--I want to use ItemContainerStyle only for this template-->
<Setter Property="ItemsPanel" Value="{StaticResource GridItemsPanelTemplate}"/>
<Setter Property="ItemContainerStyle" Value="{StaticResource ClusterGridContainerStyle}"/>
</Trigger>
</Style.Triggers>
</Style>
</ItemsControl.Style>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border x:Name="Border1" Background="{Binding BorderVisible}"
BorderThickness="1" Padding="{Binding PaddingVal}">
<Button Name="ItemButton" Content="{Binding Label}" IsEnabled="{Binding IsButtonEnabled}" CommandParameter="{Binding}"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</UserControl>

Related

ListBox items separator when more than one item

I have a ListBox and I'm trying to insert a separator between items but I want the separator to show when there is more than one item.
<ListBox Grid.Row="1" x:Name="WarningListBox" Visibility="Visible"
HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch"
ItemsSource="{Binding Path=Warnings}">
<ListBox.Style>
<Style TargetType="{x:Type ListBox}">
<Setter Property="Height" Value="0"/>
<Style.Triggers>
<DataTrigger Binding="{Binding CanShowAll}" Value="True">
<Setter Property="Height" Value="Auto"/>
<Setter Property="MaxHeight" Value="120"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.Style>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem" BasedOn="{StaticResource NewDesignListItemBoxStyle}">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.Resources>
<DataTemplate x:Key="TypeOneViewModel" DataType="{x:Type vm:TypeOneViewModel}">
<notifications:TypeOneNotification Focusable="False" MinHeight="30" Background="Beige"/>
</DataTemplate>
<DataTemplate x:Key="TypeTwoViewModel" DataType="{x:Type vm:TypeTwoViewModel}">
<notifications:TypeTwoNotification Focusable="False" MinHeight="30" Background="Beige"/>
</DataTemplate>
</ListBox.Resources>
<ListBox.ItemTemplateSelector>
<templateSelectors:WarningTemplateSelector
TypeOneDataTemplate="{StaticResource TypeOneViewModel}"
TypeTwoDataTemplate="{StaticResource TypeTwoViewModel}"/>
</ListBox.ItemTemplateSelector>
</ListBox>
I've tried adding the Separator right before the closing tag
<Separator Margin="30 0 30 0" BorderBrush="#CCCCCC" BorderThickness="2"/>
but it crashes the application. Should I somehow put it in a DataTemplate? I think it will then show under each item (even when there's only one item).
I think, you want to achieve something like this:
<DataTemplate x:Key="TypeOneViewModel" DataType="{x:Type vm:TypeOneViewModel}">
<DockPanel LastChildFill="True">
<Separator x:Name="separator" HorizontalAlignment="Stretch" VerticalAlignment="Top" DockPanel.Dock="Top">
<Separator.Style>
<Style TargetType="Separator">
<Setter Property="Visibility" Value="Visible"/>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}, FallbackValue={x:Null}}" Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Separator.Style>
</Separator>
<!--Rest of your DataTemplate-->
<notifications:TypeOneNotification Focusable="False" MinHeight="30" Background="Beige"/>
</DockPanel>
</DataTemplate>
This will hide the separator, if item have no PreviousData, so for the 1st item.
You can easy take Separator style outside if used more then once, and just call it as StaticResource.

WPF. Scroll ListBox by item

I have listbox where are icons and I have to scroll this listbox by item (now it is scrolling by pixel's). I try to use ScrollViewer.CanContentScroll but it does not work. I think it is problem with WrapPanel
ListBox example:
My xaml:
<Style TargetType="ListBox">
<Setter Property="Height" Value="490"/>
<Setter Property="Width" Value="968"/>
<Setter Property="Margin" Value="30,98,362,135"/>
<Setter Property="Padding" Value="5,25,0,27"></Setter>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Visible"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="ListBoxItem">
<Setter Property="BorderThickness" Value="5"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="Margin" Value="3,3,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="backgroundBorder" Width="Auto">
<ContentPresenter>
<ContentPresenter.ContentTemplate>
<DataTemplate>
<Grid Width="170" Height="212" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="{Binding Path=Image}" Stretch="UniformToFill" />
<Label Grid.Row="1" Margin="0,14,0,0" Content="{Binding Path=Title}" HorizontalAlignment="Center"
FontFamily="Arial" FontSize="18" FontWeight="Normal" Foreground="#3F3E3E"/>
</Grid>
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ListBox ItemsSource="{Binding Path=MyImages, ElementName=window1}"
ScrollViewer.CanContentScroll="True"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Visible"/>

WPF: How to show column value for a Chart.ColumnSeries?

I'm using the WPF Toolkit for a .Net 4.0 application written in C#. I have a Chart containing a Column Series bound to a dictionary. The chart works fine but I'd like to show the actual value of each column, either in a textbox below each column, in the middle of each column, or on top of each column. I've been searching for a while and haven't been able to find any information on this. I set up a style for the chart as well as the ColumnSeries, but have not made any progress yet. Any suggestions?
My Chart xaml is:
xmlns:DV="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
xmlns:DVC="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
...
<Page.Resources>
<Style x:Key="MyChart" TargetType="DVC:Chart">
<Setter Property="PlotAreaStyle">
<Setter.Value>
<Style TargetType="Grid">
<Setter Property="Background" Value="#FF2D2D30" />
</Style>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="NoLegend" TargetType="DV:Legend">
<Setter Property="Visibility" Value="Hidden" />
<Setter Property="Width" Value="0" />
</Style>
<Style x:Key="ColumnSeriesStyle" TargetType="{x:Type DVC:ColumnSeries}">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DVC:ColumnSeries}">
<Canvas x:Name="PlotArea" Visibility="Visible">
<TextBox Text="{Binding Path=Value.Value}" IsReadOnly="True"/>
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
...
<DVC:Chart Name="TempChart" Style="{StaticResource MyChart}" LegendStyle="{StaticResource NoLegend}">
<DVC:Chart.Series>
<DVC:ColumnSeries IndependentValueBinding="{Binding Path=Value.Value}"
DepdendentValueBinding="{Binding Path=Value.Value}"
ToolTip="{Binding Path=Value.Value}"
Style="{StaticResource ColumnSeriesStyle}">
<DVC:ColumnSeries.DependentRangeAxis>
<DVC:LinearAxis x:Name="TempYAxis"
</DVC:ColumnSeries.DependentRangeAxis>
</DVC:Chart.Series>
</DVC:Chart>
I managed to style my ColumnSeries with this:
<Style x:Key="ColumnSeriesStyle" TargetType="{x:Type DVC:ColumnSeries}">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DVC:ColumnSeries}">
<Canvas x:Name="PlotArea" Visibility="Visible">
<!-- Actual Values -->
<ListBox x:Name="ActualValueListBox" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch"
Background="{StaticResource WindowBackground}" Foreground="#FFBB702F" BorderBrush="#FF2D2D30" ItemsSource="{Binding}" >
<ListBox.ItemTemplate>
<DataTemplate>
<TextBox HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="Center" FontSize="12"
Foreground="{StaticResource ValueForeground}" Background="{StaticResource ValueBackground}" Width="40"
Text="{Binding Path=Value.Value}" />
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="1" Height="20"
Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DVC:ColumnSeries}}, Path=ActualWidth}"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Draw ListViewItem outsite the canvas of the listview template

I have a ListView that its ItemsPanelTemplate is a Canvas, and every item is a rectangle.
I'm trying to draw a Rectangle outside the Canvas in the position of (-50,-50) with no successive. can I do that somehow ?
The XAML:
<Grid >
<ListView BorderThickness="0" BorderBrush="Transparent" ItemsSource="{Binding Rectangles}" Height="200" Width="200">
<ListView.Resources>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Canvas.Left" Value="{Binding Left, Mode=TwoWay}" />
<Setter Property="Canvas.Top" Value="{Binding Top, Mode=TwoWay}" />
</Style>
</ListView.Resources>
<ListView.ItemTemplate>
<DataTemplate DataType="{x:Type WpfApplication2:RectangleModel}">
<Rectangle Width="30" Height="30" Canvas.Left="{Binding Left}" Canvas.Right="{Binding Right}" Fill="LightCoral"
ClipToBounds="False"/>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Background="LightBlue"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</Grid>
Code behind:
public partial class MainWindow : Window
{
public List<RectangleModel> Rectangles { get; set; }
public MainWindow()
{
Rectangles = new List<RectangleModel>();
Rectangles.Add(new RectangleModel { Left = -50, Top = -50 });
Rectangles.Add(new RectangleModel { Left = 0, Top = 0 });
Rectangles.Add(new RectangleModel { Left = 50, Top = 50 });
DataContext = this;
InitializeComponent();
}
}
I may be wrong, but this seems to be rather simple problem (I may have completely assumed the wrong thing, but I'm not sure so I'm going with the assumption just in case).
You've defined your ListView to be 200 by 200 and your Canvas is taking all that space. Judging by your picture, I feel it is Canvas that you want to be of 200 by 200 not the ListView.
Xaml:
<Grid >
<ListView BorderThickness="0" BorderBrush="Transparent" ItemsSource="{Binding Rectangles}">
<ListView.Resources>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Canvas.Left" Value="{Binding Left, Mode=TwoWay}" />
<Setter Property="Canvas.Top" Value="{Binding Top, Mode=TwoWay}" />
</Style>
</ListView.Resources>
<ListView.ItemTemplate>
<DataTemplate DataType="{x:Type wpfApplication1:RectangleModel}">
<Rectangle Width="30" Height="10" Canvas.Left="{Binding Left}" Canvas.Top="{Binding Top}" Fill="LightCoral"
ClipToBounds="False"/>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Background="LightBlue" ClipToBounds="False" Height="200" Width="200"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</Grid>
Result:
Try this style (I removed the scrollviewer from the default tamplate):
I agree with the comments saying a control that draws like this is doubtful.
<Window x:Class="CanvasListView.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:CanvasListView="clr-namespace:CanvasListView"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
d:DataContext="{d:DesignInstance Type=CanvasListView:MainWindow,IsDesignTimeCreatable=True}"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<SolidColorBrush x:Key="ListBorder" Color="#828790"/>
<Style TargetType="{x:Type ListView}">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="BorderBrush" Value="{StaticResource ListBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="Both"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListView}">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="1" SnapsToDevicePixels="true">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ListView BorderThickness="0" BorderBrush="Transparent" ItemsSource="{Binding Rectangles}" Height="200" Width="200">
<ListView.Resources>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Canvas.Left" Value="{Binding Left, Mode=TwoWay}" />
<Setter Property="Canvas.Top" Value="{Binding Top, Mode=TwoWay}" />
</Style>
</ListView.Resources>
<ListView.ItemTemplate>
<DataTemplate DataType="{x:Type CanvasListView:RectangleModel}">
<Rectangle Width="30" Height="30" Fill="{Binding Color}"/>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Background="LightBlue"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</Grid>
</Window>
I added a color property in the viewmodel:
public string Color { get; set; }
I did it via Popup, it looks well but I dont know whether it fits in your requirement or not
<Grid Background="Transparent">
<ListView BorderThickness="0" BorderBrush="Transparent" ItemsSource="{Binding Rectangles}" Height="200" Width="200">
<ListView.Resources>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Canvas.Left" Value="{Binding Left, Mode=TwoWay}" />
<Setter Property="Canvas.Top" Value="{Binding Top, Mode=TwoWay}" />
</Style>
</ListView.Resources>
<ListView.ItemTemplate>
<DataTemplate DataType="{x:Type WpfApplication2:RectangleModel}">
<Popup Width="30" Height="30" Canvas.Left="{Binding Left}" Canvas.Right="{Binding Right}"
IsOpen="True"
ClipToBounds="False">
<Rectangle Fill="LightCoral"/>
</Popup>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Background="LightBlue"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</Grid>
This gives same result as you want. But you need to work more on that like their relative positions and all.

unable to drag Custom ScrollViewer in WrapPanel inside ItemsPanelTemplate

Unable to drag the scroll bar after implementing custom scrollviewer on listbox in a usercontrol.
its working fine for other usercontrols which has listbox.
Only difference between usercontrols is WrapPanel
<!--ListBoxItem Style-->
<Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
<Setter
Property="FocusVisualStyle"
Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border
x:Name="ItemBorder"
BorderBrush="Transparent"
Background="Transparent"
BorderThickness="1" Margin="15"
>
<ContentPresenter/>
</Border>
<ControlTemplate.Triggers>
<Trigger
Property="IsSelected"
Value="True">
<Setter
TargetName="ItemBorder"
Property="Background"
Value="{StaticResource G2Brush}"/>
<Setter
TargetName="ItemBorder"
Property="BorderBrush"
Value="{StaticResource G4Brush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--ListBox Style-->
<Style TargetType="{x:Type ListBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}">
<ScrollViewer x:Name="ScrollViewer">
<ItemsPresenter/>
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Border x:Name="border" Background="Transparent" Margin="2">
<Grid Width="70" Height="70">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Border x:Name="borderImage" Background="Transparent" Grid.Row="0">
<Image Source="{Binding Path=FilePath}" />
</Border>
<TextBlock x:Name="ThumbFileName" Text="{Binding Path=FileName}" Grid.Row="1"
Style="{StaticResource ThumbFileName}" VerticalAlignment="Top" HorizontalAlignment="Left"
TextTrimming="CharacterEllipsis"
/>
</Grid>
</Border>
<DataTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="borderImage" Property="BorderBrush" Value="{StaticResource B1Brush}" />
<Setter TargetName="borderImage" Property="BorderThickness" Value="1" />
<Setter TargetName="ThumbFileName" Property="Foreground" Value="{StaticResource B1Brush}" />
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate >
<WrapPanel Margin="10"
Background="Red"
/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter
Property="ScrollViewer.HorizontalScrollBarVisibility"
Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
</Style>
<Grid Background="Transparent">
<ListBox x:Name="reportListViewControl"
Background="Transparent"
Foreground="{StaticResource G4Brush}"
BorderThickness="0"
Style="{StaticResource ListBoxStyle}"
ItemContainerStyle="{StaticResource ListBoxItemStyle}"
Drop="reportListViewControl_Drop"
SelectionMode="Extended"
SelectionChanged="reportListViewControl_SelectionChanged"
AllowDrop="True">
</ListBox>
</Grid>
In your example WrapPanel takes all the space it needs to show its items. To enable scrollbars you can restrict it by the size of its parent, ListBox:
<ItemsPanelTemplate>
<WrapPanel Margin="10" Width="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}}"
Height="{Binding ActualHeight, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}}"/>
</ItemsPanelTemplate>
Or you can use UniformGrid and control it with Columns or Rows property.

Resources