Draw ListViewItem outsite the canvas of the listview template - wpf

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.

Related

Remove highlights from ListBox of ListBox

I have the following code and I can't remove the highlights:
<ListBox
Name="OuterListBox"
HorizontalAlignment="Center"
VerticalAlignment="Center"
AlternationCount="2"
Background="White"
BorderThickness="0"
ItemsSource="{Binding Board}">
<ListBox.ItemContainerStyle>
<Style BasedOn="{StaticResource {x:Type ListBoxItem}}" TargetType="{x:Type ListBoxItem}">
<Style.Resources>
<AlternationConverter x:Key="AlternationPaddingConverter">
<Thickness Right="25" />
<Thickness Left="25" />
</AlternationConverter>
</Style.Resources>
<Setter Property="Padding" Value="{Binding (ItemsControl.AlternationIndex), RelativeSource={RelativeSource Self}, Converter={StaticResource AlternationPaddingConverter}}" />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<ListBox
Name="InnerListBox"
Background="Transparent"
BorderThickness="0"
ItemContainerStyle="{StaticResource ChangeListBoxItemHighlight}"
ItemsSource="{Binding}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Ellipse
Margin="2"
Width="{Binding Size}"
Height="{Binding Size}"
Cursor="Hand"
Fill="{Binding Background}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I tried to use a setter with Property="Template" and value <ControlTemplate TargetType="{x:Type ListBoxItem}">, but the alternation of the rows disappeared.
How can I remove the highlights, but still keep the alternating rows?
A control template defines the visual appearance of a control, its states and required parts. In order to change the representation of states like Mouse Over or Focused, you have to modify the control template. However, it is not that easy, since control templates are complex and hard to built from scratch. You can always refer to the documentation for a distinct control.
ListBox Styles and Templates > ListBoxItem (Parts and States)
As you can see, there is much to consider, so you are better off copying the default style and control template and adapt them to your needs. I have extracted and adapted them according to your question. In essence this means removing all focus and mouse triggers and adding the alternation padding.
<Style x:Key="ListBoxItemStyle" TargetType="{x:Type ListBoxItem}">
<Style.Resources>
<AlternationConverter x:Key="AlternationPaddingConverter">
<Thickness Right="25" />
<Thickness Left="25" />
</AlternationConverter>
</Style.Resources>
<Setter Property="Padding" Value="{Binding (ItemsControl.AlternationIndex), RelativeSource={RelativeSource Self}, Converter={StaticResource AlternationPaddingConverter}}" />
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You can then just reference this style in your ListBox or inline it if you want.
<ListBox
Name="OuterListBox"
HorizontalAlignment="Center"
VerticalAlignment="Center"
AlternationCount="2"
Background="White"
BorderThickness="0"
ItemsSource="{Binding Board}"
ItemContainerStyle="{StaticResource ListBoxItemStyle}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<ListBox
Name="InnerListBox"
Background="Transparent"
BorderThickness="0"
ItemContainerStyle="{StaticResource ChangeListBoxItemHighlight}"
ItemsSource="{Binding}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Ellipse
Margin="2"
Width="{Binding Size}"
Height="{Binding Size}"
Cursor="Hand"
Fill="{Binding Background}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

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>

WPF menu styled listbox (MVVM)

