Draw ListViewItem outsite canvas listview template

Question

I have a ListView that its ItemPanelTemplate is a Canvas, and each item is a rectangle. I am trying to draw a Rectangle outside the canvas at position (-50, -50) without any sequential actions. can i do this somehow?

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(); } } 

Answer 1

Maybe I'm wrong, but this is apparently a fairly simple problem (I may have been completely wrong, but I'm not sure, so just in case I agree with this assumption).

You have determined that your ListView should be 200 by 200, and your Canvas takes up all this space. Judging by your picture, I feel like Canvas you want to be 200 by 200, not 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:

Answer 2

Try this style (I removed scrollviewer from the default template):

I agree with the comments that a control like this is dubious.

 <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 to the viewmodel:

 public string Color { get; set; } 

Answer 3

I did it through Popup, it looks good, but I don’t know if it meets your requirements 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 the same result as you. But you need to work more on this, as their relative positions and all.