4

ItemsPanelTemplate が Canvas であり、すべての項目が四角形である ListView があります。(-50,-50) の位置でキャンバスの外に Rectangle を連続して描画しようとしています。何とかできますか？

ここに画像の説明を入力

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

私が間違っているかもしれませんが、これはかなり単純な問題のようです (私は完全に間違ったことを仮定している可能性がありますが、確信が持てないので、念のために仮定します)。

あなたはListView200 x 200 になるように定義しましたが、あなたCanvasはそのすべてのスペースを占有しています。あなたの写真から判断すると、あなたCanvasは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>

結果：

ここに画像の説明を入力

于 2013-01-03T00:53:01.390 に答える
1

このスタイルを試してください (デフォルトの tamplate から scrollviewer を削除しました):

このように描画するコントロールが疑わしいというコメントに同意します。

<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

私はポップアップを介してそれを行いました。見た目は良いですが、要件に適合するかどうかはわかりません

<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 に答える