4

我有一个 ListView，它的 ItemsPanelTemplate 是一个 Canvas，每个项目都是一个矩形。我正在尝试在 (-50,-50) 的位置在 Canvas 外绘制一个矩形，但没有连续。我能以某种方式做到这一点吗？

在此处输入图像描述

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>

后面的代码：

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

3 回答 3

2

我可能错了，但这似乎是一个相当简单的问题（我可能完全假设了错误的事情，但我不确定，所以我会假设以防万一）。

您已将您定义ListView为 200 乘以 200，并且您Canvas正在占用所有空间。从你的照片来看，我觉得Canvas你想成为 200 到 200 的人，而不是ListView.

xml:

<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>

结果：

在此处输入图像描述

于 2013-01-03T00:53:01.390 回答
1

试试这种风格（我从默认模板中删除了滚动查看器）：

我同意这样的评论，即像这样绘制的控件是值得怀疑的。

<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>

我在视图模型中添加了一个颜色属性：

public string Color { get; set; }
于 2013-01-03T00:44:59.173 回答
0

我是通过 Popup 完成的，它看起来不错，但我不知道它是否符合您的要求

<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>

这给出了与您想要的相同的结果。但是你需要在这方面做更多的工作，比如他们的相对位置等等。

于 2013-01-03T03:05:48.520 回答