I want to create a menu which tracks the selected item, so I'm using nested ListBoxes (since the options for Selectors are quite limited. The main ListBox is arranged horizontally, and each ListBoxItem contains a TextBlock and a StackPanel with another ListBox (this one displays vertically) to show "MenuItems" (which I also need to track the selected item). Like this:
<ListBox DockPanel.Dock="Top" Grid.Column="0" ItemsSource="{Binding DashBoards}"
IsSynchronizedWithCurrentItem="True" SelectedItem="{Binding SelectedDashBoard}">
<ListBox.Template>
<ControlTemplate TargetType="{x:Type ListBox}">
<DockPanel>
<ScrollViewer x:Name="scrollviewer" HorizontalScrollBarVisibility="Hidden" CanContentScroll="False">
<StackPanel IsItemsHost="True" Orientation="Horizontal" />
</ScrollViewer>
</DockPanel>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Name}" />
<dx:DXExpander IsExpanded="{Binding IsSelected}">
<ListBox ItemsSource="{Binding Sections}"
IsSynchronizedWithCurrentItem="True" SelectedItem="{Binding SelectedSection}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Metadata.Name}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</dx:DXExpander>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I managed to display this ListBox on top of other controls, so it looks like a menu.
Now with the problem... when I select an item in the horizontal ListBox, the Expander expands ok, but the ListBox grows in height so all other items look like they expanded too.
How can I get to expand ONLY the selected item, without changing the height of the ListBox?
In other words, how can I get one of the vertical ListBoxes to overflow its parent container (aka the horizontal ListBox)?
I think I need to re-structure everything, but I have no clue how to begin. I've found some solutions that use a Canvas, but they don't seem to work in this case.
Any help is welcome and will be diligently upvoted ;-)
(Note: just in case it was not clear before, I need to know which element is selected in the horizontal ListBox, and also which one is selected in each individual vertical ListBox. This binds to the corresponding ViewModel which tracks selection, and both the horizontal and vertical ListBoxes are populated dynamically, so no way to define them in XAML)
You could move the selected style out of the data template so it's not applied to all items.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="ListViewItem">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Height" Value="90"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<ListView>
<ListView.Items>
<sys:String>a</sys:String>
<sys:String>b</sys:String>
<sys:String>c</sys:String>
<sys:String>d</sys:String>
<sys:String>e</sys:String>
</ListView.Items>
</ListView>
</Grid>
</Window>
EDIT: after properly reading what you were after, I don't have your expander class or the item that you're binding to so I'm using Expander and MenuItem but this gives an example of using a listview as a menu with selectable items, maybe it'll help solve your problem, I'm assuming your expander control hides the actual expander button.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
Title="MainWindow" Height="350" Width="525">
<Grid>
<ListView Height="16" VerticalAlignment="Top">
<ListView.Resources>
<Style TargetType="ListViewItem">
<Setter Property="Margin" Value="0,0,10,0"/>
</Style>
</ListView.Resources>
<ListView.Template>
<ControlTemplate TargetType="{x:Type ListBox}">
<StackPanel Background="LightGray" IsItemsHost="True" Orientation="Horizontal" />
</ControlTemplate>
</ListView.Template>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" ClipToBounds="False">
<TextBlock Text="{Binding Header}" />
<Canvas>
<Expander IsExpanded="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListViewItem}}">
<Expander.Style>
<Style TargetType="{x:Type Expander}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Expander}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="3" SnapsToDevicePixels="true">
<DockPanel>
<ContentPresenter x:Name="ExpandSite" DockPanel.Dock="Bottom" Focusable="false" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</DockPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="true">
<Setter Property="Visibility" TargetName="ExpandSite" Value="Visible"/>
</Trigger>
<Trigger Property="ExpandDirection" Value="Right">
<Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Right"/>
</Trigger>
<Trigger Property="ExpandDirection" Value="Up">
<Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Top"/>
</Trigger>
<Trigger Property="ExpandDirection" Value="Left">
<Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Left"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Expander.Style>
<ListView ItemsSource="{Binding Items}" IsSynchronizedWithCurrentItem="True" />
</Expander>
</Canvas>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListView.Items>
<MenuItem Header="File">
<MenuItem.Items>
<MenuItem Header="Open" IsHitTestVisible="False"/>
<MenuItem Header="Exit" IsHitTestVisible="False"/>
</MenuItem.Items>
</MenuItem>
<MenuItem Header="Edit">
<MenuItem.Items>
<MenuItem Header="Cut" IsHitTestVisible="False"/>
<MenuItem Header="Copy" IsHitTestVisible="False"/>
<MenuItem Header="Paste" IsHitTestVisible="False"/>
</MenuItem.Items>
</MenuItem>
</ListView.Items>
</ListView>
</Grid>
</Window>

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